Boost Sales: How to Display 'Compare At' Prices in Your Shopify Sticky Cart

Hey fellow store owners!

I recently jumped into a really insightful discussion on the Shopify community forums that I just had to share with you all. It kicked off with a question from JustinasR, who was looking to add that super effective "compare at price" – you know, the original price with a line through it – right next to the main price in his store's sticky cart design. He even shared a preview image, and honestly, it’s a smart move for highlighting discounts and boosting conversions.

The beauty of the Shopify community really shone through here, with several experts chiming in to offer practical advice and even full code snippets. It’s not just about slapping a price on there; you need to make sure it’s dynamic, updates correctly with variants, and, crucially, stays compliant with consumer protection laws. Let’s dive into how you can implement this in your own store, pulling together the best insights from the discussion.

Getting Started: The Golden Rule of Theme Customization

Before you even think about touching any code, there’s a unanimous piece of advice from the community, echoed by folks like PreBuiltStores, DiegoCosta2428, and v.marychenka: always, always, always duplicate your theme first. This creates a safe sandbox to test your changes without risking your live store. If something goes wrong, you can simply discard the duplicated theme and start over. It’s a lifesaver, trust me!

You can do this by going to your Shopify admin, navigating to Online Store > Themes, clicking the Actions button next to your live theme, and selecting Duplicate.

Adding the Compare-At Price to Your Sticky Cart: A Step-by-Step Guide

The core of the solution involves editing your theme’s code. The goal is to find where your sticky cart’s price is rendered and then insert the compare-at price logic right alongside it. Here’s a detailed approach, primarily based on ten12star’s excellent breakdown, with crucial testing tips from others:

1. Find the Sticky Cart Code

First, you need to locate the file responsible for your sticky cart. From your Shopify admin:

1. Go to Online Store > Themes.
2. Click the Actions button next to your duplicated theme, then select Edit code.
3. In the file editor, use the search bar (usually on the left) to look for files that might contain your sticky bar’s code. Common names include sticky-atc.liquid, sticky-cart.liquid, or product-sticky-form.liquid. These are typically found in the snippets/ or sections/ folders.
4. Once you open a likely file, search within it for the line that outputs the product price. It often looks something like this:

{{ product.selected_or_first_available_variant.price | money }}

2. Add the Compare-At Price Logic

Once you’ve found the price output, you’ll replace it with a more robust Liquid snippet that includes the compare-at price. This code, shared by ten12star, intelligently displays the crossed-out price only when there’s an actual discount:

{%- 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 sticky_variant.compare_at_price > sticky_variant.price condition. This is key! It prevents a struck-through price from appearing if it’s the same as, or lower than, the actual price, which could confuse customers or even lead to consumer-law issues, as DiegoCosta2428 wisely pointed out. If your theme uses money_with_currency elsewhere, ensure you use that filter here for consistency.

3. Style It Up with CSS

To make the compare-at price look like a proper discount (smaller, grey, and crossed out), you'll need to add some CSS. You can typically find your theme’s main CSS file in assets/base.css or assets/theme.css. Add this code, also from ten12star:

.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;
}

4. Keep Prices in Sync with JavaScript

This is where the "tricky part" PreBuiltStores mentioned comes in. Your product prices can change dynamically if customers select different variants or adjust quantities. The Liquid code above only renders on page load. To keep your sticky cart updated, you need a bit of JavaScript. Add this script at the bottom of the same sticky bar snippet file you edited in step 1:

This script listens for changes in variant selection or URL parameters to ensure your sticky cart always reflects the correct pricing, including the compare-at price.

Crucial Testing and Best Practices

Once you’ve implemented the code, it’s not time to celebrate just yet! Thorough testing is paramount. As DiegoCosta2428 emphasized:

• Test on a duplicated theme first: Don't push to live until you're 100% confident.
• Test all scenarios:
  • A product/variant with no compare-at price: The strikethrough price should not appear.
  • A product/variant that is on sale: The strikethrough price should be visible and higher than the current price.
  • A product with variants: Switch between different variants to ensure the prices update correctly in the sticky bar.
  • A changed quantity: If your sticky cart displays a total price that scales with quantity, ensure the compare-at price also scales correctly.
• Match the product page: This is super important. The "was" price in your sticky bar absolutely must match what’s shown on the main product page. Mismatched prices can lead to consumer-law issues in various regions, so consistency is key for trust and legal compliance.
• Keep a note of your edits: Custom code, especially if placed in files like theme.liquid (though for this specific solution, we’re keeping it within the snippet), can sometimes be lost or conflict after a major theme update. Documenting your changes will save you headaches down the road.

The discussion also saw Ploqo provide an alternative, comprehensive solution, which was specifically tested on the Roam theme and involves placing a combined CSS and JavaScript snippet directly into theme.liquid just above the tag. His solution uses a MutationObserver to watch for price changes, offering a slightly different but equally effective approach, especially if you find it hard to pinpoint your sticky cart snippet. If ten12star’s method doesn’t quite click with your theme, Ploqo’s might be a great alternative, particularly if you’re on the Roam theme.

Remember, Shopify Support generally won’t troubleshoot custom code from forum discussions, so being careful and testing thoroughly on a duplicate theme is always your best bet. A well-implemented "compare at" price in your sticky cart can be a fantastic tool to clearly communicate value and encourage those impulse buys. Big thanks to JustinasR for asking the question and to the whole community for stepping up with such detailed and helpful responses!