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?
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
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
Hi @robertsolcan ,
You can try the Product Labels & Badges app and use the variables feature (free), also known as dynamic text.
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.
- 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
1 Like
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.