Make dynamic sale badge

[robertsolcan]

I want for this badge to be more dynamic, instead of just the "%" I want to show something like " 45% OFF"

Do you think you can help me with that?

[Fitfusiongear]

ChatGPT said:
ChatGPT
Hi there!

I understand that you want to make the discount badge more dynamic, showing something like "45% OFF" instead of just the percentage symbol. This is definitely possible, but it would require some adjustments to your theme's code, specifically in how the discount is calculated and displayed.

I'd be happy to help guide you through the process or assist in making these changes for you. If you'd like, we can discuss your requirements in more detail and go over the best approach to implement this.

Feel free to reach out to schedule a time, and we can dive into the solution together

[tobebuilds]

Hi Robert,

In Liquid, a `variant` has these fields: `price` and `compare_at_price`.

https://shopify.dev/docs/api/liquid/objects/variant

Keep in mind that `compare_at_price` may be zero. You don't want to divide by zero, so you'll need an if statement to check for that.

You can try something like:

{% if variant.compare_at_price > 0 and variant.compare_at_price > variant.price %}
{{ variant.compare_at_price | minus:variant.price | divided_by: variant.compare_at_price | times: 100 }}% OFF
{% endif %}

Hope this helps,

Tobe

[Amanda_Fordeer]

Hi @robertsolcan, 

You can try the Product Labels & Badges app and use the variables feature (free), also known as dynamic text.

[GTLOfficial · Accepted solution]

Hello @robertsolcan 

Go to online store ----> themes ----> actions ----> edit code ----> snippets ----> card-product.liquid ---> line number 140
add this code at the end of the file and save.
1) Collection page:-

{% assign saving = card_product.compare_at_price
| minus: card_product.price
| times: 100
| divided_by: card_product.compare_at_price
%}
{{ saving | append: '% OFF' }}

Go to online store ----> themes ----> actions ----> edit code ----> snippets ---> price.liquid ---> line number 127
2) Product page:-

{% assign saving = product.compare_at_price
| minus: product.price
| times: 100
| divided_by: product.compare_at_price
%}
{{ saving }} {{ 'products.product.on_sale' | t }}

If this was helpful, hit the like button and accept the solution.
Thanks

[Ankit6]

Hi @robertsolcan If you are looking to display multiple badges like percentage sales, simple low-stock, sale, out-of-stock text badges, and custom Image-based Badges on your store, you can use the Prime Badges Labels & Stickers.