Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

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

shengwenwen
Tourist
12 0 4

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

 

This is the style I want:

shengwenwen_1-1685525649803.png

 

Any help is most welcome.

 

Thank you

Replies 2 (2)

Akibhusen
Shopify Partner
715 121 148

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
Shopify Partner
12 0 10

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

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