Adding % off amount on Product Page next to Price

Shopify Discussion
1

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.

2

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-1696246620386.png
Artzen_tech_0-1696246620386.png400×206 35.7 KB

<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>

Copy

Below is the result of the same code.

Artzen_tech_1-1696246620738.png
Artzen_tech_1-1696246620738.png399×143 40.6 KB

Let me know if need further assistance
Regards,
Artzen Technologies