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

Рет қаралды 32,556

Күн бұрын

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

Пікірлер: 200

@WebSensePro 3 ай бұрын

Checkout the update video with more features kzfaq.info/get/bejne/g76WeLVe2eCRYIk.html

@Sokan12 8 ай бұрын

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 8 ай бұрын

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

@TrendyThrillz 12 күн бұрын

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_ 5 ай бұрын

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

@WebSensePro 5 ай бұрын

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

@UnsponsoredLife 7 ай бұрын

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

@WebSensePro 6 ай бұрын

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

@bastianknochel 9 ай бұрын

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

@WebSensePro 9 ай бұрын

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

@Schulle24 8 ай бұрын

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 7 ай бұрын

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

@sianas007 Ай бұрын

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

@WebSensePro Ай бұрын

You're welcome!

@user-zv6ee3tv2j 6 күн бұрын

Wonderful, needed it very much. Thank you

@WebSensePro 4 күн бұрын

You're welcome!

@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! 😊

@polinechildrenshoes 11 ай бұрын

Very helpful! Thanks a lot !

@WebSensePro 11 ай бұрын

You're welcome!

@AshpreetKohli 28 күн бұрын

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

@WebSensePro 17 күн бұрын

You're welcome!

@rahulchopra7366 11 ай бұрын

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

@WebSensePro 11 ай бұрын

Most welcome 😊

@prakashpatel104 4 ай бұрын

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

@WebSensePro 3 ай бұрын

Glad it helped!

@Ch.ZaraShakeel 11 күн бұрын

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

@WebSensePro 4 күн бұрын

You're welcome!

@anwarshaikh8090 10 ай бұрын

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

@WebSensePro 10 ай бұрын

You are welcome!

@Nobody_7 2 ай бұрын

thank you so much man!

@WebSensePro 2 ай бұрын

Your welcome

@luis56301 7 ай бұрын

Thank you!!!!! It works perfect

@WebSensePro 7 ай бұрын

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

@QuelzKloset 23 күн бұрын

SOOOOOO HELPFULLLL thanks so much

@WebSensePro 18 күн бұрын

You're welcome!

@aribencanaan 2 күн бұрын

THANK YOU SO MUCHHH!!!! From Peru ;)

@WebSensePro 2 күн бұрын

You're welcome!

@luizjr7293 8 ай бұрын

Amazing job. Simply fantastic

@WebSensePro 7 ай бұрын

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

@aa97i76 10 ай бұрын

You the man bro thanks

@WebSensePro 10 ай бұрын

Happy to help

@ChorHuMain 11 күн бұрын

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

@mysoliswifi8749 3 ай бұрын

just what I was looking for.

@WebSensePro 3 ай бұрын

Great, updates version coming shortly with more advanced features

@PatrickSchiebinger 2 ай бұрын

Perfect ! You helped me a lot :) Followed you

@WebSensePro Ай бұрын

You're welcome!

@BeastHindidubbed-7 Ай бұрын

Thanks a lot 💗

@WebSensePro Ай бұрын

You're welcome 😊

@HomiezonGadgets 5 ай бұрын

Thank you so much for this information🤗

@WebSensePro 5 ай бұрын

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

@aqsafareed19 2 ай бұрын

Great!

@WebSensePro 2 ай бұрын

Your welcome

@Novalic-dq9kg 13 күн бұрын

thank you, bro!

@WebSensePro 13 күн бұрын

You're welcome!

@darkdaemon13 8 ай бұрын

THANK YOU !!

@WebSensePro 7 ай бұрын

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

@AQIBKHAN-uz5eb 8 ай бұрын

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 8 ай бұрын

Glad I could help

@rakeshpendre 4 ай бұрын

Bravo...Thanks

@WebSensePro 4 ай бұрын

Thanks for watching, don't forget to subscribe

@BrainflyOrg 4 ай бұрын

thank you so much sir💕💕

@WebSensePro 4 ай бұрын

Your welcome

@yousafalishah4019 2 ай бұрын

Thank you sir

@WebSensePro 2 ай бұрын

Your welcome

@alisportandfitnesshome 5 күн бұрын

Helpfull ❤❤❤

@WebSensePro 4 күн бұрын

Glad it helped

@alexjoh13 6 ай бұрын

Absolute legend

@WebSensePro 6 ай бұрын

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

@user-lh3yy8hr4g 6 ай бұрын

you are amazing

@WebSensePro 6 ай бұрын

Thaks, share and like pls

@Alnisaytchannel 7 күн бұрын

Its work

@patrickchen6552 4 ай бұрын

ty😀

@WebSensePro 4 ай бұрын

Your welcome

@ilyes9076 3 ай бұрын

Broo you are the best thank you soooooooooooooooooooooooooooooooooooooooooooooo muuuuuuuuuuuuuuuuuuuchhhhh

@WebSensePro 3 ай бұрын

Your welcome

@user-hv2ml4fr6e 9 ай бұрын

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

@WebSensePro 9 ай бұрын

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

@pintudas1800 5 ай бұрын

You are great sir

@WebSensePro 5 ай бұрын

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

@mr.francistv.856 8 ай бұрын

thank you so much

@WebSensePro 7 ай бұрын

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

@user-ty2yd8eh7o 9 ай бұрын

Well explained, it worked wll

@WebSensePro 9 ай бұрын

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

@parishoppingstore. 11 ай бұрын

I have done Thanks for your video

@WebSensePro 11 ай бұрын

Thank you too and dont forget to subscribe

@arunprakash120 7 ай бұрын

thanks man

@WebSensePro 6 ай бұрын

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

@cssunnyverma 4 ай бұрын

great Mentor

@WebSensePro 4 ай бұрын

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

@punitb8587 8 ай бұрын

Thanks a lott done

@WebSensePro 8 ай бұрын

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

@siuchoi7655 3 ай бұрын

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 2 ай бұрын

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

@ulovit1 11 ай бұрын

This was extremely helpful. Thank you very much!

@WebSensePro 11 ай бұрын

You're very welcome!

@paolomallari5454 4 ай бұрын

This nice video make more please sir

@WebSensePro 4 ай бұрын

Yes making more and more

@user-mh4gh1fl2f 6 ай бұрын

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 6 ай бұрын

Make sure you are adding it to the correct line number

@humzaameen 11 ай бұрын

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 11 ай бұрын

Cool idea!

@Schulle24 7 ай бұрын

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 6 ай бұрын

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

@manongjuan 4 ай бұрын

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

@WebSensePro 3 ай бұрын

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

@sleepmodebyekotex3445 5 ай бұрын

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

@WebSensePro 5 ай бұрын

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

@enyinnaekechukwu871 6 ай бұрын

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 6 ай бұрын

Simple to do with CSS

@user-hx3rv9dm2i 3 ай бұрын

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 3 ай бұрын

Cant tell without seeing the code

@user-nm4bj3qr1i 2 ай бұрын

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

@WebSensePro 2 ай бұрын

Delete? :p

@silasschwehn 5 ай бұрын

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 5 ай бұрын

It should work fine on collection page as well

@recosivity 11 ай бұрын

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 11 ай бұрын

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

@WebSensePro 11 ай бұрын

Or 2 out of 3 variants has same price

@sadafjunaidmalik897 3 ай бұрын

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 3 ай бұрын

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

@AlfredoCosta77 11 ай бұрын

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 11 ай бұрын

Will need to check the store on whats the issue

@AlfredoCosta77 11 ай бұрын

@@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 7 ай бұрын

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

@fernando.bernardi 3 ай бұрын

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 3 ай бұрын

This is not going to work with impulse

@SuperLions7 11 ай бұрын

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 11 ай бұрын

Great suggestion! I will create a video on this

@beyonmotivation 9 ай бұрын

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

@WebSensePro 9 ай бұрын

Sure, thanks for the idea

@Farming_TVR 8 ай бұрын

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 7 ай бұрын

Font yellow and text black? :)

@Farming_TVR 7 ай бұрын

@@WebSensePro yes

@user-rh4qd4ct5w 7 ай бұрын

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

@user-rh4qd4ct5w 7 ай бұрын

and also the font

@WebSensePro 6 ай бұрын

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

@Lifesizechocolate 3 ай бұрын

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

@WebSensePro 3 ай бұрын

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

@edonramadani8017 5 ай бұрын

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 5 ай бұрын

Sure, contact us via website

@themissj_ 5 ай бұрын

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 5 ай бұрын

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

@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

@Mraudreyaxa Ай бұрын

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

@WebSensePro Ай бұрын

Yes

@Miromarkus 9 ай бұрын

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

@WebSensePro 8 ай бұрын

Doable with a small liquid code tweet

@armansaifi_ 5 ай бұрын

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

@WebSensePro 5 ай бұрын

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

@preciousmotivationalpictur9959 4 ай бұрын

Same problem I have tried but still problem.

@priyagupta-vm8ze 11 ай бұрын

Hello..Does this work on Petlia theme?

@WebSensePro 11 ай бұрын

Will need to test on that

@Simo-nv7mq 5 ай бұрын

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

@WebSensePro 5 ай бұрын

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

@Hamzi_eazy 5 ай бұрын

will this also work with debutify theme

@WebSensePro 5 ай бұрын

No it wont

@ScrollWithKhan3 7 ай бұрын

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

@WebSensePro 6 ай бұрын

Nahe

@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

@69toyofficial 6 ай бұрын

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

@WebSensePro 6 ай бұрын

Where do you want to position it?

@user-ep5ut6en2j 5 ай бұрын

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 5 ай бұрын

A little CSS code will help you do that

@user-ep5ut6en2j 5 ай бұрын

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

@n.n1110 3 ай бұрын

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

@WebSensePro 3 ай бұрын

Not clear about your question

@carljameslanang8417 8 ай бұрын

Is there a way to do this in Debut theme?

@WebSensePro 7 ай бұрын

You are still using debut? Please update

@carljameslanang8417 7 ай бұрын

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

@maryann8794 24 күн бұрын

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 17 күн бұрын

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

@Ehsan4043 10 ай бұрын

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

@WebSensePro 10 ай бұрын

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

@thecapsule5439 7 ай бұрын

bhi need a professional footer video if can make

@WebSensePro 7 ай бұрын

Sure, will definitely make one

@thecapsule5439 7 ай бұрын

@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 7 ай бұрын

Product pictures already show up on the left side by default

@AQIBKHAN-uz5eb 8 ай бұрын

where to find code backup?

@AQIBKHAN-uz5eb 8 ай бұрын

thank you got it

@WebSensePro 8 ай бұрын

Great

@The1sRos 7 ай бұрын

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 7 ай бұрын

Which theme and version you are using?