Sale Badge automatically display percentage and $ off

Hello!

I’m trying to have this badge, automatically write the things, so basically calculated % off and normal price - discounted price, I have this code, but it somehow manages to totally missplace the whole badge, I would really appreciate it, if someone could take a look what’s going wrong.

This is the code I used:

{% if product.compare_at_price_max %}
{% assign discount_percent = 100 | minus: product.price | times: 100 | divided_by: product.compare_at_price_max %}
{% assign discount_amount = product.compare_at_price_max | minus: product.price | money %}

Save {{ discount_percent }}% ({{ discount_amount }})
{% endif %}

Manually typing the You save… looks like this:

With the code above, it totally misstransforms everything:

please help!

After reviewing your code, a couple of issues could be causing the problem.

Firstly, it’s important to ensure that the code is placed in the correct location within your Shopify theme’s liquid files. Depending on the theme you’re using, the location of this file may differ, so it’s worth checking with the theme documentation or contacting Shopify support if you’re unsure.

Assuming that the code is in the correct location, one issue that could be causing the problem is the HTML markup used for the badge. It’s important to ensure that the badge is wrapped in a container element with appropriate styling to ensure it is positioned correctly on the page.

Here’s an updated version of the code that takes these issues into account:

{% if product.compare_at_price_max != null %}
{% assign discount_percent = 100 | minus: product.price | times: 100 | divided_by: product.compare_at_price_max %}
{% assign discount_amount = product.compare_at_price_max | minus: product.price %}

  
    
Save {{ discount_percent }}% ({{ discount_amount | money_with_currency }})

  

{% endif %}

I hope this helps!