Sale Badge automatically display percentage and $ off

Topic summary

A user is attempting to create an automatic sale badge that displays both the percentage discount and dollar amount saved on Shopify product pages.

The provided code calculates these values using Liquid template variables (compare_at_price and product price), but the badge is appearing misplaced on the page.

Current Issue:

  • The badge positioning is completely broken when using the automated calculation code
  • Manual entry of “You save” text displays correctly

Suggested Solution:
A respondent identified potential problems:

  • Code placement within the theme’s Liquid files may be incorrect
  • HTML markup structure for the badge needs proper wrapping in a container element
  • Updated code was provided that includes proper HTML structure and CSS styling to ensure correct positioning

The discussion includes code snippets and screenshots (though text appears reversed/encoded in some sections), focusing on troubleshooting the CSS and Liquid template implementation.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

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!