Show percentage discount next to price

[INKLY]

Hi I am trying to show on my product page next to the price a label that shows how much the client is saving when purchasing.

For this I use a code that has worked previously on another theme I was working on. However this time for some reason it doesn’t render, when I load the page I can see it pop-up for 0,5sec and then dissapears. I don’t know why. Does anyone know how to fix this? Thank you for your help!

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=163175923977

The code I use : (Worked well on another theme, Works because it pops-up when loading the page, but then dissapears)

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

[Dan-From-Ryviu]

Hi @INKLY

You can follow instructions in this article to do that for your theme

https://buymeacoffee.com/dandong910/change-sale-badge-text-percentage-discount-shopify-free-themes

[INKLY]

Hi Dan,

Thank you for your response ! I followed your guide and this happens:

Any idea how to fix the percentage number ? Also how can I change it color? Thank you!

[Dan-From-Ryviu]

Could you show me the code you added? Also, you can change the color of it by changing Color scheme of Sale badge in Theme settings

[Dan-From-Ryviu]

I found the code in my article has been changed, please update the code to this on price.liquid

{%- assign percent = compare_at_price | minus:price | times: 100 | divided_by:compare_at_price | round -%}
Save {{ percent }}%

And this code to card-product.liquid

{%- assign percent = card_product.compare_at_price | minus:card_product.price | times: 100 | divided_by:card_product.compare_at_price | round -%}
	Save {{ percent }}%

[INKLY]

Thank you! Please have a look below at the code I added

[INKLY]

Amazing, thank you!

[Hashdon]

Hi, May I know if this code works on Prestige theme too?

[Dan-From-Ryviu]

Hi @Hashdon

This code will work on the Prestige theme, but you may need to add code to the product-meta.liquid or product-info.liquid file to display on the product page.

On the collection page, Prestige theme can enable it in your theme settings without adding code.

[Hashdon]

Hi, @Dan-From-Ryviu .

Can you help me to put the code? the first image is the reference of what we want to achieve on the product page. The second image is from our store. Please let me know what kind of information do you need. This is our website - hashdon.com.

[Dan-From-Ryviu]

Hi @Hashdon

Please give me Collaborator request code of your store so I can request to access your theme and help you.

[Hashdon]

Here - 7941

May I know if this code will change the current price? I don’t want the price to be changed. I want to show the label of the percentage off only. Thank you.

[Dan-From-Ryviu]

It wont change your price, just appear percentage off only.

[Dan-From-Ryviu]

Request sent.

[Hashdon]

Done accept the request.

[Dan-From-Ryviu]

Hi @Hashdon

its done now. Please check

[Hashdon]

Hi @Dan-From-Ryviu .

Just check. Nice work . Exactly like I have mentioned. But can you make the percentage text in green color?
Also, if you wouldn’t mind, can you provide the screenshot where you placing the code. So I can save it for my reference in the future.

[Dan-From-Ryviu]

I added code in this file price-list.liquid

[Hashdon]

Hi @Dan-From-Ryviu .

Thank you very much for your help and sharing the knowledge. This is really helpful.
May God bless you.

[Dan-From-Ryviu]

You are very welcome!