At 07:38 also add the CSS property { pointer-events: none; } so that our badge doesn't interfere with the clickable area of our product card! Learn more here: www.w3schools.com/cssref/css3_pr_pointer-events.asp
HI! Thank you so much for the tutorial. It is working great on mobile, but for the life of me I cannot get it to appear on desktop. There is a hidden inherited value I cannot find anywhere, @ media screen and (max-width: 991px). Any help would be greatly appreciated. Thank you, Heather
Great to hear! Open up your console while viewing your site with Ctrl shift c, and find the element in your html, click on it, and see what CSS rule is taking priority by checking and unchecking styles. Then have your style take priority by being more specific with your css or by adding !Important. Good luck! www.w3schools.com/css/css_important.asp
Hey Sean. Really nice tutorial and was really looking forward to do this but kinda lost you at 3:30. Iam using Debut and have no idea where to put your code??
Sorry I missed this comment! Yes, that is one of the more confusing parts because some themes may or may not render another snippet file within the section file we are in currently. what you'll have to do is keep placing 'test' text in different areas until you find the right spot, as I'm not sure off the top of my head how debut structures their files.
Great. A great step by step tutorial. I like it a lot. I only have to find out why positioning the badge is not working 100%. Even with top: 0px the image is on 2/3 of the image.
Great video! I've used this and been able to add a badge to my website. However, I'm wondering what coding would I need to tweak to add more than one badge to an image please? I'm wanting a 'recently added' badge and a 'new with tags' badge, but with the coding, they are both working but only showing one badge instead of both. Both badges are on different positions within the image too so they aren't overlapping. Appreciate any advice. Thanks, Emma
Hello! This video tutorial was made using Dawn as an example, so there shouldn't be any issue following the tutorial with Dawn's current version either! Is that what you are referring to?
Like and subscribed, I really don't understand why TH-cam didn't give you more traffic, really want to see your new video soon!! maybe you should dome seo for you video to get more traffic?
Do you know how i can add a custom sold out badge? i dont like the dawn theme default one. Already designed my own badge just don't know how to replace the defult.
Happy to help! Instead of using the 'left' property in your css, you can use the 'right' property! To center, you may have to try something like this: stackoverflow.com/questions/25982135/why-does-left-50-transform-translatex-50-horizontally-center-an-element
Hey Seán ! Just discovered your channel and your video helped me a lot ! I am stuck at the "final touches" part at 10:46. I really don't understand how to find the right snippet access in order to make the tags functional. Could you please help me figure out? Thanks!!!! 😊
Glad I've been able to help! Depending on your theme, The area that loops through products could be a separate snippet file or within the same file, try searching your file for the word 'for' or 'render' and see if you can find it!
Hey Seán! thank you for this tutorial! i however ran into a problem, everything is set up nicely but the positioning of the badge is only visible on my desktop? when i access it on my phone it doesn't show. is there a different position value that makes it stick in the same position within the product image on desktop and phone view? Thank you again for the video, it was really helpful!
Thanks! Depending on how your theme is handling the mobile view it could be rendering a completely separate section when the screen size is below a certain threshold. Double check that you don't need to include the classes in another section of that file.
No problem! It is pretty much the same set up, you will just have to find the file pertaining to the image that is rendered on the product page, and set up some {% if %} statements that conditionally add the classes you set up for each badge.
Another great tutorial! Thank you, I love my new item badges!! :) The location of the badge changes when viewed on mobile though. How can badges be formatted to appear in correct location on mobile also?
Glad I could help! Depending on your theme, it is possible the "position" or "top" "left" "right" "bottom" properties of the element you chose to add your badge to changes when the screen size goes below a certain width. Open your browser inspector ctrl+shift+c (in chrome) and view your window at a smaller size (ctrl+shift+m) to simulate a mobile device. As you are adjusting your screen size pay attention to any media queries that may trigger and may be adding now positioning properties to your element. Other than that, be sure you have set the width and height of the badge to a percentage so that it scales appropriately!
Hi Sean! Thank you so much for this tutorial! I've been successful in creating the badge and having it show up in the the corner of each product but have ran into a problem. I've added the badge tag to each product where I would like the badge to show up but what happens now is the graphic of the badge shows on all products and only the badge name show above the products that have the badge tag. Is there any way to solve this? Your assistance will be much appreciated!
Hello! Based on what you are describing there is either an issue with your logic with the if statements you set up, or within the CSS. Make sure you don't have any typos anywhere as that will cause your CSS to not work!
Hey Sean, would you be able to do a video on adding an option in the slide draw cart for Shipping Insurance? I would think it would be simple as tying it to a hidden product called 'Shipping Insurance' but I am completely lost. haha Would you be able to direct me to info on this perhaps?
Hello! Try following this tutorial here if you are on an older theme: help.shopify.com/en/manual/online-store/themes/os/customize/add-gift-wrap-option Or, you could even try a library like this if you are using a new theme that the tutorial above won't work for: cartjs.org/ I'll be making a tutorial on Cart.js soon!
At 07:38 also add the CSS property
{ pointer-events: none; }
so that our badge doesn't interfere with the clickable area of our product card!
Learn more here: www.w3schools.com/cssref/css3_pr_pointer-events.asp
New subscriber here! Great tutorial
Love this tutorial Sean
Thanks Jim!
Awesome. Thank you very much for the tutorial it has helped me wonderfully.
Great video - exactly what I needed to know, explained clearly. Many thanks!
Happy to help!
This was a huge help. Thank you!
I LOVE your videos, thank you!!!
Thank you!
Liked and subscribed. Keep up the great work!
Thanks for the sub!
Liked and subscribed. Great content. Many thanks for sharing!
Thank you!
920 subscribers....slow and steady...keep it up...
Thank you very much!🤗
That was awesome
I can't click or go inside a snippet, please help 3:45
Thank you!
HI! Thank you so much for the tutorial. It is working great on mobile, but for the life of me I cannot get it to appear on desktop. There is a hidden inherited value I cannot find anywhere, @ media screen and (max-width: 991px).
Any help would be greatly appreciated.
Thank you,
Heather
Great to hear! Open up your console while viewing your site with Ctrl shift c, and find the element in your html, click on it, and see what CSS rule is taking priority by checking and unchecking styles. Then have your style take priority by being more specific with your css or by adding !Important. Good luck! www.w3schools.com/css/css_important.asp
Hey Sean. Really nice tutorial and was really looking forward to do this but kinda lost you at 3:30. Iam using Debut and have no idea where to put your code??
Sorry I missed this comment! Yes, that is one of the more confusing parts because some themes may or may not render another snippet file within the section file we are in currently. what you'll have to do is keep placing 'test' text in different areas until you find the right spot, as I'm not sure off the top of my head how debut structures their files.
Great. A great step by step tutorial. I like it a lot.
I only have to find out why positioning the badge is not working 100%. Even with top: 0px the image is on 2/3 of the image.
try setting the height and width of your image to a set pixel amount!
@@seanmythen yesss, with a bit of trail and error to find the right mode between desktop and mobile
Missing your new tutorials 😢
I'll be back soon! I have a few more videos planned, I just haven't had the free time to record the last few months!
Great video! I've used this and been able to add a badge to my website. However, I'm wondering what coding would I need to tweak to add more than one badge to an image please? I'm wanting a 'recently added' badge and a 'new with tags' badge, but with the coding, they are both working but only showing one badge instead of both. Both badges are on different positions within the image too so they aren't overlapping. Appreciate any advice. Thanks, Emma
Hey @seanmythen great video - was wondering whether you had an updated rundown for Dawn 2.0? Unfortunately it's all on its head now.
Hello! This video tutorial was made using Dawn as an example, so there shouldn't be any issue following the tutorial with Dawn's current version either! Is that what you are referring to?
Hey Sean, 2.0 code base is quite different nowadays!
@@Sam-hg3gu what issue are you running into specifically? I can try and provide some direction here!
Like and subscribed, I really don't understand why TH-cam didn't give you more traffic, really want to see your new video soon!! maybe you should dome seo for you video to get more traffic?
Thank you! I'm working on a new video that should be coming out next week!
Dang...this didn't work for me. I got the text to show up but my custom badge would not.
Do you know how i can add a custom sold out badge? i dont like the dawn theme default one. Already designed my own badge just don't know how to replace the defult.
Hey Sean, I just want to be thankful for making my day easy.
I have one query, how to float the badge to the right side or center it?
Happy to help!
Instead of using the 'left' property in your css, you can use the 'right' property!
To center, you may have to try something like this: stackoverflow.com/questions/25982135/why-does-left-50-transform-translatex-50-horizontally-center-an-element
Hey Seán ! Just discovered your channel and your video helped me a lot !
I am stuck at the "final touches" part at 10:46. I really don't understand how to find the right snippet access in order to make the tags functional. Could you please help me figure out? Thanks!!!! 😊
Glad I've been able to help! Depending on your theme, The area that loops through products could be a separate snippet file or within the same file, try searching your file for the word 'for' or 'render' and see if you can find it!
Hey Seán! thank you for this tutorial! i however ran into a problem, everything is set up nicely but the positioning of the badge is only visible on my desktop? when i access it on my phone it doesn't show. is there a different position value that makes it stick in the same position within the product image on desktop and phone view? Thank you again for the video, it was really helpful!
Thanks! Depending on how your theme is handling the mobile view it could be rendering a completely separate section when the screen size is below a certain threshold. Double check that you don't need to include the classes in another section of that file.
Can you please post a tutorial on how to add free shipping badges or money back guaranteed badges on store front? Thank you
Thank you for a great tutorial. How can I add a badge on product page as well? Should I use different product tag to make it successful?
No problem! It is pretty much the same set up, you will just have to find the file pertaining to the image that is rendered on the product page, and set up some {% if %} statements that conditionally add the classes you set up for each badge.
Very helpful video.. Any workaround if I want to add multiple badges to same products or different badges to different products?
Another great tutorial! Thank you, I love my new item badges!! :) The location of the badge changes when viewed on mobile though. How can badges be formatted to appear in correct location on mobile also?
Glad I could help! Depending on your theme, it is possible the "position" or "top" "left" "right" "bottom" properties of the element you chose to add your badge to changes when the screen size goes below a certain width. Open your browser inspector ctrl+shift+c (in chrome) and view your window at a smaller size (ctrl+shift+m) to simulate a mobile device.
As you are adjusting your screen size pay attention to any media queries that may trigger and may be adding now positioning properties to your element.
Other than that, be sure you have set the width and height of the badge to a percentage so that it scales appropriately!
@@seanmythen Got it! 🙌 Thanks again!!
after the shopify 2.0 update the development work reduce or not.
This tutorial was made using the Dawn Theme which is a Shopify 2.0 theme! But this tutorial will work with any theme!
Hey Sean! Would love to partner with you - what's the best way to reach you?
Hi Sean! Thank you so much for this tutorial! I've been successful in creating the badge and having it show up in the the corner of each product but have ran into a problem. I've added the badge tag to each product where I would like the badge to show up but what happens now is the graphic of the badge shows on all products and only the badge name show above the products that have the badge tag.
Is there any way to solve this?
Your assistance will be much appreciated!
Hello! Based on what you are describing there is either an issue with your logic with the if statements you set up, or within the CSS.
Make sure you don't have any typos anywhere as that will cause your CSS to not work!
does this work with the new refresh theme?
Yes it does!
Hey Sean, would you be able to do a video on adding an option in the slide draw cart for Shipping Insurance? I would think it would be simple as tying it to a hidden product called 'Shipping Insurance' but I am completely lost. haha Would you be able to direct me to info on this perhaps?
Hello! Try following this tutorial here if you are on an older theme: help.shopify.com/en/manual/online-store/themes/os/customize/add-gift-wrap-option
Or, you could even try a library like this if you are using a new theme that the tutorial above won't work for: cartjs.org/
I'll be making a tutorial on Cart.js soon!
@@seanmythen I’ll check this out! I’m on a 2.0 theme rn, but any insight helps. I’m looking forward to the video!
Good luck! Let me know if you have any questions!