Shopify crossed-out price is wrong? Compare prices on the same variant

[vistabylara-dev]

قد يظهر سعر مشطوب غير صحيح عند مقارنة قيم من متغيرات مختلفة للمنتج. استخدم السعر وسعر المقارنة للمتغير نفسه، ثم اختبر تبديل المقاسات والألوان.

Free Shopify code series · 19/50 · Reviewed 24 October 2026

Why this happens

A product has different prices for different sizes, but the displayed comparison looks wrong. Compare the chosen variant's price with that same variant's compare-at price. This example provides the initial server-rendered display; it does not replace your theme's variant-change logic.

Before changing your store

Duplicate your theme and work in its unpublished preview. Save the original files. This is suggested code for a specific situation, not a guaranteed repair for every theme. Never paste PHP into Shopify Liquid files.

Where to put the code

Create snippets/vbl-variant-price.liquid in a duplicate theme. Merge the vbl_price object below into the existing root object of locales/en.default.json; preserve every existing translation key and valid commas. Add translations under the same keys in each active language file. Then use the call inside your product section for an initial-render preview. Do not paste a second JSON root object into an existing file.

snippets/vbl-variant-price.liquid

{% doc %}
  Displays prices for one supplied variant.
  @param {variant} item - Variant to display
{% enddoc %}
{% if item != blank %}
  <dl class="vbl-variant-price">
    <dt>{{ 'vbl_price.current' | t }}</dt>
    <dd>{{ item.price | money_with_currency }}</dd>
    {% if item.compare_at_price > item.price %}
      <dt>{{ 'vbl_price.previous' | t }}</dt>
      <dd><s>{{ item.compare_at_price | money_with_currency }}</s></dd>
    {% endif %}
  </dl>
{% endif %}

Translation object to merge, not a replacement for your existing locale file:

{
  "vbl_price": {
    "current": "Current price",
    "previous": "Compare-at price"
  }
}

Call from the product-template section:

{% assign price_variant = product.selected_or_first_available_variant %}
{% render 'vbl-variant-price', item: price_variant %}

What this example does not cover

The fragment does not update itself when a customer changes a variant without reloading. A developer must integrate it with the theme's existing variant update/render mechanism before it replaces live pricing. Retain existing selling-plan, unit-price, volume-pricing, tax and availability behavior. A compare-at price is not the same as an automatic checkout discount.

Preview checks before publishing

In preview, use variants with a higher, equal, lower and blank compare-at price. Only the higher value should be crossed out. Check a direct variant URL, then change variants using the picker: a stale display means integration is unfinished. Check currency/language switching, sale and non-sale variants, and applicable subscription or quantity pricing. Verify the displayed price against the selected variant before publishing.

Validation: The snippet and call passed Shopify's Liquid validation tool, and the example locale JSON passed validation. No live merchant theme was edited. Visual appearance, integration with your theme and conversion impact have not been tested.

Rollback

Remove the example render call, restore any original markup you replaced, and return to the saved theme version if necessary. Keep the live theme unchanged until preview checks pass. Remove the added snippet only after removing its callers. Remove only the translation keys added for this example if they are no longer used.

Need help applying this to your own store?

If this matches your issue, send Dr Lara your store URL, theme name, affected page and what changed before the problem appeared. Start with free guidance and a free initial consultation. If you want implementation, we agree the scope and fee separately before work begins.

Explore Shopify theme repairs and development with Vista by Lara

WhatsApp Dr Lara about this issue or call +971 50 799 4292.

Free guidance. No commitment. Practical implementation is separately scoped.

Join the free code discussion

Comment with a short, sanitized example and the expected result. Remove access tokens, passwords, customer data and private admin links. Following this series does not require buying a service.

• Free Shopify help hub
• Follow Dr Lara on GitHub
• Join our LinkedIn group
• Vista by Lara website

Official references

• Shopify documentation 1
• Shopify documentation 2

Dr Lara · Vista by Lara · Dubai, UAE