How to show discount percentage on product card in Dawn Theme?

Store Design
, ,
1

Hello

I’m trying to put the percentage on the product card to show sale then percentage off next to it. ‘Sale 20% Off’

This is only showing on the product page itself but not on the product card. It only shows the word sale and does not show how much percent is off. Can someone please help me with which code to use for this? This is for Dawn Theme.

Thank you!

2

Hi @midas8858 ,

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution.

3

Hi @midas8858 ,

Please go to Actions > Edit code > Snippets > price.liquid file, find ‘sale_badge_color_scheme’ and change code here:

Screenshot.png
Screenshot.png1070×790 46.1 KB

Code:

{%- if use_variant -%}
        {%- assign price_save = compare_at_price | minus: price | money -%}
        Sale {{ price_save }}% Off
      {%- else -%}
        {{ 'products.product.on_sale' | t }}
      {%- endif -%}

Hope it helps!

4

@Litos

Thank you, this only worked when clicking on the product and shows on the product page. I’d like for the amount of % off to show on the product card before going to the product page.

5

Hi @midas8858 ,

Please change code:

{%- assign price_save = compare_at_price | minus: price | money -%}
Sale {{ price_save }}% Off

Hope it helps!

6

@Litos It only worked for the product page. I sent you a direct message to show you which I’m talking about. Kindly check thank you.

7

Hi @midas8858 ,

My previous tutorial will help you with this, please change code:

Screenshot.png
Screenshot.png1066×513 54.2 KB

{%- if use_variant -%}
        {%- assign price_save = compare_at_price | minus: price | money -%}
        Sale {{ price_save }}% Off
      {%- else -%}
        {{ 'products.product.on_sale' | t }}
      {%- endif -%}

=>

{%- assign price_save = compare_at_price | minus: price | money -%}
Sale {{ price_save }}% Off

Hope it helps!

8

Hi @midas8858 ,

Please use below code to implement the same.

{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- discount_percentage }}

To implement the same on product page please refer the below video.