Show percent off badge instead of sale

Store Design
, , ,

Topic summary

A user wants to replace the generic “Sale” badge on their collection page with dynamic percentage-off labels (e.g., “50% off Sale”, “20% off Sale”) based on actual discounts. They’re using the free Debut theme.

Solutions provided:

  • ToolboxStudio suggested editing product.liquid to add Liquid code that calculates the percentage discount by comparing the product’s compare-at price with its current price.

  • PaulNewton noted this is a common customization and recommended searching forums for existing solutions. They pointed to snippets/product-card.liquid as the starting point in Debut, and mentioned that additional JavaScript customizations might be needed for dynamic variant behavior.

  • Dan-From-Ryviu provided a specific solution: locate the line {{ 'products.product.on_sale' | t }} in Snippets > product-price-listing.liquid and replace it with Liquid code that calculates and displays the discount percentage.

Outcome: The user confirmed Dan-From-Ryviu’s solution worked perfectly. All responders emphasized backing up the theme before making code changes.

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

I would like to replace the current ‘Sale’ badge on my collection page to say ‘50% off Sale’ or ‘20% off Sale’ depending on the discount.

I’m using the free Debut theme.

Thank you in advance!

www.goodthingsstore.com.au

2

  • Go to your Shopify Admin dashboard.

  • Navigate to Online Store > Themes.

  • Click on “Actions” > “Edit code”.

  • Look for the template file that controls how product prices and sale labels are displayed. This is usually product.liquid

  • Replace the part that displays “Sale” with the below Liquid code to calculate the percentage off.

    Note: Always duplicate your store theme before making changes to code.

{% if product.compare_at_price > product.price %}
   {% assign percent_off = 100 | times: (product.compare_at_price - product.price) | divided_by: product.compare_at_price | round %}
   {{ percent_off }}% OFF
{% endif %}​
3

Hi @Mims-Radford for some themes this is a common change so search the forums for possible existing solutions.

Note that most such customizations are only for product variants that are ALL on sales.

In Debut the logic to follow may start in snippets/product-card.liquid which is rendered by the collection templates.

For dynamic variant behavior as the user chooses other variants, or swatches, javascript customizations would also be needed.

If you need this customization then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

4

Hi @Mims-Radford

Please open Online Store > Themes > Edit code > Snippets > product-price-listing.liquid, find this line of code

{{ 'products.product.on_sale' | t }}

Replace it with this code and save file.

{%- assign percent = product.compare_at_price
        | minus: product.price
        | times: 100
        | divided_by: product.compare_at_price
        | round
      -%}
      {{ percent }}% OFF
5

Thank you! That worked perfectly.

1 Like
6

Happy I could help. Have a nice day!