Shopify Compare at Price Not Showing: Variant, Market, and Theme Fixes (2026)

Quick Fix with Thunder

Confirm the Sale Price Setup in Shopify Admin

Shopify's sale pricing documentation says the Compare-at price should contain the original price and must be higher than the current Price field. If the compare-at value is blank, equal, or lower, most themes correctly hide the strikethrough price and sale badge.

For products with variants, click into each variant. Community threads often come from merchants editing the product-level price view, then missing variant-level fields. If the red medium variant has compare-at pricing but the blue small variant does not, the storefront may hide the sale state as soon as the shopper switches options.

If variant selection also changes the wrong product state, fix the underlying selector with the variant selector guide and variant image debugging guide.

Check Markets, Catalogs, and Country-Specific Pricing

If compare-at price appears in one country but not another, inspect Shopify Markets and catalogs. Shopify's catalog documentation describes market-specific pricing and compare-at price behavior. A store can show strikethrough pricing in the primary market while a catalog in another market has different sale data.

Use View as or an incognito browser from the affected country. Confirm the product is available in that market, the price and compare-at price exist for the selected variant, and automatic currency adjustments are not making the compare-at price equal to or lower than the current price.

If Markets are also causing availability problems, compare this with the products showing sold out for some customers checklist.

Repair Theme Liquid for Product Pages and Cards

If the pricing data is correct but the storefront still hides compare-at price, inspect the theme's price snippet. Many themes use a shared price component for product pages, collection cards, search results, featured products, recommendations, and quick-add drawers. A custom edit in one snippet can remove sale pricing everywhere.

{% assign current_variant = product.selected_or_first_available_variant %}

<div class="price" data-price-wrapper>
  {% if current_variant.compare_at_price > current_variant.price %}
    <span class="price__compare">
      {{ current_variant.compare_at_price | money }}
    </span>
    <span class="price__sale">
      {{ current_variant.price | money }}
    </span>
    <span class="badge badge--sale">Sale</span>
  {% else %}
    <span class="price__regular">
      {{ current_variant.price | money }}
    </span>
  {% endif %}
</div>

For product cards, decide whether the card should show the selected/default variant price or a range. If only some variants are on sale, a broad sale badge can be misleading. The safer pattern is to show sale state only when the rendered variant has a compare-at price above price.

Large sale collections can create heavier grids because cards include badges, swatches, quick-add forms, review stars, and secondary images. Use the collection page speed guide and excessive DOM size guide if sale cards get slow.

Make Variant Price Updates Work After Selection

Liquid renders the initial price. When the shopper changes variants, JavaScript must update the price, compare-at price, sale badge, hidden variant ID, media, availability, and URL. If the price stays on the first variant, the compare-at value can appear missing even though Shopify data is correct.

function formatMoney(cents) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(cents / 100);
}

function renderVariantPrice(variant) {
  const wrapper = document.querySelector('[data-price-wrapper]');
  if (!wrapper || !variant) return;

  if (variant.compare_at_price > variant.price) {
    wrapper.innerHTML = `
      <span class="price__compare">${formatMoney(variant.compare_at_price)}</span>
      <span class="price__sale">${formatMoney(variant.price)}</span>
      <span class="badge badge--sale">Sale</span>
    `;
  } else {
    wrapper.innerHTML = `<span class="price__regular">${formatMoney(variant.price)}</span>`;
  }
}

Use the store's real money formatting if your theme exposes it. The example is intentionally simple so the logic is clear: display compare-at only when it is greater than price.

Fix Mobile CSS and Sale Badge Visibility

Sometimes compare-at price exists in the HTML but is hidden by CSS. This shows up when desktop product pages look correct but mobile collection cards miss strikethrough prices or sale badges. Inspect the element on the affected viewport and check display, visibility, overflow, line-height, card height, and theme settings for badges.

.price__compare {
  color: #6b7280;
  text-decoration: line-through;
  margin-right: 0.375rem;
}

.price__sale {
  color: #b45309;
  font-weight: 700;
}

.badge--sale {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

Avoid oversized sale badges in dense grids. They can wrap, push titles down, and create layout shifts. For mobile merchandising speed, combine this with mobile speed optimization and layout shift fixes.

Audit Imports, Pricing Apps, and Bulk Editors

If compare-at pricing disappears after a product import, marketplace sync, dropshipping sync, ERP update, or bulk editor run, check the source system before blaming the theme. Many tools overwrite Shopify's price fields on sync. Some import only the current price, some map original price to a metafield instead of compare-at price, and some clear compare-at values when a variant is updated.

Export a small sample of affected products and compare the Price and Compare-at price columns across variants. Then inspect the app or integration settings that last touched those products. If the app manages regional catalogs, sale campaigns, or automatic repricing, confirm it writes both values to Shopify and not only to its own dashboard.

This matters for performance too. Merchants sometimes add another badge app to solve a data problem. That can make collection pages slower while still leaving the underlying compare-at price wrong. Fix the data source first, then use the theme's native sale display wherever possible.

If an old merchandising app left scripts or snippets behind, clean them with the Shopify app leftovers guide before adding another sale label tool. Native theme pricing is usually faster than a storefront app that scans every product card after render.

Manual Fix vs Thunder Fix

For a storewide sale cleanup, compare Thunder pricing with custom Shopify speed optimization.

FAQ