Changing the sale badge on the product page > Landing page was able to change

Store Design

Topic summary

Goal: show a percentage discount (e.g., “-35%”) on the product page badge instead of the word “Sale.” The landing/collection cards already display the percentage using a Liquid snippet that calculates it from compare_at_price and price.

Context: Theme is Sense. A code snippet using card_product was shared (works on product cards); the product page needs the product object instead.

Proposed solutions:

  • Add the adapted snippet in section/main-product, inside the div with class product__info-wrapper, and replace all card_product references with product.
  • Alternatively, locate and edit the logic in price.liquid around line ~85.

Technical notes: Liquid is Shopify’s templating language. compare_at_price is the original price; price is the current sale price. The percentage is computed as (compare_at_price − price) × 100 ÷ compare_at_price, then rounded.

Status: No confirmation that the change worked yet. The discussion remains open; next steps are to implement the suggested edits and verify the badge displays “-%” on the product page.

Artifacts: The shared code snippet is central to understanding how the percentage is calculated and displayed.

Summarized with AI on February 7. AI used: gpt-5.
1

Hello, I am trying to change the sale badge on the product page from the word Sale to the actual percentage example (35%). I was able to change in the landing page, all products under sales are showing the actual percentage but for days I couldn’t find where is the code line for the product page that need to be replaced.
I am using this code:

{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%} -{{ percent }}% {%- endif -%}

Anyone knows?
Thanks

2

Which theme are you using and can you share the store link?

3

Hi,

I am using theme sense. Link: https://www.werkit.eu/

Thanks!

4

in the section/main-product you can attach your code inside div with class (product__info-wrapper) anywhere as you see fit but you have replace your card_product to product

5

You can find the code on price.liquid file around line 85.

If you need help with theme code edit, feel free to use our app to create the task. The first task is free.