FROM CACHE - en_header

Dawn 5.0.0 Code to change sale badge to a percentage on collection page

clgtigermoth
New Member
2 0 0

Hello,

 

I am looking for code to change the sale badge on the collection page to a percentage, I have removed the sale letters it is now a blank blob but no code I have found online seems to get the percentage to appear correctly. 

 

clgtigermoth_0-1656268227347.png

 

 

Replies 4 (4)
MandasaTech
Shopify Expert
405 70 79

Hi,
We have a solution for this task.

In this first you have to open the "product-card" snippet.
In the "product-card" snippet, you will find line no. 78 

Theme code:-
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>

Instead of the code of the theme, you can add the code given by below :- 
<span class="badge badge-11 badge--bottom-left color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">{% if product_card_product.compare_at_price_max > product_card_product.price %}{{ product_card_product.compare_at_price_max | minus: product_card_product.price | times: 100.0 | divided_by: product_card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off{% endif %}</span>

After adding this code, Percentage will appear instead of sale badge in the collection.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
clgtigermoth
New Member
2 0 0

Hello, 

 

Thanks for this, I have been on the 'Product Card' Line 78 shows 'loading="lazy"' - Please see screenshot of code below:

 

clgtigermoth_0-1657101204360.png

 

MandasaTech
Shopify Expert
405 70 79

Hi,

In this first you have to open the "card-product" snippet.
In the "card-product" snippet, you will find line no. 98 

Theme code:-
 <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>


Instead of the code of the theme, you can add the code given by below :- 
 <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}" aria-hidden="true">{% if card_product.compare_at_price_max > card_product.price %}{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off{% endif %}</span>

After adding this code, Percentage will appear instead of sale badge in the collection.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
ircommerce
Tourist
5 0 0

Hi, thanks for help
doesnt work.  ther is not that theme code