Shopify Sticky Cart: Display Compare At Price & Boost Conversions

Hey there, fellow store owners! Let's talk about something super effective for boosting conversions: clearly showing discounts. I recently saw a great discussion in the Shopify community where JustinasR asked about adding that crucial "compare at price" to their sticky cart. You know, the original price crossed out next to the sale price? It's a small detail, but it can make a big difference in highlighting the value customers are getting.

The community really rallied, and we got some fantastic insights and actionable code snippets. It's not just about slapping a number on there; it's about doing it right so it looks professional, stays synced, and avoids any legal headaches. Let's break down what we learned.

Why a "Compare At" Price in Your Sticky Cart Matters

Imagine a customer browsing your product page, they scroll down, and that sticky add-to-cart bar pops into view. If they see a product currently on sale, but only the discounted price is visible, they might not immediately grasp the deal. Adding the original, higher price, crossed out, immediately communicates the savings and creates a sense of urgency and value. It's a psychological nudge that says, "Hey, this is a great deal right now!"

The Core Challenge: Getting It Right and Keeping It Synced

As PreBuiltStores pointed out early in the discussion, the "easiest way is to edit the sticky cart’s price rendering code... and display the compare at price only when it’s higher than the actual variant price. Add a line-through style so customers can clearly see the discount." But here's the kicker: "The tricky part is keeping it synced when customers change variants or quantities." This is where the community's collective wisdom really shines.

Several experts, including ten12star and Ploqo, jumped in with detailed code solutions. Let's walk through a comprehensive approach that works for most themes, then touch on a theme-specific alternative.

Method 1: Customizing Your Sticky Cart Snippet (Recommended for most themes)

This approach involves finding the specific Liquid file responsible for rendering your sticky cart and modifying it directly. This is often the cleanest way to integrate this feature.

Step 1: Duplicate Your Theme and Find the Sticky Cart Code

This is absolutely critical: Before you touch any code, always duplicate your live theme. Go to Online Store → Themes, click the … button next to your current theme, and select "Duplicate." Work on this duplicated theme first! As DiegoCosta2428 wisely advised, "Paste it into a duplicate theme first and preview the sticky bar there."

Now, in your duplicated theme, click Actions → Edit code. In the file explorer, search for files that likely render your sticky bar. Common names include sticky-atc.liquid, sticky-cart.liquid, or product-sticky-form.liquid. These are usually found within the snippets/ or sections/ folders. Once you find it, locate the line that outputs the current price, which often looks something like this:

{{ product.selected_or_first_available_variant.price | money }}

Step 2: Add the Compare-At Price Liquid Code

You'll replace that single line with a block of Liquid code that displays both the current price and the compare-at price, but only if there's an actual discount. This ensures you don't show a crossed-out price that's the same as the actual price, which can look odd.

{%- assign sticky_variant = product.selected_or_first_available_variant -%}


  
    {{ sticky_variant.price | money }}
  

   sticky_variant.price %}hidden{% endunless %}>
    {{ sticky_variant.compare_at_price | money }}

Notice the unless check: {% unless sticky_variant.compare_at_price > sticky_variant.price %}hidden{% endunless %}. This is key to ensuring the crossed-out price only appears when it's genuinely higher than the current price, preventing awkward displays.

Step 3: Style It Up with CSS

To make it look good, you'll need some CSS. Find your theme's main CSS file (often base.css or theme.css in the assets/ folder) and add this:

.sticky-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.sticky-price__compare {
  color: #8a8a8a;
  font-size: 0.85em;
  text-decoration: line-through;
}
.sticky-price__compare[hidden] {
  display: none;
}

This CSS will arrange the prices nicely, make the compare-at price slightly smaller and gray, and add that classic line-through effect. The [hidden] attribute ensures the compare-at price completely disappears when the hidden attribute is present, thanks to our Liquid unless statement.

Step 4: Keep Prices Synced with JavaScript

This is the "tricky part" PreBuiltStores mentioned! If your product has variants (like different sizes or colors) or allows quantity changes, the sticky bar needs to update dynamically. Add this JavaScript at the bottom of the same sticky cart snippet file:

Unlock Sales: How to Add 'Compare At' Prices to Your Shopify Sticky Cart