How to Make a Clickable Banner in Shopify Dawn Theme 6.0
HTML-код
- Опубликовано: 30 сен 2024
- This video will walk you through how to make your image banner clickable in the new Shopify Dawn 6.0.2 version. There is code out there that helps make your shopify banner clickable, but it gives a t:sections error message. How do you get rid of it? Watch to find out.
🚨 I'd like to invite you to join my Digital Creators Society on Skool to have access to all of my trainings, templates, workshops, live replays, and more... deewillis.com/...
Don't forget to LIKE, SUBSCRIBE (This is my main platform) and Click that BELL🔔
👉🏽 WHERE YOU CAN GRAB PRE-MADE TEMPLATES
designdeevastu...
🔥 CODE FOR SHOPIFY DAWN THEME CLICKABLE BANNER
deevamode.com/...
🛠 RECOMMENDED TOOLS TO USE
Templates can only be edited using Canva: (FREE Account Okay) deevamode.com/...
Email Marketing Software: deevamode.com/...
Thanks for watching 🌸,
~ Dee
#clickablebannerindawntheme #shopifydawntheme
![How To Make The Image Banner Clickable [Shopify]](http://i.ytimg.com/vi/EtjKGcdo3yw/mqdefault.jpg)
![How To Make The Image Banner Clickable [Shopify]](/img/tr.png)
GIRL! YOU ARE AN ANGEL FOR THIS! It def worked for me and I'm on Dawn 11. I was about to hire someone to do this. Seriously, you saved my sanity and my wallet 🙌🏻❤
You are so welcome girl! I'm so glad it was able to help you. I know it can get pricey to hire someone to do stuff. Don't forget to like and subscribe to my channel if you haven't done so already, because I'm gearing up more tutorials in regards to Shopify and Marketing, just a heads up 😊
It worked great. the only thing id the error code is still popping up on mines just not with the drop down button
awesome. I've never had someone say the error code was still there after using the corrected code. Please be sure that you've copied all the code, and let me know if it still gives you an error. Thank you.
Thanks so much! Have you had any problems with Google and Misrepresentation? I keep getting a misrepresentation error with Google and my Shopify site?
I’m sorry to hear about that. Unfortunately, I’ve never ran across that issue.
Fucking finally! Someone who can help nice and easy - I appreciate you!
lmao you're welcome 😊
can u make a video about ur chromeextantions pls
yes, I'll be glad to make a video about my chrome extensions for you in the near future.
You are an absolute lifesaver!! I've been looking for something like this for weeks
You're welcome hun 😊
you have single-handedly resolved an issue iv had for months. iv been sat here making different size banners just so it could sit perfectly with their inbuilt trashy buttons. i really appreciate this. I am going to spend time on their website incase they have many simple codes like this. just liked and subscribed. thanks a lot.
You’re welcome
Thank you for adding this video having problems with Shopify store specifically dawn theme and the image banner
You are welcome
This was very helpful!! & to my surprise, I see my work lol. I took the pic you have in the iPhone of the 2nd image!
I’m glad you found this helpful hun. Good luck to you and much success 😊
Thanks for the script. It works great. However, on Version 9.0 it gives translation error. I wish you have newer code that can eliminate that error in editor. The site front works great.
You’re welcome. If the code is giving you a translation error it’s could be because the code is built for English translation. If you have multi-language that could be the issue just fyi
Thank You! Im using the ColorBlock theme and it still worked!
Awesome! Didn’t know it would work on a different theme
This worked perfectly on Dawn 9.0.0, thank you! :)
You’re welcome 😊
I have been struggling with this!! Thank you so much ❤❤❤
You are very welcome 💕
CAN YOU PLEASE HELP ME DO IT IN THE STUDIO theme please !!
I'm sorry hun, I'm not familiar with the studio theme. I only found out how to do it in Dawn.
@@deewillis I am searching everywhere cant find nothing :( I used yours and it worked but made the banners look weird.... so sad
@@peachytrc5375 I'm so sorry. There is an app in Shopify I believe could help. Its called section.store/ they have an app that helps with a ton of features. See if it will work on your theme.
i hope this works for 7.0 version!! fingers crossseddd
Please let me know once you put in the code. I'm interested in knowing.
@@deewillis I just try and it works, thank you so much! you earned me!
@@marcelorobles4938 you're so welcome
thank you so so much !
it worked flawlessly!
you're very welcome :) Glad it helped.
there's a way to do it in the slideshow banner too
Yes there is for slideshows
@@deewillis how do you do this for slideshows?
@@sewgirliefun the slideshow should automatically show you the option to link the images.
Does this only work for the header banner ?
It works with the image banner widgets
Code is now getting errors can you replace it please
There is now an app that does it. Section.Store that should help you
@@deewillis is it paid?
@@pubgking384 yes, I believe it's about $9 for the banner. I haven't priced it recently. But it's very inexpensive and it's one time purchase no monthly recurring.
you have save my problem. Thank you
Happy to help 😊
It worked Thank You!
You're welcome!
tysm ...youre a lifesaver
You’re welcome ☺️
Omg Thank you!!!!❤
You’re welcome
You are amazing. Definitely appreciate you for this video🥰 I subscribed💯
Thank you so much!!💕
i got an error 120th line
I haven’t had anybody have an error on the new code but if you find the solution please let me know
Thank you I think you’ve made a universal code because it worked my theme and I’m not using Dawn!!❤
You're so welcome 😊 Glad I could help!
Works on Sense too
Awesome! Glad it worked.
I love you!
Awww 🥰
Dee thank you very much! this was such a real walkthrough! super related to it
Glad it was helpful!
Unfortunately, when using this code it makes the collection images/category covers on the home page un-clickable. Have you by chance found a solution for that? The banners are now clickable, but the collections aren't.
Actually, I have. I will upload it to Github and put the code in here for you. Okay, I updated the code to the link deevamode.com/dawnclickablebanner try that. What I've found is that it gives all the banners the ability to be clicked though, if you do not enter a URL, it will not send them anywhere, and the collections still work as usual. Let me know if this helps :)
I tried to click to get the correct code but it is infected with the BLACKLIST Virus. Can you please fix or provide another link? Thanks.
I’m sorry to hear that. But that link goes directly to GitHub so I’m not sure what virus you speak of. I’ll have to reach out to GitHub or you can always go there directly and search the title and find the code as a work around if you need it right away.
Gorg you are soooo the goat for this ! This was my last step to launching my website so S/O to you.I defff subscribed
Thank you hun
thank you so much! First time I've done anything that involves coding... you made it really simple to follow
You’re so welcome 😉
it work for me, but since I'm using multiple image banner on my home page all these banners will redirect to one link the 1st link I put, I hope there's a work around here.,
Thanks for commenting. As stated the code was only created for one banner. However, each image-banner placeholder you make on the page can have it's own image with a separate link per how the code was written because it was written when I designed my client's page. Now I use Section.Store which is an app inside of Shopify.
Hi Dee! The code seems to work fine, but when I click on the banner image on my website it just goes right back to the home page. Anyone else have that issue or a reason why that might be happening. Thanks!
Hey there! I haven't heard of that issue before. In the navigation panel on the left side of your screen should be an area where you can put in the link you want it to go to. Hopefully, you've backed up your code as advised and you can try again making sure you copied the complete code. I hope this helps. You can always go back to the original if you saved a copy before making any edits.
Omg thank you! 😍
Have you an tutorial to make an slideshow clickable? 🙈
You’re welcome. Unfortunately I just did the banner because I was doing it for a client. I do not have code for slideshows.
did same what you did, but the banner is moving wherever is click. for example - if i click on products the banner still on top of it. i just want the banner to stay on landing page. pleas help ASAP
I have not encountered that issue before. Please revert your code back to the original. Hopefully, you followed the instructions and backed up your previous theme. So, everything can go back to the way it was prior to installing the code.
Best vid, Easy to follow, This vid will deeply be in my heart. Works great!
Thank you 🙏🏽
This code worked perfectly, thank you so much and have a happy new year! 😃🎆🎉
You’re so welcome happy new year to you as well 🥳
THANK YOUUUUUUUU
You're welcome 😊
Great code, but it took away the large banner height option. Do you have a solution for Dawn 8.0 version?
I do not have a code for that version as of yet. Also you should be able to adjust you banner height by selecting the adapt section height to fit image and see if that helps
Awesome - thank you for helping me fix this!! You rock!
You're so welcome :)
Hi! I already have some code work in mine Banner section. Is it possible you can only send me the code thats needed for just the link? I don't want to lose al my work
Thank you for the comment. Unfortunately, I do not supply custom code. Feel free to use this code however you see fit.
Hi Dee, i tried this process and after pasting code you provided, save button is turning grey its not allowing to save what i pasted. please suggest how to solve this. thanks
Hello there, I’ve never came across that issue before. Everyone that has used the code pretty much has done so successfully. I am not sure why the save button is greyed out. I would suggest going back to the original code or just uploading the original version of your site which if you followed the instructions you made a backup copy before implementing the code.
Does the code only work for Dawn theme? what about other theme like Gougi Theme? Hope to hear from you soon!
Hey 👋🏽 this code was made specifically for Dawn theme however others have tried it on other themes and said it worked. Try at your own risk ⚠️ but if you do make sure to save a copy of your original before hand so if it doesn’t work you can go back to exactly what you had before
Mines still not working it says the latest Shopify admin does not allow code to be injected into the code editor 😩😩😩😩
Oh wow never heard of that. The latest Shopify admin? Are you the admin or is somebody else the admin of the account? If you have limited access the admin can put restrictions on the account keeping people from messing with the code.
Love your Video!! So helpful. Worked for me :)) Thank you so much
You're welcome 😊
Keep up the great work, this was easy to understand!!!! great content i appreciate this so much💕
Thank you! Will do!
Absolute lifesaver. Thank you so much
You're welcome! 😊
It says "This site can’t provide a secure connection" when i open the link
Thanks for letting me know. It opens in github fine on my end. Not sure, never heard that being an issue before.
Your knowledge about the code impresses me I was curious if you can do the same but to the slide image banner.
Thank you so much 😊 According to my knowledge the slide banner has a link already for the slide. I don't believe they can do individual links, but I think it already has link capabilities.
OMG...God bless you!!! Thank you so much
You’re welcome 💕
Awesome, thank you so much ! Do you think if we use this method it will affect SEO?
No this has nothing to do with your seo
I used your code is funtional is not big deal if used when said error or yes>?
This code was for Dawn 6.0. It is now another version of the shopify and there is a app now, it's called "section.store" you can use it to make the banner clickable.
Absolute legend, works perfectly.
Glad it was helpful 😊
does this work for Dawn 8.0? Thank for your answer.
I believe there was a person who stated that the code also worked for the present Dawn.
Would you like to help me in refresh theme clickable banner ?
Sorry I’m not familiar with refresh theme
OMG...God bless you!!! Thank you so much 💖
You’re welcome ☺️
do you have to keep on updating the code as shopify updates the site theme versions
Not that I’ve heard
Yes, you understood the assignment! yes thank you for this
Glad it was helpful!
This worked great, thank you so much!
You’re welcome
Code is now getting errors can you replace it please
There is an app in the app store that now does this it's called section.store.
can you do an updated version of this video? i have the error from 8:40
Take the code from the description area and try that one. In the video at 8:40 is where I showed the code that doesn't work, the code that most people find online. If the code in the description doesn't help you let me know. Thanks for watching 💕
hey! thank you for this. what size banner did you use?
You’re welcome. I used 2400 x 1150 pixels for the large banner.
Fantastic video! Do you have a code for 8.0?
Thank you. From the comments of others I hear this code is like a universal code. Just save your original code and try it and see if it works for you.
all i had to do was make a page for each banner and then it will direct you to it
That’s awesome 👏🏽
Hello thanks for the solution mam the code works very well but I am still facing a problem on my client's website that whenever I upload the image it shows a blank white space in the section my uploaded image is not visible. I am using the dawn theme version 7.0.1 can you help me out for the same.
Thanks in advance
I’m not familiar with that but the best solution I have would be to use section.store it’s a Shopify app that is now put that helps with this.
@@deewillis Okk 'will look into it thanks again for the help
missing error show in my DAWN 10.0.0
I'm sorry to hear about that. I've seen the error show if the language is not english. It was only coded for English, no other language code. Is the error missing a translation code in another country?
Hi, thanks for your very useful infor. Would this code work for Dawn 7.0.1 you think?
It should based on what others have been saying just backup your site first before trying
It should based on what others have been saying just backup your site first before trying
Got the same error 8:40 , I copied your code
Thanks for trying the code. It could be outdated now even though others have used it depends on you country and if you copied all the code. If you followed all instructions you should have a copy of your original site just activate the original site. I hope that helps
Thank you, thank you, thank you! SOOO helpful.
you're welcome
Can you please do this for the new updated 9.0 Dawn theme version? i just found you this morning and i am so stuck nothing is working. I am stressed. Please
Did you try using this code? I believe one of my subscribers stated it worked for the 9.0 be sure to make a copy of your theme first before trying the code though.
hey, i jst used it for 9.0 and it worked fine. Hopefully you are able to get it working
tried this same code on sense theme - worked like a charm!
Glad it worked 😊 thanks so much for letting me know
Fantastic video! Thank you
Thank you
Thank you so much, worked fro me : )
You are welcome 🤗
Hi, can this be done for two images on the same banner?
No. This cannot be done for 2 separate images. Only 1 image. You may want to look at the slider instead of a single image. This is only for single images.
thanks from brazil!
You are welcome 🙏🏽
Thank you, great tutorial
You’re welcome ☺️
Thank you for your help 🙂🙂
You're welcome 😊
Thank you for your help
Happy to help 😊
I added the code and now I am getting blue under-lines. For example, in the image with text section, both the header and text blocks have the blue underline. Is this due to the tag? How do I fix this?
I'm sorry to hear this. It appears that you keep having trouble. First you stated the code link wouldn't get you to github, now you appear to be using the code provided in the wrong section. The code provided is a basic code to make the IMAGE BANNER section clickable for the DAWN theme only. Are you using the Dawn theme? Are you putting the code in the correct section? Did you copy/paste all of the code correctly? Because it sounds like something is going on with the image with text section.
@@deewillis I added the code to the banner image, and I also added this code to Image with Text section and that's when I started getting the blue underline and sometimes blue font. Could it be that the code was added to the wrong place in Image with Text?
@@Smiley1311 yes, you added it to the wrong section. That code was written specifically for the image banner, not anywhere else. Do not place this code anywhere else but the image banner it will not work properly if you do.
thank you! keep it up, love
Thank you! Will do! 😊
This was very helpful!
Glad it was helpful! 💕
¡Thanks from Perú!
You're welcome
thank you so much. what size this banner should be in Canva? thank you
You're welcome. So far as banner sizes. They can be different and it depends on what you want. The example banner in this video, which I designed for a client was 2400 x 1150 px, which I consider to be a large banner size. I hope this helps.
@@deewillis thank you so much
@@eatdrinkandtravel5190 You're welcome :)
thank you it helped a lot👍
Glad it helped 😊
THANK YOU SO MUCH!!!!!!!!!!!
You’re welcome ☺️
thank you so much dee :)
You’re welcome 💕
Thank you! I still have 1 problem. If I want to have text in my image it appears with a purple underline on it! Can you help me fix it please?
I tried to put a {
text-decoration: none;
} in the image-banner.css but only my text is clickable now. Any tips on how to work this around?
Unfortunately at this time I haven’t come across a code for that. The text will be clickable, as I explained in a previous comment. However, most people who use this code has an image with the words in the image. That’s the real purpose of it. To have the image itself clickable for those who make images that includes the words on it for example “shop now” or something like that. The code for section-image-banner.css... enter the following code:
a {
text-decoration: none;
}
Will only take away the purple ugly line, but text will still be clickable.
@@deewillis Thank you, thank you! So Helpful
@@deewillis Newbie here! Where in the line of code do I enter the text-decoration: none? Can you reference a code line #? Thank you!
@@ghostrunneron There is no specific code line you put it on. You just put the entire code a {
text-decoration: none;
} in the image-banner.css. You can insert it between other codes you see, just do not break the brackets to this code or any other code in the file. If you need coding assistance, I would highly recommend you hire a shopify developer to assist you. I hope this helps :)
Thank you for the tutorial. I am having another issue. Do you by any change have a tutorial on how to change the background image? All the ones I've seen seem to be outdated.
No I don’t but I can make one for you
I would really appreciate that love.
@@jaebell2856 I’ll try to get out out by Thursday 2/16
Great, thanks love!
THANK YOU SO SO MUCH!!
You’re welcome 💕
Thank you
No problem 😉
THANK YOU!!!!!
You’re welcome ☺️
I love you 😍😍😍
Thank you 💕
hi, I tried this and it magically worked! thank you! however, for my other banners that I need the texts and buttons, purple underlines are showing on those texts. any idea how to remove it? thank you
Go to your Shopify code editor and search for section-image-banner.css... enter the following code:
a {
text-decoration: none;
}
and that should make those lines disappear, but the text will still be clickable.
@@deewillis that worked! and you are right, the text are clickable. however, I can't seem to edit the link it should go to. any idea on how i can also customize the link for the text? thank you!
@@Clawrid Glad it helped get rid of the ugly purple line 😉, but that would be a little bit more complexed to customize that link. The code I provided just allowed you to hide the link line in all image banners only. That's why you placed that code in the image banner css file. So, it only effects the image banner section. To make each and every image banner text point to a specified link would be a lot of work. It would probably require an entire template to be created, and I don't do templates, I can just make customizations with my coding knowledge.
@@deewillis makes sense, thank you! I hope we can atleast not have that text clickable. thanks again
@@Clawrid I’ll work on the original code again. I think it makes everything in the image banner a link I think ill try going through the code again to see if there is something I can do about that for the future 😊
Great video! And all so clear! I am using Dawn 7.0.1 and when I put this code in I lose the ability to upload a separate mobile image, is there a way to maintain a mobile image? This is primarily where I need the image banner to be clickable. Thanks!
Hey thanks for the comment. Since this video there is a Shopify app called section.store that does amazing things I highly recommend you check them out for what you’re trying to do.
awesome! thank you so much for the tip, I'll check that out!
@@deewillis
well, I took a look around and I don't see anything in the banners that allows them to be clickable :( I think I'll just have to keep trying to modify the code, appreciate the help @@deewillis
@@elizabeththomas-c8d I'm sorry. I thought that the section.store would be able to help you. Try this link here: section.store/pages/banner that should be the app to help make your banner clickable for shopify.
@@elizabeththomas-c8d also here is the list of all of the different sections that come within the app. You would look at the one that says "Banner Image" closer to the bottom. section.store/pages/all-sections?_bt=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaEp6WldOMGFXOXVMbk4wYjNKbEJqb0dSVVk9IiwiZXhwIjoiMjAyMy0xMS0wMlQwMjoyOTowNy43NTdaIiwicHVyIjoicGVybWFuZW50X3Bhc3N3b3JkX2J5cGFzcyJ9fQ%3D%3D--ebdedd472b222097a07bee0e2d494dab42486b32
Thank you for sharing this. Can you make a video on how to make slideshows clickable on Refresh theme?
You're welcome 😊 Unfortunately, I am not familiar with the Refresh theme at this time. I only really work with Dawn because it's the base theme for customizing Shopify Themes.
@@deewillis Thank you so much for your answer. I appreciate it.
@@julissaturbibautista2644 You're welcome sorry I couldn't be of further assistance.
Hello, I have refresh theme and I used this code and guess what - It worked!! Thank you!. As mentioned earlier, looks like you have made universal code.
@@nikiteshmundada6160 That's good to know! I'll give it a try. Thank you!
Is update to dawn 9?
From what others have said it works so all I can advise is that you save a copy of your current them and try it
It works, I just did it on Dawn 9.0.0 :)
@@bubignr awesome! Somebody said they think I created a universal code, lol because it also worked I believe on another theme other than Dawn too. (But I wouldn't recommend that)
Hi Dee, Your code is a lifesaver, only i'm from the Netherlands and the language of the shop is NL/ Dutch and now i'm getting this error; MISSING TRANSLATION: "T:SECTIONS.IMAGE-BANNER.SETTINGS.HEADER.CONTENT" IS NOT PRESENT IN ANY OF THE ["NL-NL", "NL", "EN"] SCHEMA LOCALE FILES
How to fix this?
Oooh that’s why the code doesn’t include the language of the country your in I made it for USA
You’ll need additional code added I would just hire someone to add the necessary part of that code
@@deewillis Is it doing harm? Or is it only optical in the backend?
@@davidmaas7953 It just shows in the backend here in the states. It's just not good to have it there if you're building the site for a client, but for yourself it should be fine. Let me know if it's something different.
tbh, for future videos. just skip straight to the point! nobody tryna know about your life story and what you do for a living. Just jump straight to the purpose of the video. Save everybody some time. We live in a fast and competitive world. As i finish completing this comment. you still haven't shown me how to make my image banner clickable.
Feel free to fast forward to the section you need and grab the code. I hope it helps. Thanks for your feedback 😊