Thank you so much! Very clear and helpful! YOU ARE LEGEND! I even made a boo boo but due to how clearly you explain everything I was able to understand where to go to find the error and fix it!
@theprompted Hm, it looks like if you remove the Compare At price (which gets rid of Shopify's built-in "Sale" badge), ALL custom badges attributed to a product will also disappear on the product page. Do you have any suggestions for a workaround for this? Thank you!
The Sold out badge color scheme is found under the default Shopify Badges theme settings. When your products are out of stock (sold out), your theme will add a badge that says "sold out". The color scheme setting is to define what it looks like.
Thanks for the video! PS: I noticed there was a mistake in the code of price.liquid instead of "settings.custom_badge_3_enable", you have "settings.custom_badge_2_enable' which makes custom 3 appear in product page when custom 2 is enabled.
Brilliant, very nice customisation. Thank you so much for this video. So how does it work if I wish to add another badge for "Top Selling product" - for example? What files do I need to edit? I know I have to create a new metafield for it but what else do I need to change, could you please tell me or if you can make a new video for that, I will appreciate you. Thanks. And lastly, can I request you do a video too for adding the Subcollection List Custom Section to the Home page please, that will complete your tutorial on adding this beautiful customisation to the MENU. I know you can make it! Thanks again and have a nice day. 🙏 🤩
Yes it can - but would require more customization to modify the code and make sure it all interacts properly. You can try it yourself, or you can hire us to do it for you at theprompted.co/hire-us
The best way with the current customization is to use a bulk editing tool like Hextom BPE or Matrixify and mass update the metafield for each product in your collection. In the future, we may add a feature to add the badge based on tags.
Thanks a ton! Only thing that doesnt work for me in my Ride theme is, it doesnt allow me to select color. "Unable to display color schemes. Schemes must be defined in settings_data and settings_schema."
Thank you for the amazing tutorial on adding custom product badges on Shopify. I followed the steps and now have the badges active on my store-they look spectacular. However, on the product page and featured products, the default 'sale' label from the Dawn theme still appears. I've spent over 4 hours trying to disable it and keep only the custom badge, but I haven't had any success. Could you please help me with this? I would really appreciate your assistance.
I wanted to thank you for the excellent content. Thanks to your tutorials, I've managed to solve the issue I was facing. 😊 I’m also interested to know if you offer custom theme services for Shopify using Dawn, similar to the Shrine theme. What would be the pricing and details? Thanks again for all your help and for sharing your knowledge!
Glad you like it and figured it out! And yes, we offer personalized development work. It's difficult to provide pricing without knowing the details of what you're looking for, but we'd be happy to explore a custom project with you. Just book a call with us at theprompted.co/hire-us to discuss the details.
I am really impressed and appreciate your hard work, but I don't know why you have not added the option for dynamic text instead of an image. Alternatively, you could add both features, as text is more important than the image. Hopefully, you will add the dynamic text feature
Great video! Can you please do a tutorial on how to show color clickable swatches on collection pages with a set up where the colors are not variants of the same product? I have created a separate product for each color variant, and then using your tutorial on how to combine products into the same listing, I did combine them into the same page. Thanks!
Thank You for this tutorial, for some reason im having trouble with the product card, I copied the code from the link but for some reason it won’t show the sale badge for my item on its collection page. any ideas why?
It could be a number of different reasons, so here are some things for you to check or try: - Make sure to have the collection badge option activated. - Make sure all code was installed properly on a valid theme (free Shopify themes like Dawn, Sense, Refresh, etc) If these still don't work, it may be worth installing a fresh version of your theme (ex: Dawn) as a test theme and starting again from scratch to see if you get the same or different result. If you get a different result, it's likely an issue with the installation. If you get the same result, it may be a more complex problem.
Thanks, great vid but I got a error on top of my product card saying, "liquid error (snippets/card-product line 149): Could not find asset snippets/custom-badge-product-card.liquid" And it is showing this on my website instead of the badge? What should I do? Thanks in advance.
@@theprompted Hi, I also faced the same error, I also fixed it but now I am facing another problem that is every product card has "cus" word on it. On left middle of the cart. Kindly can you guide me.
This would require some custom coding, but have you checked out this video yet: ua-cam.com/video/-CJwU-ktAFY/v-deo.html ? It might help with what you're looking for.
Are you able to override the default badges with the customs? for example, I still want the "sold out" however i don't want the default design. I want to add my own design that says sold out. However, If i use the custom badge, the default badge will still appear
First of all, thank you very much for the great video, always great. I have a question for you. Could you perhaps implement this so that the badges come automatically, for example if the new tag is present in the product or the best seller tag is present, I think so You know, what I basically programmed the way you did was just based on tags
I can look into adding that as an option, but in the meantime you can use tools like Matrixify or Hextom BPE to bulk update the metafields based on different fields, including tags. I think they may even have some options to schedule jobs so that it is close to "automatic"
@@thepromptedHello, first of all I wanted to thank you for answering. I watch all your videos and think they're great. Now about me. I'm a small shop that's trying to get started and I'm trying to be as cheap as possible at the beginning. You did write that there are apps for that that can change these metafields en masse, but unfortunately these apps all cost money. Your video shows exactly what I was looking for, just as I said, not on tag fields. It would be really tricky if you could program that in, because I control everything in my shop with tags. I'd be really happy if you could bring yourself to program that in. PS you're really good and I like your videos, thanks in advance.
Such a helfpul tutorial thanks!! Only problem is I am getting this error prompt for Custom Badge: "Unable to display color schemes. Schemes must be defined in settings_data and settings_schema". Any suggestions? Thanks in advance :))
Strange - sounds like your color schemes aren't properly defined. What theme and version are you using? This was designed for v13 of the free Shopify themes and might not work if you have a much older theme. One test you could try as a test is to install a fresh new version of Dawn (or other free Shopify theme), and try the customization again. If it works, then you can work backwards to see what might have caused the issue on your theme.
@@theprompted i am having the same issue. everything works perfect except the color schemes. I am using the craft theme version 2.0.0 and for some reason says "Updates are not supported for uploaded themes". Any ideas?
Hard to know for sure, but if you're on Craft version 2, then it's likely your theme is too old and not compatible with this customization. Craft is now on version 15. What you can do is install a fresh new version of Craft as a sandbox test theme, and try the customization again as a debugging step to see if you get a different result. If it's different, then it could be the installation or theme version. If it's the same, then it'll need further debugging.
Hi @theprompted Your tutorials have really helped me alot alot. If you don't mind can you help me with one issue that i am currently facing. In the same tutorial i want to replace the default "SALE" badge with one of your other tutorial, in which you showed how to display discount %. For example "SALE -> 20% OFF" Can you help? Thanks in advance.
Hi, it's me again. Unfortunately, on Dawn 14, it didn't work for me and it messed up the "quick add to cart" buttons. Maybe it's my fault; I'll try it again. However, if you find yourself needing to update this option, here is my advice from a user perspective, and I hope it is technically possible. I think updating product badges would be easier if text badges were also dynamic like the image ones. That way, we could get away with fewer metafields, more options, and less work. For example, in my case, I needed badges like "pre-order," "Limited," or "best selling." Since these three would go on three different product groups, by using dynamic metafields, I could have used only one field with different inputs per product. Any changes, such as from "pre-order" to "new drop," would be much easier. I wouldn't have to go through setting up the custom badge text and setting up True and False for each metafield I'm not using for that product. As always, keep up the great work and I wish you the best clients. You deserve them.
I have made the sale badge in "%" and I saw this video but now the percantage is not shown in product cards :/ . I have changed the "custom_badge_product_card.liqued" a little bit but there's a problem the variable "discount_percentage" Is not shown in the product cards? What should I do?
You would need to make the same edit to the badges as you did in the sale badge video: ua-cam.com/video/ZEr_vSZwo1M/v-deo.html. The edited code from that video will also be found in this one, so the same edit can be applied.
Just note that if you do this, then the sale badge won't automatically show like it does right now if you have a compare-at price. Instead, the best way would be to replace the code below with your desired badge. You can look for this code: {{- 'products.product.on_sale' | t -}} But if you still want to simply hide the current sale badge, then you can look for the code above and set display to none, ie. display: none
I managed to do everything perfectly, but I had configured a "sale" badge to appear in "%" and adding these new badges to the missing "%" and "sale" appeared again. What code should I add to appear the stamps plus the discount in "%"??
You can apply the same customization as previously. The new code follows the same structure as the previous code (but with some additional code around it). So search for the same line and edit it the same way.
Thank you for this addition. For the collection page (card-product), in the portion of the code that you suggested to comment out, I have the discount percentage off showing. How do I keep the percentage off visible on the badge rather than the product card only showing the word "sale" on the badge? I want the following to remain so that I can show the exact percentage: {{- discount_percentage }}% OFF
It's a very similar approach to the previous video you followed (ua-cam.com/video/ZEr_vSZwo1M/v-deo.html), except you now find the original code in custom_badge_product_card.liquid and you need to change card_product.compare_at_price and card_product.price with product.compare_at_price and product.price
Wow.. I am using District theme and it has barely ANYTHING in theme editor. I got ripped off... :( there is no way to do this if theme editor does not show the badge customization area??
This video shows how to add the feature and settings to your theme (it's not there by default). This tutorial was designed for the free Shopify themes (ex: Dawn, Refresh, Sense, etc), so unfortunately it's unlikely to work with a premium/paid theme like yours.
The Prompted, I notice that the shopify default Collection or Product section that setup to swipe can't be swipe using the mouse pointer when ofcourse if using non touchscreen pc or monitor, it doesn't have scrollbar or arrow to navigate which I prefer,
You can follow the same guide as previously. Add the calculation and change the text as described in the original video (ua-cam.com/video/ZEr_vSZwo1M/v-deo.html). However, for the product cards, the line {{- 'products.product.on_sale' | t -}} is found in custom_badge_product_card.liquid instead of card-product.liquid. For the product page, the original line of code remains in price.liquid.
Great tutorial thank you. I have created the menu but I can't seem to get the badges to show on the products. I've definitely switched them to 'true', saved/refreshed etc. I'm using Studio Theme, could this be why?
It also works with the Studio Theme, so it might be an issue with the installation or you're using a really old version of the Studio Theme. What I typically suggest in these situations is to install a brand new version of your theme as a test area to try the re-installation again. If you get it to work this time it can help you troubleshoot to see what the problem is.
Thank you for your selfless contribution! This is a great video. I'm using the Dawn 14.0.0 theme. I followed all of your steps and double-checked everything. I noticed that the custom badge appears fine on the product card, but it doesn't show up on the product page if the original badge is not present. However, if the product is discounted and the badge appears, the custom badge also appears. Is there a way to resolve this issue? Thank you so much.
Great catch! You will need to remove the class price__badge-sale in the custom_badge_product_page.liquid file. I've also updated the code inthe linked instructions as well. Once removed it should work properly. Thank you for pointing this out.
Another great tutorial! I just tried this on the latest Dawn 14 - it worked on the collections page, but didnt show up on the products page although i picked the setting for both pages.. Any ideas what would be the reason?
It should work for the product pages too. If you changed the setting and it doesn't work, then double check whether you updated price.liquid and added the snippet custom_badge_product_page.liquid into your theme as discussed at 17:02
I think I did something incorrect in the code, I have Dawn version 15. The badge isn't displaying on the product page properly. I was doing a text badge saying "PREORDER", but instead of displaying the badge it showed text right next to the price.
I suggest you try installing a fresh new version of Dawn (as a test theme) and try again from the beginning. If you get a different result, then it's likely something in the installation process. If you get the same result, it might be a more complex issue.
@@theprompted thanks. I had made a completely new duplicate dawn theme and used that. I will try once again, but being version 15.2, could that be the reason
Okay, so to resolve it I made a brand new Dawn theme and followed instructions again and it worked. Think I pasted code wrong area in price.liquid. So I copied the whole code from price.liquid working one overwriting the current one(which still has unedited backup incase) and that sorted it!@theprompted
Yes - that should be possible but would require some additional custom development. I've put it down as a suggestion that I might add to the next version of the custom badges, but this list is getting longer each day. For now hopefully you can get by without it! But if you really want it, then you can also hire us to help you with that customization - let us know at theprompted.co/hire-us
If you're looking for a way to add products to cart from the collection page, then you can use the "quick add" option. Theme editor --> Default collection --> Product grid --> quick add
Help, it didn't worked for my dawn 14 theme, the badge didn't appear on both collection and product page 😢, already recheck the codes is correctly inside, any advice?
This solution does work with v14. If you're confident that the code was added correctly, then what I suggest is to check the custom badge settings in the theme editor and your metafields. They have to be toggled on in order to show the badges. You can see an example of turning on the badges at 15:40.
Ok what I suggest is to try again from scratch on a fresh install of your theme (ex: Dawn). This is to simply be used as a sandbox testing theme to see what you might have gone wrong in the steps. If you get a different result then you can work backwards and troubleshoot your original installation. These tutorials are meant to be DIY and I try my best to help from the YT comments (this way everyone can benefit too!) If you're interested in hiring us for personalized help, then you can contact us at www.theprompted.co.
Thank you Can you please show how we can add variant metafields to product page as variant metafields are not available on product page of theme editor.
@@theprompted Unfortunately it's not letting me to put any links but the idea is the current products have 3 metafields to show price per unit, box quantity and size which is unique to each product. when I create variant products I don't have the option to add variant metafields on the product page it only shows product metafields in the theme editor. This is a very common issue that nobody has made a video about it. Thanks for your great videos
Yup, this will do, but how about a pop-up thing that shows up after a couple of seconds, like a promotion product or subscription email thing, I love it.
But how to add a colour scheme to custom badges? @theprompted, i have error (Unable to display color schemes. Schemes must be defined in settings_data and settings_schema.) and i did everything like in your video!((((
@@theprompted i got the same problem, because on the theme the color choosing style is different theresn't the option for the scheme there's direct option. Can you help in this matter?
I am really impressed and appreciate your hard work, but I don't know why you have not added the option for dynamic text instead of an image. Alternatively, you could add both features, as text is more important than the image. Hopefully, you will add the dynamic text feature
![How To Add Breadcrumbs In Shopify - Free - Without APP - [2024]](http://i.ytimg.com/vi/xue6ePgO02Y/mqdefault.jpg)
So much respect to you for sharing this for free! may God bless you always
Thank you so much! Very clear and helpful! YOU ARE LEGEND! I even made a boo boo but due to how clearly you explain everything I was able to understand where to go to find the error and fix it!
That's great! I'm glad it worked for you :)
You are simply a star! Thank you so much Prompted - love your videos! Keep up your amazing work 🤩
Thank you! This is exactly what I've been looking for at just the right time! Really appreciate you!
@theprompted Hm, it looks like if you remove the Compare At price (which gets rid of Shopify's built-in "Sale" badge), ALL custom badges attributed to a product will also disappear on the product page. Do you have any suggestions for a workaround for this? Thank you!
Appreciate the work. Just a quick question, under custom badge, there is also "Sold out badge color scheme", what does that do?
The Sold out badge color scheme is found under the default Shopify Badges theme settings. When your products are out of stock (sold out), your theme will add a badge that says "sold out". The color scheme setting is to define what it looks like.
You're no doubt the best channel on UA-cam ✨✨
It really turned out fantastic! I had a question... Can I leave this badge in the photos on the product page too??
Thanks for the suggestion!
I'm so glad you did this, I was actually going to ask for the same thing!
Thank you so much! This was really helpful!
You're awesome, just right the time I need it and you make it, Such a great guy existed, fantastic!
Thanks a lot for giving such valuable content for free🙌🏻🙌🏻
OMG i love this so much. Thank you so much 😍
Thanks for the video!
PS: I noticed there was a mistake in the code of price.liquid instead of "settings.custom_badge_3_enable", you have "settings.custom_badge_2_enable' which makes custom 3 appear in product page when custom 2 is enabled.
Thanks for pointing this out! It's been corrected now.
Thank you for your insights and knowledge!
Brilliant, very nice customisation. Thank you so much for this video. So how does it work if I wish to add another badge for "Top Selling product" - for example? What files do I need to edit? I know I have to create a new metafield for it but what else do I need to change, could you please tell me or if you can make a new video for that, I will appreciate you. Thanks.
And lastly, can I request you do a video too for adding the Subcollection List Custom Section to the Home page please, that will complete your tutorial on adding this beautiful customisation to the MENU. I know you can make it! Thanks again and have a nice day. 🙏 🤩
There are 3 badges defined in both the code and metafields. You can copy the existing structure but change it for the 4th tag.
Great video!
Can the badge be placed above the image on the product page instead? If so, how?
Yes it can - but would require more customization to modify the code and make sure it all interacts properly.
You can try it yourself, or you can hire us to do it for you at theprompted.co/hire-us
great video, thank you!
setting this metafield to entire collection would be great,
how can i achieve this?
The best way with the current customization is to use a bulk editing tool like Hextom BPE or Matrixify and mass update the metafield for each product in your collection.
In the future, we may add a feature to add the badge based on tags.
Thanks a ton! Only thing that doesnt work for me in my Ride theme is, it doesnt allow me to select color. "Unable to display color schemes. Schemes must be defined in settings_data and settings_schema."
Try replacing scheme-5 with scheme-1 in the code
Thank you for the amazing tutorial on adding custom product badges on Shopify. I followed the steps and now have the badges active on my store-they look spectacular. However, on the product page and featured products, the default 'sale' label from the Dawn theme still appears. I've spent over 4 hours trying to disable it and keep only the custom badge, but I haven't had any success. Could you please help me with this? I would really appreciate your assistance.
I wanted to thank you for the excellent content. Thanks to your tutorials, I've managed to solve the issue I was facing. 😊
I’m also interested to know if you offer custom theme services for Shopify using Dawn, similar to the Shrine theme. What would be the pricing and details?
Thanks again for all your help and for sharing your knowledge!
Glad you like it and figured it out!
And yes, we offer personalized development work. It's difficult to provide pricing without knowing the details of what you're looking for, but we'd be happy to explore a custom project with you. Just book a call with us at theprompted.co/hire-us to discuss the details.
I am really impressed and appreciate your hard work, but I don't know why you have not added the option for dynamic text instead of an image. Alternatively, you could add both features, as text is more important than the image. Hopefully, you will add the dynamic text feature
Just... brilliant!. Thanks for share this.
You're welcome! Glad you like it
Great video! Can you please do a tutorial on how to show color clickable swatches on collection pages with a set up where the colors are not variants of the same product? I have created a separate product for each color variant, and then using your tutorial on how to combine products into the same listing, I did combine them into the same page. Thanks!
Thanks for the suggestion! Yes that's something I plan on working on, so stay tuned :)
Thank You for this tutorial, for some reason im having trouble with the product card, I copied the code from the link but for some reason it won’t show the sale badge for my item on its collection page. any ideas why?
like the product page badge is working fine its just the product card badge wont show up.
It could be a number of different reasons, so here are some things for you to check or try:
- Make sure to have the collection badge option activated.
- Make sure all code was installed properly on a valid theme (free Shopify themes like Dawn, Sense, Refresh, etc)
If these still don't work, it may be worth installing a fresh version of your theme (ex: Dawn) as a test theme and starting again from scratch to see if you get the same or different result. If you get a different result, it's likely an issue with the installation. If you get the same result, it may be a more complex problem.
Thanks, great vid but I got a error on top of my product card saying, "liquid error (snippets/card-product line 149): Could not find asset snippets/custom-badge-product-card.liquid" And it is showing this on my website instead of the badge? What should I do? Thanks in advance.
Never mind I fixed it
Great!
@@theprompted Hi, I also faced the same error, I also fixed it but now I am facing another problem that is every product card has "cus" word on it. On left middle of the cart. Kindly can you guide me.
Can you double check your product card code to see if you didn't accidentally add an extra "cus" into it - causing it to be part of the template?
Can I know how to add (last piece) badge when products only have one piece left ? i am using down theme, do you have code for this ?
This would require some custom coding, but have you checked out this video yet: ua-cam.com/video/-CJwU-ktAFY/v-deo.html ? It might help with what you're looking for.
Are you able to override the default badges with the customs? for example, I still want the "sold out" however i don't want the default design. I want to add my own design that says sold out. However, If i use the custom badge, the default badge will still appear
Yes you can do that, but will require a bit of additional coding. You would have to replace the default badge code with the custom badge code.
First of all, thank you very much for the great video, always great. I have a question for you. Could you perhaps implement this so that the badges come automatically, for example if the new tag is present in the product or the best seller tag is present, I think so You know, what I basically programmed the way you did was just based on tags
I can look into adding that as an option, but in the meantime you can use tools like Matrixify or Hextom BPE to bulk update the metafields based on different fields, including tags. I think they may even have some options to schedule jobs so that it is close to "automatic"
@@thepromptedHello, first of all I wanted to thank you for answering. I watch all your videos and think they're great. Now about me. I'm a small shop that's trying to get started and I'm trying to be as cheap as possible at the beginning. You did write that there are apps for that that can change these metafields en masse, but unfortunately these apps all cost money. Your video shows exactly what I was looking for, just as I said, not on tag fields. It would be really tricky if you could program that in, because I control everything in my shop with tags. I'd be really happy if you could bring yourself to program that in. PS you're really good and I like your videos, thanks in advance.
Thank you! I'll look into adding that feature in the next iteration of the badges.
Such a helfpul tutorial thanks!! Only problem is I am getting this error prompt for Custom Badge: "Unable to display color schemes. Schemes must be defined in settings_data and settings_schema". Any suggestions? Thanks in advance :))
Strange - sounds like your color schemes aren't properly defined. What theme and version are you using? This was designed for v13 of the free Shopify themes and might not work if you have a much older theme.
One test you could try as a test is to install a fresh new version of Dawn (or other free Shopify theme), and try the customization again. If it works, then you can work backwards to see what might have caused the issue on your theme.
@@theprompted i am having the same issue. everything works perfect except the color schemes. I am using the craft theme version 2.0.0 and for some reason says "Updates are not supported for uploaded themes". Any ideas?
Hard to know for sure, but if you're on Craft version 2, then it's likely your theme is too old and not compatible with this customization. Craft is now on version 15.
What you can do is install a fresh new version of Craft as a sandbox test theme, and try the customization again as a debugging step to see if you get a different result. If it's different, then it could be the installation or theme version. If it's the same, then it'll need further debugging.
Hi @theprompted Your tutorials have really helped me alot alot. If you don't mind can you help me with one issue that i am currently facing. In the same tutorial i want to replace the default "SALE" badge with one of your other tutorial, in which you showed how to display discount %. For example "SALE -> 20% OFF"
Can you help?
Thanks in advance.
You should be able to find the same structure of the "before" code in the new version. Make the same edits and you should be good to go.
Hi, it's me again. Unfortunately, on Dawn 14, it didn't work for me and it messed up the "quick add to cart" buttons. Maybe it's my fault; I'll try it again.
However, if you find yourself needing to update this option, here is my advice from a user perspective, and I hope it is technically possible.
I think updating product badges would be easier if text badges were also dynamic like the image ones. That way, we could get away with fewer metafields, more options, and less work.
For example, in my case, I needed badges like "pre-order," "Limited," or "best selling." Since these three would go on three different product groups, by using dynamic metafields, I could have used only one field with different inputs per product. Any changes, such as from "pre-order" to "new drop," would be much easier. I wouldn't have to go through setting up the custom badge text and setting up True and False for each metafield I'm not using for that product.
As always, keep up the great work and I wish you the best clients. You deserve them.
Thanks for the suggestion! Will definitely look at this for the new version
I have made the sale badge in "%" and I saw this video but now the percantage is not shown in product cards :/ . I have changed the "custom_badge_product_card.liqued" a little bit but there's a problem the variable "discount_percentage" Is not shown in the product cards? What should I do?
You would need to make the same edit to the badges as you did in the sale badge video: ua-cam.com/video/ZEr_vSZwo1M/v-deo.html.
The edited code from that video will also be found in this one, so the same edit can be applied.
thanks for the video! can you share how i can remove the original "sale" badge? thanks
Just note that if you do this, then the sale badge won't automatically show like it does right now if you have a compare-at price. Instead, the best way would be to replace the code below with your desired badge.
You can look for this code:
{{- 'products.product.on_sale' | t -}}
But if you still want to simply hide the current sale badge, then you can look for the code above and set display to none, ie. display: none
@@theprompted nice! thanks bro
Thank you so much! By the way, how can I apply a badge based on a certain collection instead of on each product?
You're welcome! You can use a tool like Matrixify or Hextom BPE to make a bulk update to the metafields of all products in your collection
@@theprompted thank you!
I managed to do everything perfectly, but I had configured a "sale" badge to appear in "%" and adding these new badges to the missing "%" and "sale" appeared again. What code should I add to appear the stamps plus the discount in "%"??
You can apply the same customization as previously. The new code follows the same structure as the previous code (but with some additional code around it). So search for the same line and edit it the same way.
Thank you for this addition.
For the collection page (card-product), in the portion of the code that you suggested to comment out, I have the discount percentage off showing. How do I keep the percentage off visible on the badge rather than the product card only showing the word "sale" on the badge?
I want the following to remain so that I can show the exact percentage:
{{- discount_percentage }}% OFF
It's a very similar approach to the previous video you followed (ua-cam.com/video/ZEr_vSZwo1M/v-deo.html), except you now find the original code in custom_badge_product_card.liquid and you need to change card_product.compare_at_price and card_product.price with product.compare_at_price and product.price
Okay, thank you for the clarification.
@@theprompted Thank you for mentioning it. I just applied the changes you suggested and it works perfectly!
Great! Glad it works
Wow.. I am using District theme and it has barely ANYTHING in theme editor. I got ripped off... :( there is no way to do this if theme editor does not show the badge customization area??
This video shows how to add the feature and settings to your theme (it's not there by default). This tutorial was designed for the free Shopify themes (ex: Dawn, Refresh, Sense, etc), so unfortunately it's unlikely to work with a premium/paid theme like yours.
The Prompted, I notice that the shopify default Collection or Product section that setup to swipe can't be swipe using the mouse pointer when ofcourse if using non touchscreen pc or monitor, it doesn't have scrollbar or arrow to navigate which I prefer,
Any guide on combining this with the discount % number as a badge on the product card?
You can follow the same guide as previously. Add the calculation and change the text as described in the original video (ua-cam.com/video/ZEr_vSZwo1M/v-deo.html).
However, for the product cards, the line {{- 'products.product.on_sale' | t -}} is found in custom_badge_product_card.liquid instead of card-product.liquid.
For the product page, the original line of code remains in price.liquid.
Great tutorial thank you. I have created the menu but I can't seem to get the badges to show on the products. I've definitely switched them to 'true', saved/refreshed etc. I'm using Studio Theme, could this be why?
It also works with the Studio Theme, so it might be an issue with the installation or you're using a really old version of the Studio Theme.
What I typically suggest in these situations is to install a brand new version of your theme as a test area to try the re-installation again. If you get it to work this time it can help you troubleshoot to see what the problem is.
im using 14.0.0 version of Dawn and i cant find 'Custom Badge' table under Theme Settings. need help plz
That's exactly what this tutorial guides you through. It won't be there by default, you add those settings in by following this tutorial.
Thank you for your selfless contribution! This is a great video.
I'm using the Dawn 14.0.0 theme. I followed all of your steps and double-checked everything. I noticed that the custom badge appears fine on the product card, but it doesn't show up on the product page if the original badge is not present. However, if the product is discounted and the badge appears, the custom badge also appears. Is there a way to resolve this issue? Thank you so much.
Great catch! You will need to remove the class price__badge-sale in the custom_badge_product_page.liquid file. I've also updated the code inthe linked instructions as well. Once removed it should work properly. Thank you for pointing this out.
Another great tutorial! I just tried this on the latest Dawn 14 - it worked on the collections page, but didnt show up on the products page although i picked the setting for both pages.. Any ideas what would be the reason?
It should work for the product pages too. If you changed the setting and it doesn't work, then double check whether you updated price.liquid and added the snippet custom_badge_product_page.liquid into your theme as discussed at 17:02
This also happened to me!
is there a way to only show the custom badges and not the regular "sale" badge?
Yes, but it would need a bit more code changes to replace the default badge code with the custom badge code.
I think I did something incorrect in the code, I have Dawn version 15. The badge isn't displaying on the product page properly. I was doing a text badge saying "PREORDER", but instead of displaying the badge it showed text right next to the price.
I suggest you try installing a fresh new version of Dawn (as a test theme) and try again from the beginning. If you get a different result, then it's likely something in the installation process. If you get the same result, it might be a more complex issue.
@@theprompted thanks. I had made a completely new duplicate dawn theme and used that. I will try once again, but being version 15.2, could that be the reason
We tested it out on the latest version of Dawn recently (15.1.0) and it still works properly, so it's unlikely its related to the theme version.
Okay, so to resolve it I made a brand new Dawn theme and followed instructions again and it worked. Think I pasted code wrong area in price.liquid. So I copied the whole code from price.liquid working one overwriting the current one(which still has unedited backup incase) and that sorted it!@theprompted
Is there any way to make these badges hyperlinked? Say so you can click on a “sale” badge to go to the sale part of the website?
Yes - that should be possible but would require some additional custom development.
I've put it down as a suggestion that I might add to the next version of the custom badges, but this list is getting longer each day.
For now hopefully you can get by without it! But if you really want it, then you can also hire us to help you with that customization - let us know at theprompted.co/hire-us
We need one for events
Could you elaborate? Not sure what you mean by this.
Next video please
How to add quantity and add to cart option with variants to choose for collection page is shopify dawn theme
If you're looking for a way to add products to cart from the collection page, then you can use the "quick add" option. Theme editor --> Default collection --> Product grid --> quick add
Help, it didn't worked for my dawn 14 theme, the badge didn't appear on both collection and product page 😢, already recheck the codes is correctly inside, any advice?
This solution does work with v14. If you're confident that the code was added correctly, then what I suggest is to check the custom badge settings in the theme editor and your metafields. They have to be toggled on in order to show the badges. You can see an example of turning on the badges at 15:40.
@@theprompted sry, but it still didn't appear😭 could you possibly help me take a look at my setup?
Ok what I suggest is to try again from scratch on a fresh install of your theme (ex: Dawn). This is to simply be used as a sandbox testing theme to see what you might have gone wrong in the steps. If you get a different result then you can work backwards and troubleshoot your original installation.
These tutorials are meant to be DIY and I try my best to help from the YT comments (this way everyone can benefit too!)
If you're interested in hiring us for personalized help, then you can contact us at www.theprompted.co.
Great
You are BEST 😊😊
I cant show a category badge like ''new'' only on one not on more when I click on true
Do you mean its only showing on one product but not the rest? Make sure that all the relevant products have enabled the badge.
Thank you
Can you please show how we can add variant metafields to product page as variant metafields are not available on product page of theme editor.
This should be possible, but can you provide a few example use cases so I have a better idea of what you're trying to do?
@@theprompted Unfortunately it's not letting me to put any links but the idea is the current products have 3 metafields to show price per unit, box quantity and size which is unique to each product. when I create variant products I don't have the option to add variant metafields on the product page it only shows product metafields in the theme editor.
This is a very common issue that nobody has made a video about it.
Thanks for your great videos
@theprompted We are also having the same issue.
We do have the same problem.
This is very strange that you can’t add variant metafields in product page. Let me know if you found a solution.
Thanks everyone. I'll look into this and see if there's a simple solution for it.
Wait how do we find the custom badge code to copy and paste you speed pass that part 😢
link is in the description!
❤❤❤
Sir Shopify circle Manu code mobile no slider
Yup, this will do, but how about a pop-up thing that shows up after a couple of seconds, like a promotion product or subscription email thing, I love it.
But how to add a colour scheme to custom badges? @theprompted, i have error (Unable to display color schemes. Schemes must be defined in settings_data and settings_schema.) and i did everything like in your video!((((
As a test, can you try the customization on a fresh new install of your theme (ex: Dawn)?
@@theprompted i got the same problem, because on the theme the color choosing style is different theresn't the option for the scheme there's direct option. Can you help in this matter?
I am really impressed and appreciate your hard work, but I don't know why you have not added the option for dynamic text instead of an image. Alternatively, you could add both features, as text is more important than the image. Hopefully, you will add the dynamic text feature
Great idea - I added it to the suggestions
@@theprompted thanks for your reply please let me know once the code is ready i am very excited to see it