Change The "Sale" Tag To A Discount In Percentage Format In The Impulse Theme

Retired Boards Appdev Store Design
1

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：

shengwenwen_0-1685525649547.png
shengwenwen_0-1685525649547.png400×150 30.3 KB

This is the style I want：

shengwenwen_1-1685525649803.png
shengwenwen_1-1685525649803.png400×146 59.4 KB

Any help is most welcome.

Thank you

2

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 %}
  
    {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | money_without_currency | remove: '.00' }}% Off
  
{% endif %}
  1. Save the changes to the file.

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

3

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

on “product-card-grid.liquid” or “product-card-list.liquid”