Example Website: https://snugshark.co/products/sharkblanket
My Website : https://charmente.com/
Topic summary
A user wants to replace the default “Sale” badge on product pages with a percentage discount tag, similar to an example website they referenced.
Solution Provided:
Another user offered step-by-step instructions:
- Locate and edit the price.liquid file in the live theme
- Find the line
{%- if show_badges -%}and replace the existing code block - The new code calculates and displays the discount percentage (e.g., “X% OFF”) instead of the generic “Sale” text
- Additional CSS code should be added to component-price.css for styling
Technical Details:
The solution involves modifying Liquid template code to calculate the percentage difference between the compare-at price and current price, then displaying it as a formatted discount badge. The code snippets provided appear partially corrupted in the original post but indicate the general approach for this customization.
Status: Solution offered but requires technical implementation by the original poster.
Hi @Simon159
To show the percentage discount instead of the sale badge follow the below steps
- Edit the live theme and find price.liquid edit it and find this line {%- if show_badges -%} & update it with below code
From
{%- if show_badges -%}
{{ 'products.product.on_sale' | t }}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
to
{%- if show_badges -%}
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% OFF
{{ 'products.product.sold_out' | t }}
{%- endif -%}
And add below CSS code to component-price.css
.price__badge-sale svg {
height: 10px;
}