To Change The "Sale" Tag To a Discount in percentage format In The Impulse Theme

[shengwenwen]

I want to replace the “sale” label in the product collection page with a discount label in the form of a percentage

And here is my shopify website:https://thefolls.com/collections/best-seller

This is the current style：

This is the style I want：

Any help is most welcome.

Thank you

[NomtechSolution]

To replace the “sale” label with a discount label in the form of a percentage on the product collection page in your Shopify store, you’ll need to modify the theme’s code. Here’s a general approach you can follow:

1. Open your Shopify theme editor: Go to your Shopify admin panel, navigate to “Online Store,” and click on “Themes.” Locate your active theme and click on the “Customize” button to open the theme editor.

2. Edit the product collection template: In the theme editor, find the product collection template that you want to modify. This will vary depending on your theme, but it is usually called something like “collection.liquid” or “collection-grid.liquid.”

3. Locate the section responsible for displaying the product labels: Look for the code section within the collection template that displays the “sale” label. This might be indicated by a class like .product__label or something similar.

4. Replace the “sale” label code with a discount percentage code: Replace the existing code responsible for displaying the “sale” label with the following code to show a discount percentage label:

{% if product.compare_at_price > product.price %}
  
    {{ 100 | minus: (product.price | times: 100 | divided_by: product.compare_at_price) | integer }}% off
  
{% endif %}

• This code calculates the percentage discount by comparing the current price (product.price) with the compare at price (product.compare_at_price).

  1. Style the discount label: Add CSS styles to your theme to customize the appearance of the discount label. In the theme editor, find the “Edit CSS” or “Additional CSS” section, and add the following code:

.discount-label {
  background-color: #ff0000;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
​

Adjust the CSS properties (background color, text color, padding, border-radius, font-size) to match your desired style.

[shengwenwen]

Hi，Thanks for your help.
I replaced the following code with the one you provided above, but it doesn’t work.

[shengwenwen]

Hi，Thanks for your help.
I replaced the following code with the one you provided above, but it doesn’t work.