How can I alter the sale badge to display percentages?

[Nico38]

Hello how to change sale badge for percentage? 

[paulryazanov]

Hi! Please, provide link to your site and name of theme

[MS_WEB_DESIGNER]

Hi @Nico38,

I am Ani From https://www.task4store.com/  - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store Url,
-Also Mention Which Shopify theme you are using 

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!

Regards,
Ani

[LitExtension · Accepted solution]

Hi @Nico38,

Go to snippets > card-product.liquid file, in line 93 and change code:

beforeafter

Code:

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
              <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">-{{ percent }}%</span>

[Nico38]

work perfectly thx you very much @LitExtension 

[eComSeller97]

Hello

I'm using Debut theme with PageFly to create a product grid. I chose the collection I want to display its products and everything is fine but the problem is : some products are on sale and others aren't, so the "product badge that shows the % of discount" keep appearing in every product even for the products who have "no compare at price" (which means aren't in sale) so the badge appears "%0 discount"

I want to edit the code to make the badge appear only when : product.compare_at_price_max > product.price

There is a CSS code section in PageFly so I can edit whatever I want but I don't know how to code this condtion of display.

[mzhashmi]

Hi. Thanks this works well with my craft theme. But, I want to show the same badge on every product's page. In this solution, the sales percentage is shown in the collection grid but not on the product page. Can you help? Thank you

[HomeLiving]

Looking for this same solution, this worked for the collection page but looking to replicate on product page


Thanks in advance

[LitExtension]

Hi @HomeLiving,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[Blue_wave]

how to change percentage on different variation

[BigBenjamin]

Hello, seems like this has changed, I found the same code at the line 328 but when I paste your code, nothing changes. Would be great if you could look into that, I attached a screenshot below

[dinina]

what if my theme does not have card_product liquid file? i a, using District theme and i am facing difficulties , i tried all tutorials and they are made for the dawn theme