How to fix a liquid error on a sale product page?

Technical Q&A

Topic summary

Main issue: A Liquid (Shopify templating) error appears on sale product cards due to the discount percentage code in snippets/card-product.liquid (around line 133).

What was tried:

  • Original line calculates % OFF: (compare_at_price − price) / compare_at_price × 100.
  • Suggested fix added a guard: if compare_at_price > 0 then compute, else show 0% OFF. This removed the error but displayed 0% OFF.
  • Alternate snippet used product instead of product_card_product and omitted the else text. This rendered “30% OFF,” but the percentage was incorrect for the actual prices.

Additional requests:

  • Center the product title (CSS/layout request); no provided solution yet.
  • Another user reported the same issue in product-price.liquid using product.variants[0] for compare_at_price and price, asking what to replace it with.

Key factors noted:

  • Correct object/variable context (product vs product_card_product vs variant) likely affects accuracy.
  • Guarding against zero or missing compare_at_price avoids Liquid errors.

Status:

  • Liquid error resolved; discount calculation accuracy and title centering remain unresolved. No final code solution shared for variant-based pricing. Images were shared, but the code snippets are central to the discussion.
Summarized with AI on December 25. AI used: gpt-5.
1

Hi all,

I have this Error on my products which are on sale. I couldnt find the error. Actually I dont know where to find and correct it. Could you please help me?

error.png
error.png604×346 82.6 KB

2

can you please share your site link and if you can give access of your site i will fix it for you

3

Go to Online Store → Themes → Edit code. Look for snippets and find card-product.liquid

On the line 133 something is not quite right. Would you mind sending here lines 130-135?

4

{{ product_card_product.compare_at_price | minus: product_card_product.price | times: 100 | divided_by: product_card_product.compare_at_price }}% OFF

5

replace with this code

{% if product_card_product.compare_at_price > 0 %} {{ product_card_product.compare_at_price | minus: product_card_product.price | times: 100 | divided_by: product_card_product.compare_at_price }}% OFF {% else %} 0% OFF {% endif %}

6

Okay it worked but now there is 0% off…

off.png
off.png1340×788 207 KB

7 
{% if product.compare_at_price > 0 %} {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% OFF {% else %} {% endif %}

I am guessing this is what you need.

8

Now it looks like this: but its actually not 30%… :grinning_face_with_smiling_eyes:

%.png
%.png1772×802 317 KB

9

Maybe you can help me also with this: I tried everything but its not wirking.. :grinning_face_with_smiling_eyes: just want to center the title… Thanks in advance

Titel.png
Titel.png1880×1270 239 KB

10

Hi. I have same problem with coding of product-price.liquid. Would you be able to advise me the correct using I should replace that line with? Currently I have

-{{ product.variants[0].compare_at_price | minus:product.variants[0].price | times:100 | divided_by:product.variants[0].compare_at_price }}%