How To Show Discount/Sale Badge in Shopify (2024)

Adding a Discount Badge
Welcome to WebSense Pro's Shopify tutorial video, where we'll walk you through adding a discount badge to any free theme on Shopify. Whether you're using Shopify Studio or any other free theme available in the Shopify market, this tutorial is for you. By following the steps in this video, you'll be able to create a stylish product discount badge that can be customized to your liking.
Check Out this App
AIOD - All-in-1 Discount
apps.shopify.com/all-in-one-a...
Only this app is on the Shopify app store which has 8+ discounts.
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
Timestamps:
00:00 Intro
02:00 Installing Fresh Theme
03:00 Adding compare price
04:50 Editing liquid files
07:30 Adding CSS code for styling
08:30 Adding compare price on Variant product
Code: websensepro.com/blog/how-to-s...
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us
Hire Us On Upwork: www.upwork.com/freelancers/~0...
Hire Us on Fiverr: www.fiverr.com/websensepro

[@WebSensePro]

Checkout the update video with more features th-cam.com/video/MXfER-tz-0U/w-d-xo.html

[@TrendyThrillz]

You just gained a subscriber. I don't usually leave comments for this video I will. I was sceptic at first, but after procrastinating I tried it and it works. Thank you so so much. I will be watching and liking all your videos.

[@armansaifi_]

Finally "SOMETHING" worked in my life. Thank you man!!!

[@WebSensePro]

Glad I could help! Don't forget to subscribe and share

[@Vivastra-yk8hj]

Lifesaver!!!!!! Been wanting to do something about this and you were the only one with the proper instructions!!!

[@WebSensePro]

Thanks

[@Sokan12]

The ultimate goat!!! thank you so much for the amazing work that you are putting out for the community ! Wish you all the best my G ! Thanks again for the help

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@UnsponsoredLife]

Thank you so much!!! Your tutorial was explained well and easy to follow.

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@bastianknochel]

Awesome and very helpful! It worked perfectly. Was easy to follow along. Thank you very much 🙏

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@polinechildrenshoes]

Very helpful! Thanks a lot !

[@WebSensePro]

You're welcome!

[@luis56301]

Thank you!!!!! It works perfect

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@Schulle24]

Super explained, I have been looking for this for a long time, thank you for this great content! I hope there will be more of these Kontant can be thank you again

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@Ch.ZaraShakeel]

Thank you so much bro! this help me a lot I tried this and its working at first attempt.👍🏻

[@anwarshaikh8090]

It was detailed and verify helpful. Thank you for the video

[@WebSensePro]

You are welcome!

[@luizjr7293]

Amazing job. Simply fantastic

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@rahulchopra7366]

Most awaited video sir. Thank you so much❤️🙏🏼

[@WebSensePro]

Most welcome 😊

[@sianas007]

Thank you so much for this awesome tutorial it worked a treat!

[@WebSensePro]

You're welcome!

[@prakashpatel104]

Great Help. you explained it very well. it worked the first time. slowly learning Shopify liquid.

[@WebSensePro]

Glad it helped!

[@aa97i76]

You the man bro thanks

[@WebSensePro]

Happy to help

[@Nobody_7]

thank you so much man!

[@WebSensePro]

Your welcome

[@darkdaemon13]

THANK YOU !!

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@jpluna3312]

Subscribed! Sincerely grateful for your dedicated efforts in creating valuable Shopify features and tutorials, and generously sharing them free of charge. Your contributions are truly appreciated.

[@WebSensePro]

Thank you so much! 😊

[@HomiezonGadgets]

Thank you so much for this information🤗

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@mysoliswifi8749]

just what I was looking for.

[@WebSensePro]

Great, updates version coming shortly with more advanced features

[@AshpreetKohli]

Bro You are the best! amazing work as always. I'm your subscriber for forever man!

[@WebSensePro]

You're welcome!

[@PatrickSchiebinger]

Perfect ! You helped me a lot :) Followed you

[@WebSensePro]

You're welcome!

[@QuelzKloset]

SOOOOOO HELPFULLLL thanks so much

[@WebSensePro]

You're welcome!

[@AQIBKHAN-uz5eb]

such a amazing video brother i need this kind of video i search a lot but i did,nt find thank you so much

[@WebSensePro]

Glad I could help

[@BeastHindidubbed-7]

Thanks a lot 💗

[@WebSensePro]

You're welcome 😊

[@Novalic-dq9kg]

thank you, bro!

[@WebSensePro]

You're welcome!

[@ChorHuMain]

No Brother you done your job is great 👍 i Like you video so good

[@BrainflyOrg]

thank you so much sir💕💕

[@WebSensePro]

Your welcome

[@user-ty2yd8eh7o]

Well explained, it worked wll

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@Ahmarch83]

Great!

[@WebSensePro]

Thanks for appreciation

[@user-hv2ml4fr6e]

Thanks man it worked
May Allah Bless you
Lots of Love 💞

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@pintudas1800]

You are great sir

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@alexjoh13]

Absolute legend

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@yousafalishah4019]

Thank you sir

[@WebSensePro]

Your welcome

[@arunprakash120]

thanks man

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@user-lh3yy8hr4g]

you are amazing

[@WebSensePro]

Thaks, share and like pls

[@rakeshpendre]

Bravo...Thanks

[@WebSensePro]

Thanks for watching, don't forget to subscribe

[@mr.francistv.856]

thank you so much

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@patrickchen6552]

ty😀

[@WebSensePro]

Your welcome

[@parishoppingstore.]

I have done
Thanks for your video

[@WebSensePro]

Thank you too and dont forget to subscribe

[@ilyes9076]

Broo you are the best thank you soooooooooooooooooooooooooooooooooooooooooooooo muuuuuuuuuuuuuuuuuuuchhhhh

[@WebSensePro]

Your welcome

[@ulovit1]

This was extremely helpful. Thank you very much!

[@WebSensePro]

You're very welcome!

[@punitb8587]

Thanks a lott done

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@paolomallari5454]

This nice video make more please sir

[@WebSensePro]

Yes making more and more

[@cssunnyverma]

great Mentor

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@99Rovens]

Gracias.

[@WebSensePro]

Your welcome

[@siuchoi7655]

Thank you for your tutorial.
But here's the thing: those discount badges may work no problem in product page/product cards/main page.
It won't work if there's a variant from product with different prices.
Let's take product A as an example, A has 4 variants, A1 $10 -> $9, A2 & A3 $2, A4 $2 -> $1, the badge shown in product cards will just show "-90%" as it just take the highest variant price compare with the lowest variant discounted price...

[@WebSensePro]

Haven't tested in multivariant product but will definitely create a new tutorial if requested

[@humzaameen]

In the Shopify Dawn theme, I'd like each slide in the slideshow section to have its own unique background color Scheme. Slideshow section layout is set at grid. Please make a video on it

[@WebSensePro]

Cool idea!

[@user-mh4gh1fl2f]

Amazing!
Thanks for this easy to follow tutorial. I am changing the card-product.liquid file but the discount percentage is not showing on the collection page.
Would you be able to suggest why it could be the case?

[@WebSensePro]

Make sure you are adding it to the correct line number

[@Schulle24]

Hello, your video with the percentages discount in Shopify has helped me a lot. Can you make a video or tell me how I can display the discount price instead of the percentages? Example: 30
Dollar original price Jazz 24 $ Equal savings 6 dollars.
So that the savings in the store is now 6 dollars.
Many thanks in advance
Best regards, Christopher

[@WebSensePro]

Hi Christopher it will need liquid code customisation. Please contact websensepro.com/contact-us for paid support

[@sleepmodebyekotex3445]

Thank you so much!!! But how to show this Discount badge on mobile version shop ?

[@WebSensePro]

Is it not showing up on mobile? Desktop and mobile should show this badge

[@user-hx3rv9dm2i]

Hi Bro, thank you so much for the video. I've an issue with sale bade in product page. It doesn't reflect in product page but in collection page (home page). I double checked the codes you've given. everything is correct. what might be the issue? I'm using the "Origin" theme

[@WebSensePro]

Cant tell without seeing the code

[@enyinnaekechukwu871]

Thank you for this tutorial, it worked great for me, but I have a slight issue, the text( price and description) of my product are overlapping and not making it readable, please advise me on how to get this resolved

[@WebSensePro]

Simple to do with CSS

[@manongjuan]

How do you add discount badge to all collections? Thank you very much - your video is very informative!

[@WebSensePro]

I am not sure what you are asking it works on all products

[@sadafjunaidmalik897]

Awesome.. got the discounted percentage added on my website. But why does the discount code show -50%. It should show 50 without the minus .. right?

[@WebSensePro]

It depends on your preference but you can easily do that via a little code customization

[@SuperLions7]

Hello can you create a video showing how to add a New Badge to a Product that looks just like that sale or sold out badge but with a different color? I want to be able to add a tag called "New" to a product and have this badge show up. This would help a lot of people..

[@WebSensePro]

Great suggestion! I will create a video on this

[@silasschwehn]

Awesome Video!
Somehow, only the discount badge on the product page and not the collection page is able to show the percentage. Is there any way to fix this?
And what phrase can I add to the css to change the product page Text Color to e.g. red?

[@WebSensePro]

It should work fine on collection page as well

[@user-nm4bj3qr1i]

Great video! How would I delete the sales badge on refresh theme ?

[@WebSensePro]

Delete? :p

[@fernando.bernardi]

Hi there,
I noticed that on my theme, there is no 'cart-product' file or even 'price.liquid'. Could it be that these are not accessible for editing on my theme? Please correct me if I am wrong. My theme is 'Impulse Thank you,

[@WebSensePro]

This is not going to work with impulse

[@recosivity]

Brilliant, thank you! It works fine except the product variant pricing. It shows the same discount percentage even if I set different prices. Any idea why that is?

[@WebSensePro]

It won't work if you have same price for all the variants

[@WebSensePro]

Or 2 out of 3 variants has same price

[@armansaifi_]

My "sale" text is in black colour by default. Why is that?

[@WebSensePro]

You have CSS or settings in Customize which is why it shows in black color

[@preciousmotivationalpictur9959]

Same problem I have tried but still problem.

[@beyonmotivation]

Please make a video on how to customize buy x get y free discount like you did for discounts

[@WebSensePro]

Sure, thanks for the idea

[@edonramadani8017]

all okay, just in the end i want the background tobe red like you , and the text white color like you, but at mine the color of the text is black, can u help me please

[@WebSensePro]

Sure, contact us via website

[@chihien3833]

On the homepage, by default, the product's red frame is positioned on the left side. I want it to be positioned on the right side. How can I do that?

[@WebSensePro]

It can be done with CSS, and if you are unable to do it, please contact via websensepro.com/contact-us for paid support

[@Simo-nv7mq]

it does work in my landing page but not in the product page?

[@WebSensePro]

Its tested upto Dawn 13.0.0 so it should work fine. Please reimplement

[@Farming_TVR]

It worked perfectly! Awesome!
But how can we change the color of the text.
Currently, the color white appears to me. I managed to make the font yellow, but I can't change the text to black.

[@WebSensePro]

Font yellow and text black? :)

[@Farming_TVR]

@@WebSensePro yes

[@themissj_]

Is there a way to display the Sale Badge when you've created a discount in the store? I don't want to add a "compare to" price - just show that the item is available at a discounted price with a discount I created, on the home or collection page and product page.

[@WebSensePro]

Hmm... great suggestion. Will try to create a solution on that

[@AlfredoCosta77]

Thanks for your tutorial. I have a question: The promo price doesn't show on product page when you add the discount through the Discounts menu on Admin. It only shows the discount at the Cart. Is there a way to make it work on Dawn theme?

[@WebSensePro]

Will need to check the store on whats the issue

[@AlfredoCosta77]

@@WebSensePro you can try this on your own theme. Try to create a discount on admin and aply to some products. You won't see the discount on product page, only in cart

[@milicacolic9239]

@@AlfredoCosta77 I have the same exact issue. Were you able to find a solution?

[@Miromarkus]

how to change code if I want amount saved (usd) instead of percentage?

[@WebSensePro]

Doable with a small liquid code tweet

[@69toyofficial]

How to change 'product discount badge' position in down theme?

[@WebSensePro]

Where do you want to position it?

[@n.n1110]

the color only changes on the homepage and not on the product page, how is this possible

[@WebSensePro]

Not clear about your question

[@user-rh4qd4ct5w]

Great video! How do I change the discount percentage? urgent pls

[@user-rh4qd4ct5w]

and also the font

[@WebSensePro]

Discount percentage is automatically calculated based on the discount provided, font change require more code Please contact websensepro.com/contact-us for paid support

[@Hamzi_eazy]

will this also work with debutify theme

[@WebSensePro]

No it wont

[@rinagetsreal6189]

I don't see where you search the code! How did you bring up the search to find those lines of code?

[@WebSensePro]

By pressing "CMD + F" in mac and "CTRL +F" in windows

[@Lifesizechocolate]

Great video however I am not confident enough. Can I hire you?

[@WebSensePro]

Yes, fill up the form here websensepro.com/contact-us

[@user-ep5ut6en2j]

My sale button text Colour eg. ( 50% Off ) it is in Black colour i want white text colour. How can i do that? Please Help Me

[@WebSensePro]

A little CSS code will help you do that

[@user-ep5ut6en2j]

@@WebSensePro Can you please help me? what should i search and what to edit ?

[@Mraudreyaxa]

May I ask if this is also applicable in mobile? Thank you.

[@WebSensePro]

Yes

[@ScrollWithKhan3]

Sir ye craft them mai b work karta hai k nhe?

[@WebSensePro]

Nahe

[@priyagupta-vm8ze]

Hello..Does this work on Petlia theme?

[@WebSensePro]

Will need to test on that

[@carljameslanang8417]

Is there a way to do this in Debut theme?

[@WebSensePro]

You are still using debut? Please update

[@carljameslanang8417]

@@WebSensePro Yes, currently working on my new dawn theme

[@maryann8794]

This tutorial is great until you decide you don't want a sales batch anymore. I went back and reversed all your codes that i had put in. But there's still a blue "sales" batch and i have no idea how to take it out.

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@Ehsan4043]

I did everything but it does not work for me , please help me !

[@WebSensePro]

Sure, contact via websensepro.com/contact-us for support

[@thecapsule5439]

bhi need a professional footer video if can make

[@WebSensePro]

Sure, will definitely make one

[@thecapsule5439]

@WebSensePro i will be very greatful ..and your videos are amazing just one another video if can make how to put product pictures appear on left side of main product page.

[@WebSensePro]

Product pictures already show up on the left side by default

[@AQIBKHAN-uz5eb]

where to find code backup?

[@AQIBKHAN-uz5eb]

thank you got it

[@WebSensePro]

Great

[@Ronash28]

its not working for showcase them

[@WebSensePro]

Hmm... it's for dawn theme, will create a video on showcase as well

[@nopeak2000]

@@WebSensePro Does this work for the spotlight theme too? Hasn't been working for me.

[@The1sRos]

None of this worked at all. The code to change color and shape did nothing. And the code to change the word sale to % off only made it show -100% off no matter what my compare at price was. I checked it several times. And watched the video many times. It doesn't work.

[@WebSensePro]

Which theme and version you are using?

[@emmanuelntekim8764]

I'm unable to find "card-product" or "product-card" or "price.liquid" page on avone theme(Avone-5-modern). Can you help please?

[@WebSensePro]

Its for Dawn theme

[@zeeshan_sharif]

Thanks sir

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@aqsafareed19]

Great!

[@WebSensePro]

Your welcome