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

[clgtigermoth]

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. 

[MandasaTech]

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.

[ircommerce]

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

[clgtigermoth]

Hello, 

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

[MandasaTech]

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.