Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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:
Add your code just above the </dl> 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!
Brian | Shopify Partner | Ecommerce Consultant
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Need further assistance? Visit www.BrianAtWork.com
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 %}
This is an accepted solution.
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:
Add your code just above the </dl> 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!
Brian | Shopify Partner | Ecommerce Consultant
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Need further assistance? Visit www.BrianAtWork.com
That worked perfectly. Thanks for the help, I was struggling with this all morning!
Hi there,
I have tried the solution given but something is not working properly. Could you please advice on SIMPLE theme?
Thanks 🙂
Please, I have the same problem, but my theme is "Suplly" could you please tell me how to you the code on it?
@BrianAtWork wrote: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 </dl> 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!
@BrianAtWork wrote: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 </dl> 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!
@BrianAtWork wrote: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 </dl> 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!
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 %}
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.
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?
Regards.
How can I insert the same code to my store with the theme: Jewelias-1.0.0, https://arcosmecenter.com/
Thanks in advance
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
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?
can you help me with this code
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
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 %}
Can i change the colour for the "Total Save %"?
If can please let me know what code should i added.
Thank so much
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 ....
<div class="price-container{% if variant.available and variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
{%- if variant.compare_at_price > variant.price -%}
<span id="PriceA11y" class="visually-hidden" {% unless variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
<span class="bold-compare-at-money" data-product-id="{{ product.id }}">{{ variant.compare_at_price | money }}</span>
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span id="PriceA11y" class="visually-hidden" {% unless variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
<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 %}>
<span class="money" data-product-id="{{ product.id }}">{{ variant.price | money }}</span>
</span>
<div class="product-single__unit">
{%- 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 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 -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>
Can u help me
My website url is " https://yangoods.com/ "
And for Warehouse theme?
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024