How to add discount % amount next to price and compare price on product page?

How to add discount % amount next to price and compare price on product page?

RAL1017
New Member
8 0 0

Hi,

 

I have a price which is lower than the compare at price on my product page - which shows the new price in red which is lower than the original price - but i need a badge that says "20% off" (or whatever the calculated discount is). next to it to show the actual discount % to customers.  I don't see an option for this in my theme (Wokee). Does anyone have a workaround or know how to customize this?  

 

thanks in advance. 

 

price and compare.png

Replies 8 (8)

Artzen_tech
Shopify Partner
536 107 108

Hello @RAL1017 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Snippets folder -> price.liquid file

Add this Code below price__sale div.

Artzen_tech_0-1696246254092.png

 

 

 

<div class="custom-price badge color-accent-2">
      {% if product.compare_at_price_max > product.price %}
        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 %}
    </div>

 

 


Below is the result of the same code.

Artzen_tech_0-1696245475677.png



Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
RAL1017
New Member
8 0 0

Here's the correct image 

Screenshot 2023-10-02 at 7.24.39 PM.png

RAL1017
New Member
8 0 0

Hi there,

Thanks for the reply... the location wasn't the same where you mentioned it
(snippets, price.liquid) - instead it was under Snippets >
product_page_1_description.liquid

But i found the code section anyway...


{%- if sale_on -%}
{{
product.selected_or_first_available_variant.price | money }}

{{
product.selected_or_first_available_variant.compare_at_price | money
}}

{%- else -%}
{{
product.selected_or_first_available_variant.price | money }}


{%- endif -%}



And i copied your code below that:

{% if
product.compare_at_price_max > product.price %} 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 %}



However, when I did that - i got this:

[image: Screenshot 2023-10-02 at 7.24.39 PM.png]

So looks like the math doesn't work, as well as formatting etc... Needs a
space between "Save" and the discount... and of course the correct discount
%. And also, if I could get the discount to show up

But its close! If you can help me sort out how to do the actual discount
% that would be great!!!!!


thanks!
Ryan

RAL1017
New Member
8 0 0

I put the correct <div> tags in there as well.. they didn't show up for some reason..

 

here's the code that I copied yours below:

 

Screenshot 2023-10-02 at 7.49.20 PM.png

RAL1017
New Member
8 0 0
Hi there,

Thanks for the reply... the location wasn't the same where you mentioned it
(snippets, price.liquid) - instead it was under Snippets >
product_page_1_description.liquid

But i found the code section anyway...


{%- if sale_on -%}
{{
product.selected_or_first_available_variant.price | money }}

{{
product.selected_or_first_available_variant.compare_at_price | money
}}

{%- else -%}
{{
product.selected_or_first_available_variant.price | money }}


{%- endif -%}


And i copied your code below that:

{% if
product.compare_at_price_max > product.price %} 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 %}


However, when I did that - i got this:

[image: Screenshot 2023-10-02 at 7.24.39 PM.png]

So looks like the math doesn't work, as well as formatting etc... Needs a
space between "Save" and the discount... and of course the correct discount
%. And also, if I could get the discount to show up

But its close! If you can help me sort out how to do the actual discount
% that would be great!!!!!


thanks!
Ryan
Artzen_tech
Shopify Partner
536 107 108

May I see the actual screenshot of how it looks now plus frontend url so that I can guide you more accurately.

You can also try below code.

{% if product.compare_at_price_max > product.price %}
  Save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | times: 100 | remove: '.0' }}%
{% endif %}
If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
RAL1017
New Member
8 0 0

I sent the screenshot of how the other code looked - scroll above and see, but the first one you sent resulted in this:

 

Screenshot 2023-10-02 at 7.24.39 PM.png

 

The code that you said to try in this recent email resulted in this:

Screenshot 2023-10-03 at 5.31.39 PM.png

 

so that didn't work either...

 

I removed both of those, as this is my live site and i can't have that in there..

 

here's the URL of the page:  

https://aquatic-dreams.com/products/aquatic-dreams-saltwater-new

 

thanks, let me know!

RAL1017
New Member
8 0 0

So the equation for % change is- compare price - current price / compare price x 100..   i think you have extra “times 100” in the code

 

i dont know what the “max” means on the end of the compare price..    but i noticed the formula above seemed to have that extra x100 in there.   

so 139-109 = 30 / 139  =.2158 x 100 = 21.58 % 

 

just need the correct code to do that…

 

thanks let me know please!