Why Isn't My Shopify Compare-At Price Showing? A Developer's Guide to Troubleshooting Discounts

As a Shopify migration expert at Shopping Cart Mover, we often see merchants leverage the powerful features of the Shopify platform to drive sales. One of the most effective visual cues for enticing customers is the 'compare-at price' – that striking original price crossed out next to a lower, current selling price. It instantly communicates a deal, creating urgency and value. But what happens when this crucial element simply refuses to show up on your product pages? It's a common frustration, and it was recently highlighted in a Shopify Community forum thread, providing a perfect opportunity to dissect the problem and offer comprehensive solutions.

The original poster, @saintdripitaly, was grappling with this exact issue on their custom Xclusive 3.2.0 theme. Despite confirming what they believed to be correct Liquid code in main-product.liquid, a set compare-at price of €420.00 for all variants, and the presence of the .old-price CSS rule, the discount simply wasn't appearing. This scenario is a classic example of how a seemingly complex code issue can often stem from a simpler, more fundamental oversight.

The #1 Culprit: Missing or Incorrect Product Data

Before you even think about diving into theme code or CSS, the very first place to check is your product data. This was the critical insight shared by @ajaycodewiz in the forum thread. After inspecting the live store, it was discovered that the product data actually showed "compare_at_price": null. This is a crucial point: no matter how perfectly your theme's Liquid code is written to display a compare-at price, if the data isn't actually saved in Shopify, nothing will appear.

This oversight is surprisingly common, especially when dealing with bulk product imports, manual data entry for many variants, or after a store migration. The good news is that fixing it is straightforward!

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

Ensuring your compare-at prices are correctly saved is the foundational step. Here’s how you can quickly and efficiently update them using Shopify's built-in bulk editor:

1. Navigate to Products: From your Shopify admin, go to Products > All 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 that appears above the product list.
4. Add 'Compare-at price' Column: In the bulk editor, click "Columns", then search for and tick "Compare-at price". This will add a new column to your editor.
5. Enter Prices: For each product variant, enter the original, higher price into the "Compare-at price" column. Then, ensure the "Price" column contains the lower, current selling price.
6. Save Changes: Click "Save" to apply all your updates.

Important Notes for Data Entry:

• Variant-Specific: Remember that compare-at prices live on the variant, not the product. If your product has multiple sizes or colors, each variant needs its own compare-at price value. The bulk editor makes this easy by allowing you to fill them all at once.
• The Golden Rule: The compare-at price must be higher than the actual selling price. If it's equal to or lower than the selling price, Shopify's default logic (and most theme logic) will not render anything at all, as there's no actual discount to display.

Beyond Data: Troubleshooting Theme & Code When Prices Are Set

If you've confirmed that your compare-at prices are correctly saved in the Shopify admin and still aren't showing, it's time to dig into your theme's code, CSS, and JavaScript. This is especially true for custom themes like the Xclusive 3.2.0 mentioned in the thread, which might have unique implementations.

1. Check Theme Settings and Customizations

Many themes, especially premium or custom ones, include specific settings in the Theme Editor (Customize) to enable or disable the display of compare-at prices or sale badges. Navigate to your theme customization options and look for settings related to product prices, sale indicators, or product page layouts. A simple toggle might be all you need.

2. Liquid Code Inspection: Is Your Theme Rendering It?

Shopify themes use Liquid, a templating language, to dynamically display content. The compare-at price needs specific Liquid logic to be rendered. Here’s what to look for:

• Locate Price Snippets: Product prices are often handled by dedicated snippets. Common file names include price.liquid, product-price.liquid, or even directly within main-product.liquid or product-template.liquid. Search your theme files for phrases like render 'price', compare_at_price, or old-price.
• Verify the Conditional Logic: The core logic for displaying a compare-at price typically looks something like this:

  {% 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 }}
  

  Ensure this if condition is present and correctly structured within the snippet responsible for rendering your product prices. If it's missing or modified, the compare-at price won't be generated in the HTML.

• Overriding Snippets/JavaScript: Sometimes, another snippet or JavaScript might be overriding the default price display, or a custom component might have removed the compare-at price output. Inspecting the rendered HTML (next step) will help confirm if the Liquid is even generating the element.

3. CSS Troubleshooting: Is It There But Hidden?

If the Liquid code is correct and the data is present, the compare-at price element might be generated in the HTML but hidden by CSS. This is where your browser's Developer Tools (usually F12) become invaluable:

• Inspect the Element: Right-click on where the compare-at price should be on your product page and select "Inspect" or "Inspect Element."
• Look for .old-price: Search the HTML for elements with classes like .old-price, .compare-at-price, or similar. If you find it, but it's not visible on the page, check the "Styles" tab in the Developer Tools for CSS rules like display: none;, visibility: hidden;, opacity: 0;, or a very small font size/color that blends in.
• Conflicting CSS: Custom themes can have complex stylesheets. A rule in theme-xclusive.css might be overridden by a more specific rule elsewhere.

4. JavaScript Interactions: Dynamic Price Updates

Modern Shopify themes often use JavaScript to dynamically update product prices when a customer selects a different variant (e.g., size or color). If your compare-at price appears initially but disappears or doesn't update after selecting a variant, your theme's JavaScript might only be updating the current selling price and not the compare-at price. This requires a deeper dive into your theme's JavaScript files (often found in the assets folder, e.g., theme.js, product-form.js) to ensure both price elements are updated on variant change.

When Custom Themes and Migrations Come into Play

The original thread highlighted that the merchant was using a custom, manually uploaded theme (Xclusive 3.2.0). This adds another layer of complexity. Custom themes, by their nature, can deviate significantly from standard Shopify theme structures. If you're encountering persistent issues with a custom theme, or if you've recently undergone a store migration to Shopify and are facing these kinds of display problems, it's often beneficial to consult with a Shopify development expert. They can quickly pinpoint custom code modifications that might be interfering with expected Shopify functionalities.

Whether you're just starting your e-commerce journey and looking to build your first Shopify store or are a seasoned merchant, ensuring your pricing displays correctly is paramount to converting visitors into customers. Don't let a hidden compare-at price cost you sales!

Final Thoughts

Troubleshooting why your Shopify compare-at price isn't showing can range from a simple data entry error to complex theme code conflicts. Always start with the basics: verify your product data. If that's correct, systematically work through your theme's settings, Liquid code, CSS, and finally, JavaScript. With a methodical approach, you'll have those enticing discounts proudly displayed and boosting your conversions in no time.