How can i add Discount % in Tinker Theme

Ask & Offer

Topic summary

A user seeks help adding a discount percentage display to the Tinker Shopify theme.

Initial Solution Provided:

  • Navigate to Online Store → Edit Code
  • Locate product-card.liquid or product-grid-item.liquid in Sections/Snippets
  • Find the price display code ({{ product.price | money }})
  • Insert a Liquid snippet that calculates and displays the discount percentage when compare_at_price exceeds current price
  • Optionally add CSS styling for the discount badge

Current Issue:
The user cannot locate the specified price code snippets ({{ product.price | money }} or {{ product.compare_at_price | money }}) in their theme files and has requested an alternative solution.

Status: Unresolved - awaiting further guidance on locating the correct template files or an alternative implementation method for the Tinker theme.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
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