How can i add Discount % in Tinker Theme

Ask & Offer
1

Can someone help me with all the steps to add Discount % in tinker theme

2

Hi @LittleGattu ,
Sure! You can show the discount percentage in the Tinker theme by adding a small Liquid snippet to your product or collection templates. Here’s how to do it step-by-step:

1. Go to Online Store → Edit Code
Open your product-card.liquid, product-grid-item.liquid, or similar file inside Sections or Snippets (where product prices are shown).

2. Find the price area
Look for something like:

{{ product.price | money }}

or

{{ product.compare_at_price | money }}

3. Add this code below it:

{% if product.compare_at_price > product.price %}
  {% assign discount = 100 | times: product.price | divided_by: product.compare_at_price %}
  {% assign discount = 100 | minus: discount %}
  <span class="discount-percent">Save {{ discount | round }}%</span>
{% endif %}

4. (Optional) Style it with CSS:

.discount-percent {
  color: #e60023;
  font-weight: 600;
  margin-left: 5px;
}

5. Save and check your product cards or pages.

This will automatically show a “Save XX%” badge whenever a product has a sale price lower than the compare-at price.

3

Hi @oscprofessional

Not able to find the following items in the snippets

{{ product.price | money }}

{{ product.compare_at_price | money }}

Can you please help with any other solution