Troubleshooting Shopify's Compare-At Price: Why Your Sale Prices Aren't Showing Up

Hey there, fellow store owners! Ever scratched your head wondering why those enticing "compare-at" prices – you know, the original price crossed out next to your sale price – just aren't showing up on your Shopify store? You're not alone. This is a surprisingly common snag, and it popped up recently in the Shopify Community forums, giving us a fantastic opportunity to dive into the issue and share some solid solutions.

Our friend @saintdripitaly (the original poster in this thread) ran into this exact problem with their custom Xclusive 3.2.0 theme. They were sure the Liquid code in main-product.liquid was correct, the compare-at price was set to €420.00 for all variants, and the .old-price CSS rule was present in theme-xclusive.css. Sounds like everything should be working, right? But it wasn't.

This is where the collective wisdom of the community really shines. What started as a code-focused troubleshooting mission quickly revealed a more fundamental, and often overlooked, first step.

First Things First: Is the Compare-At Price Actually Saved?

Before you dive deep into theme code, CSS, or JavaScript, always, always, ALWAYS confirm that the compare-at price is actually saved correctly in your product data. This was the critical insight shared by @ajaycodewiz. After inspecting saintdripitaly's live store, they found that the product data actually showed "compare_at_price": null. Ouch! No matter how perfect your theme code is, if the data isn't there, nothing will display.

It's an easy mistake to make, especially when you're managing a lot of products or importing data. The good news is, fixing it is straightforward!

How to Set Compare-At Prices Correctly in Shopify (Bulk Edit Method)

Here's how you can quickly verify and set your compare-at prices for multiple products or variants, as outlined by @ajaycodewiz:

1. Go to Products: From your Shopify admin, navigate to Products.
2. Select Products: Tick the checkboxes next to all the products you want to edit.
3. Initiate Bulk Edit: Click the "Bulk edit" button.
4. Add Compare-at Price Column: In the bulk editor, click "Columns", search for "compare", and then tick "Compare-at price". This will add the column to your bulk editor view.
   
   
5. Enter Prices: In the newly added "Compare-at price" column, enter the original, higher price. Remember, this price needs to be higher than the actual selling price for it to display. If it's equal or lower, Shopify won't show it.
   
6. Save: Click "Save".

Pro Tip: Compare-at prices are set at the variant level. If your product has multiple sizes (e.g., 36 to 46), each size (variant) needs its own compare-at price. The bulk editor makes this super easy by filling them all in one go.

Still Not Showing? Time to Dig into Your Theme Code

If you've confirmed your compare-at prices are correctly saved in the product data and are higher than the current selling price, but they're still not appearing, then it's definitely a theme-related issue. This is especially true for custom themes like @saintdripitaly's Xclusive 3.2.0.

Here are the key areas the community experts (@devcoders, @WebsiteDeveloper, and @Steve_TopNewYork) recommended checking:

1. Verify Liquid Logic in Price Snippets

Many themes use separate Liquid snippets (like price.liquid or product-price.liquid) to render prices across different parts of your store. Even if your main product file (e.g., main-product.liquid) references these, the actual logic for displaying the compare-at price lives within those snippets. You need to ensure they contain the necessary conditional logic.

Look for something similar to this (as shared by @WebsiteDeveloper):

{% assign current_variant = product.selected_or_first_available_variant %}

{% if current_variant.compare_at_price > current_variant.price %}
  
    {{ current_variant.compare_at_price | money }}
  
{% endif %}


  {{ current_variant.price | money }}

This snippet explicitly checks if compare_at_price is greater than price before rendering the element. If this logic is missing or modified, your compare-at price won't show.

2. Inspect with Browser Developer Tools (CSS & HTML)

This is your best friend for front-end debugging. Right-click on your product page and select "Inspect" (or "Inspect Element").

• Check HTML: Does an element with the .old-price class (or similar, depending on your theme's structure) actually exist in the HTML? If it doesn't, the Liquid code isn't rendering it at all.
• Check CSS: If the HTML element does exist but isn't visible, it's likely being hidden by CSS. Look for properties like display: none;, visibility: hidden;, opacity: 0;, or even a conflicting color property making it blend into the background. Your theme-xclusive.css might have the rule, but another rule could be overriding it.

3. JavaScript Overrides, Especially for Variant Changes

Custom themes often use JavaScript to dynamically update prices when a customer selects a different product variant (e.g., a different size or color). It's possible this JavaScript is only updating the current selling price and not the compare-at price. @WebsiteDeveloper suggested testing this: "Change variant in the product page. If the struck-out price initially appears but disappears after selection, the theme's JavaScript is updating only the normal price." If this is the case, your theme's JavaScript needs to be updated to handle both price values.

4. Theme Settings & Custom Implementations

Since Xclusive 3.2.0 is a custom, manually uploaded theme, it might have unique settings or a completely custom pricing implementation. @devcoders and @Steve_TopNewYork both highlighted this. Double-check your theme's customization options for any specific settings related to price display. If it's a heavily customized theme, you might need to consult with the developer who built it or be prepared to modify the custom price components yourself.

Ultimately, getting your compare-at prices to show involves a two-pronged approach: first, ensure your data is impeccable in the Shopify admin, and second, confirm your theme's Liquid, CSS, and JavaScript are all playing nicely together to display that data. It's a journey from the backend data all the way to the frontend rendering, but by systematically checking these points, you'll get those sale prices front and center, helping your customers see the great deals you offer on your Shopify store.