Unlock Your Discounts: How to Consistently Show 'Compare At' Prices in Your Shopify Cart & Checkout

Hey everyone! It's great to connect with you all, especially when we're diving into questions that directly impact your store's sales and customer experience. Recently, a question popped up in the Shopify Community from @Hafsah134 that really resonated with me, because it's something many store owners grapple with: getting those crucial 'compare at' prices to show up consistently in the cart and checkout.

Hafsah134's situation perfectly highlights a common challenge. She noticed that when an item was first added to the cart, both the original price and the 'compare at' price (the discounted price) would show up. Awesome, right? That's exactly what you want! But then, for some reason, as you moved further into the cart or checkout process, the 'compare at' price would vanish, leaving only the current selling price. This is a huge missed opportunity to show your customers the value they're getting and the savings they're making.

Let's face it, seeing that strikethrough price next to the lower price is a powerful psychological trigger. It screams "SALE!" and "GOOD DEAL!" When it disappears, your customers might wonder if the discount is still valid, or simply not feel the urgency to complete their purchase. It's a small detail that can have a big impact on your conversion rates.

Understanding Why 'Compare At' Prices Might Disappear

So, why does this happen? Well, Shopify themes are complex, and different sections of your store (product pages, cart pages, and the checkout itself) often use different Liquid files and styling rules to display information. What works perfectly on a product page might not be explicitly coded for the cart, or the cart's code might be overridden by other scripts or theme settings.

For Hafsah134, the issue was specifically about the cart and checkout. While the cart page is part of your theme and can be customized with Liquid, the actual checkout page (after you click "Proceed to Checkout") is a more locked-down environment. Shopify intentionally limits customization there for security and consistency, which means direct Liquid code edits are generally not possible unless you're on Shopify Plus.

However, the good news is that if the 'compare at' price is correctly set for your product variants, and your cart page is configured to display it, it usually *should* carry through to the checkout summary. If it's not, it often points back to how your theme handles the pricing display in the cart itself, or potentially a CSS rule on the checkout side that's hiding it.

Here are the images Hafsah134 shared, illustrating the problem:

Fixing 'Compare At' Prices in Your Shopify Cart (Step-by-Step)

Since the thread didn't provide a direct code solution (often the first step in the community is asking for a store URL to diagnose, as @devcoders and @Mustafa_Ali did), I'll walk you through the most common way to fix this on your cart page. Remember, always back up your theme before making any code changes!

1. Back Up Your Theme

• From your Shopify admin, go to Online Store > Themes.
• Find your current theme, click Actions > Duplicate. This creates a safe copy you can revert to if anything goes wrong.

2. Edit Your Theme Code

• Still in Online Store > Themes, click Actions > Edit code for your current theme.

3. Locate the Cart Template File

• In the file editor, look for files related to your cart. Common names include:
• sections/main-cart-items.liquid
• sections/cart-items.liquid
• templates/cart.liquid
• snippets/cart-item.liquid
• The exact file depends on your theme. You're looking for where individual cart item details (like price) are rendered. You might need to search for "price" or "{{ item.price }}" within these files.

4. Add the 'Compare At' Price Logic

• Once you've found the relevant section (it's usually within a for item in cart.items loop), you'll likely see code that displays the current price. It might look something like {{ item.price | money }}.
• You need to add a conditional statement to check if a 'compare at' price exists for the item and, if so, display it alongside the current price. Here's a common snippet you can adapt:

{% if item.original_price != item.price %}
  {{ item.original_price | money }}
  {{ item.price | money }}
{% else %}
  {{ item.price | money }}
{% endif %}

• Explanation:
  • {% if item.original_price != item.price %}: This checks if the original price (which is your 'compare at' price if set) is different from the current selling price. If they're different, it means there's a discount.
  • {{ item.original_price | money }}: This displays the 'compare at' price with a strikethrough ( tag).
  • {{ item.price | money }}: This displays the actual selling price. I've added a class here so you can style it later if you wish (e.g., make it bold or red).
  • {% else %}: If there's no discount (original price equals current price), it just shows the current price normally.

5. Save and Test

• Click Save.
• Go to your online store, add a discounted product to your cart, and check if both prices are now displaying correctly.

What About the Checkout Page?

As I mentioned, the checkout page itself is highly restricted. You can't directly edit its Liquid files like you can your cart page. However, if you've fixed the cart page to correctly display both prices, the checkout summary (which pulls information from your cart) often follows suit.

If the 'compare at' price is *still* not appearing in the checkout summary after you've fixed your cart, here are a couple of things to consider:

• Theme Settings: Some themes offer limited customization options for the checkout appearance within the Theme Editor (Online Store > Themes > Customize > Theme settings > Checkout). Check if there are any options related to price display there.
• Shopify Scripts (Shopify Plus): If you're on Shopify Plus, you have access to Shopify Scripts, which can modify pricing logic at checkout. But for most store owners, this isn't an option.
• Custom CSS (Limited): While you can't edit the checkout HTML, some themes allow for custom CSS on the checkout page. If the compare-at price is technically there but hidden by some CSS, a developer might be able to reveal it using custom CSS, but this is less common for basic price display.

In most cases, ensuring your product variants have the 'compare at' price correctly entered in the product admin and then correctly displaying it on your cart page is 90% of the battle. The checkout typically respects these settings. If it doesn't, it might be a specific quirk of your theme, and reaching out to your theme developer for support would be the next best step.

It's always a good idea to make sure your pricing is crystal clear to your customers, especially when you're offering a great deal. Hopefully, these steps help you get those compare-at prices shining brightly, just like Hafsah134 wanted!