Show discount amount on all products page

[gwacht]

I am attempting to show the percentage discounted under the price. I have been successful in adding the discount percent on each individual product page using this code:

{% if product.compare_at_price_max > product.price %}Total Savings {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: ‘.0’}}%{% endif %}

My issue is I want it to show under all products too, not just when you select the product. Is this possible? I am using the debut theme, and I placed the above code in product-template.liquid.

Thanks,

GW

[Ninthony]

You can probably use the same little snippet of code in your collection-template.liquid too, you’d just have to locate where you want it to be, which can be tricky. Find your forloop, you’ll want it in there. It will probably look like this:

{% for product in collection.products %}
// code here to output each product
{% endfor %}

[BrianAtWork]

Hi @gwacht ,

Welcome to the Shopify Community!

I understand that you want to show the percentage discounted under the price. You’ve added it to your product-template.liquid file but you also want the discount to show up elsewhere on the store, not just when you select the product.

For the Debut theme, the place to add your code is in the product-price.liquid file, located in the Snippets folder.

Before you customize your theme:

• Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Add your code just above the tag, like this:

<!-- snippet/product-price.liquid -->
{% if variant.title %}
  {%- assign compare_at_price = variant.compare_at_price -%}
  {%- assign price = variant.price -%}
  {%- assign available = variant.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-unit-price-base-unit>
          {%- if available and variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
  {% if product.compare_at_price_max > product.price %}Total Savings {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}
</dl>

Let me know if this solves your problem or if you need further help!

[gwacht]

That worked perfectly. Thanks for the help, I was struggling with this all morning!

[StellaP]

Hi there,

I have tried the solution given but something is not working properly. Could you please advice on SIMPLE theme?

Thanks

[marcos7-777]

And for Warehouse theme?

[Agora]

Please, I have the same problem, but my theme is “Suplly” could you please tell me how to you the code on it?

@BrianAtWork

Hi @gwacht ,

Welcome to the Shopify Community!

I understand that you want to show the percentage discounted under the price. You’ve added it to your product-template.liquid file but you also want the discount to show up elsewhere on the store, not just when you select the product.

For the Debut theme, the place to add your code is in the product-price.liquid file, located in the Snippets folder.

Before you customize your theme:

• Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Add your code just above the **** tag, like this:

{% if variant.title %}
  {%- assign compare_at_price = variant.compare_at_price -%}
  {%- assign price = variant.price -%}
  {%- assign available = variant.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

<dl>

  {% if section.settings.show_vendor %}
    

      <dt>
        {{ 'products.product.vendor' | t }}
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    

  {% endif %}

  
    <dt>
      {{ 'products.product.regular_price' | t }}
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          
            {{ money_price }}
          
        {% endif %}
      {% else %}
        
          {{ 'products.product.sold_out' | t }}
        
      {% endif %}
    </dd>
  

  
    <dt>
      {{ 'products.product.sale_price' | t }}
    </dt>
    <dd>
      
        {{ money_price }}
      
      {{ 'products.product.on_sale' | t }}
    </dd>
  

  
    <dt>
      {{ 'products.product.unit_price_label' | t }}
    </dt>
    <dd>
      {%- capture unit_price_separator -%}
        /{{ 'general.accessibility.unit_price_separator' | t }} 
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        
          {%- if available and variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        
      {%- endcapture -%}

      {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  

  {% if product.compare_at_price_max > product.price %}Total Savings {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}
</dl>

Let me know if this solves your problem or if you need further help!
[/quote][quote=“BrianAtWork”]
Hi @gwacht ,

Welcome to the Shopify Community!

I understand that you want to show the percentage discounted under the price. You’ve added it to your product-template.liquid file but you also want the discount to show up elsewhere on the store, not just when you select the product.

For the Debut theme, the place to add your code is in the product-price.liquid file, located in the Snippets folder.

Before you customize your theme:

• Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Add your code just above the **** tag, like this:

{% if variant.title %}
  {%- assign compare_at_price = variant.compare_at_price -%}
  {%- assign price = variant.price -%}
  {%- assign available = variant.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

<dl>

  {% if section.settings.show_vendor %}
    

      <dt>
        {{ 'products.product.vendor' | t }}
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    

  {% endif %}

  
    <dt>
      {{ 'products.product.regular_price' | t }}
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          
            {{ money_price }}
          
        {% endif %}
      {% else %}
        
          {{ 'products.product.sold_out' | t }}
        
      {% endif %}
    </dd>
  

  
    <dt>
      {{ 'products.product.sale_price' | t }}
    </dt>
    <dd>
      
        {{ money_price }}
      
      {{ 'products.product.on_sale' | t }}
    </dd>
  

  
    <dt>
      {{ 'products.product.unit_price_label' | t }}
    </dt>
    <dd>
      {%- capture unit_price_separator -%}
        /{{ 'general.accessibility.unit_price_separator' | t }} 
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        
          {%- if available and variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        
      {%- endcapture -%}

      {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  

  {% if product.compare_at_price_max > product.price %}Total Savings {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}
</dl>

Let me know if this solves your problem or if you need further help!
[/quote][quote=“BrianAtWork”]
Hi @gwacht ,

Welcome to the Shopify Community!

I understand that you want to show the percentage discounted under the price. You’ve added it to your product-template.liquid file but you also want the discount to show up elsewhere on the store, not just when you select the product.

For the Debut theme, the place to add your code is in the product-price.liquid file, located in the Snippets folder.

Before you customize your theme:

• Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Add your code just above the **** tag, like this:

{% if variant.title %}
  {%- assign compare_at_price = variant.compare_at_price -%}
  {%- assign price = variant.price -%}
  {%- assign available = variant.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

<dl>

  {% if section.settings.show_vendor %}
    

      <dt>
        {{ 'products.product.vendor' | t }}
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    

  {% endif %}

  
    <dt>
      {{ 'products.product.regular_price' | t }}
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          
            {{ money_price }}
          
        {% endif %}
      {% else %}
        
          {{ 'products.product.sold_out' | t }}
        
      {% endif %}
    </dd>
  

  
    <dt>
      {{ 'products.product.sale_price' | t }}
    </dt>
    <dd>
      
        {{ money_price }}
      
      {{ 'products.product.on_sale' | t }}
    </dd>
  

  
    <dt>
      {{ 'products.product.unit_price_label' | t }}
    </dt>
    <dd>
      {%- capture unit_price_separator -%}
        /{{ 'general.accessibility.unit_price_separator' | t }} 
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        
          {%- if available and variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        
      {%- endcapture -%}

      {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  

  {% if product.compare_at_price_max > product.price %}Total Savings {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}
</dl>

Let me know if this solves your problem or if you need further help!

[foraZenlife]

Hi guys, I tried to post before but I think it somehow got marked as spam.

I have added the following code to my product template in order to show a "You Save xx % ($xx.00) message. It seems though that if you switch product variants it does not auto-update, unless you refresh the page. How can I make it re-calculate automatically, when switching variants ?

Thanks for your help in advance,

 {% if product.compare_at_price_max > product.price %}You save {{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | truncate: 5, "" }}%{% endif %}
 
{% if product.compare_at_price_max > product.price %} ({{ current_variant.compare_at_price | minus: current_variant.price | money }}){% endif %}

[Ninthony]

There’s likely a javascript function that fires every time a variant is switched. You’ll have to hunt that down in one of your js files and alter it to update that field. In older theme’s it’s called selectCallback usually. Or go into your js file and look for “if (variant)” or “if (!variant)” – likely will be inside the callback function.

[lestergalvis]

Regards.
How can I insert the same code to my store with the theme: Jewelias-1.0.0, https://arcosmecenter.com/

Thanks in advance

[EitanF]

Hi, thanks so much for this solution. I just tried it and although I copied the code you gave and the compare at price comes out, the discount comes out as “you save 0%” (in Spanish 'Te ahorras 0%).

I’m using the Debut theme and the code I put was:

{% if product.compare_at_price_max > product.price %}You save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: ‘.0’}}%{% endif %}

Here’s a photo of the product page:

Should I change something on the code, so that the 10% discount (which is the difference between the price and the compare at price) appears?

Thank you very much,

Eitan

www.tindleer.com

[Ninthony]

Strange, that code should work. I literally just copied and pasted it into one of my developer themes and the discount percentage comes up. Would you mind if I requested access to your themes and took a look?

[stylesbyalexis]

can you help me with this code

[Dixravi]

Heym @BrianAtWork !

I’ve tried your method and I would not say that it did not work for me but not like the same way I was expecting.

See this screenshot: https://prnt.sc/wmaey6

I want something like this https://prnt.sc/wmafae

I am using the Debut theme in my store. Please help me out to create this kind of discount %.

Thanks in Advance

Ravi Dixit

[alvinkonda]

It seems the code provided it’s not working with multiple currencies.

I have simplified the code and it seems the following works fine.

{% if product.compare_at_price > product.price and product.available %}
{{ product.compare_at_price
    | minus: product.price
    | times: 100.0
    | divided_by: product.compare_at_price
    | round
    | prepend: '-'
    | append: '%' }}
{% endif %}

[WX99]

Can i change the colour for the “Total Save %”?

If can please let me know what code should i added.

Thank so much

[ThatGuy_nemo]

Hi there, I used the code provided and it worked great on my debut theme, except for the fact that the “price & sale” was duplicated under the original price. How do I remove the duplicate price and sale?

[Furrociousfurr]

Hi,

I have the impulse theme. Can you please advise how to do this on the impulse theme? There is not a section in the snippets for

product-price.liquid.

Thank you

[Wadmin]

Hello @BrianAtWork

I don’t know where to add your suggested codes in my Shopify product.price.liquid file.

My product.price.liquid codes are here …

{%- if variant.compare_at_price > variant.price -%} {{ 'products.general.regular_price' | t }} {{ variant.compare_at_price | money }} {{ 'products.general.sale_price' | t }} {%- else -%} {{ 'products.general.regular_price' | t }} {{ 'products.general.sale_price' | t }}

<span id=“ProductPrice”
class=“product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}”
itemprop=“price”
content=“{{ variant.price | divided_by: 100.00 }}”
{% unless variant.available %}aria-hidden=“true”{% endunless %}>
{{ variant.price | money }}

{%- capture unit_price_separator -%} / {{ 'general.accessibility.unit_price_separator' | t }}  {%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}

{%- endcapture -%}

{{ ‘products.general.unit_price’ | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

Can u help me

My website url is " https://yangoods.com/ "

[SevSolutions]

Hey @gwacht — what you’re trying to do is totally possible, but with the Debut theme, you’d typically need to modify multiple template files to make that discount percentage show across all product listings (like on collection or homepage grids). That usually involves editing product-card-grid.liquid or similar files depending on your theme structure.

If you’d prefer to avoid editing code altogether, you can achieve the same result using Klip Coupons: Sales and Discounts. Klip lets you display a visual, clippable discount on product pages, collection pages, and the cart, including the discount percentage or amount saved—no coding required.

It’s a good option if you want the discount to be clearly visible across your store without customizing multiple theme files.