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

[Akibhusen]

Follow the below steps to achieve your requirement. I hope you have knowledge of liquid code.

1. From your Shopify admin, go to Online Store > Themes.
2. Locate the Impulse theme and click on the "Actions" button, then select "Edit code" from the dropdown menu.
3. In the left sidebar, under the "Sections" folder, click on "product-card-grid.liquid" or "product-card-list.liquid" (depending on the view you want to modify).
4. Look for the code that outputs the sale tag, which is typically represented by {% if product.compare_at_price > product.price %}.
5. Replace the existing code that displays the "Sale" tag with the following code to show the discount percentage:

{% if product.compare_at_price > product.price %}
  <span class="discount-label">
    {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | money_without_currency | remove: '.00' }}% Off
  </span>
{% endif %}

1. Save the changes to the file.

Please note that modifying the theme code requires some technical knowledge.

[mediafish]

The impulse theme does not have any of those views in the sections: 

on "product-card-grid.liquid" or "product-card-list.liquid"