I just discovered your channel today and I am already loving it. Thanks for sharing your knowledge. I am a shopify designer (not a code expert) and your simple instructions are so easy to follow and really a life saver. Please dont get tired of making videos like these. Thank you very much and God bless.
You're very welcome and thank you for the nice words, All my video require heavy testing to make everything works perfect (unlike other tuts) but few people notice and leave comments like yours so i appreciate your comment and its my pleasure that i was able to help you. Cheers
i just found your channel a couple days ago and it's honestly one of the best! your tutorials are easy to follow and applicable. i hope you get more subs!!!
@@OnHOWGuy Thanks a lot Brother but I still have an issue as I'm working on the Refresh theme can you tell me where I should put images to view for mobile display.
this is the bext code i have ever edited, super simple and effective, i feel greate after editing code for my shopify store all day long. thank you - Anas
please share insights about banner size in pixels for both desktop & mobile. Should we design 2 banners with different sizes or 1 will do the job for mobile and desktop?
I do it as described in the video. But when I refresh my page afterwards, my banner is not fully displayed. If I change the banner height in the settings from adjust to first image to the middle, it doesn't work. Can you please help me. The same applies to the mobile version
Select banner height - adapt to first image, then scroll down to mobile layout and untick both ‘stack images on mobile’ and ‘show container on mobile’, that should fix it
Thanks for the video. This method though loads both images with is not so SEO friendly. I wish you would teach how to load image with only one img tag.
When the page is in desktop view I’m getting the two image view, though the mobile image is not displaying, it’s just a grey space. Is there something more I need to do?
Thank you for sharing! I did have one issue with running this code. The desktop banner image is loading blurry since implementing the code. I thought it was a shopify issue but they raised the issue with the code. Is there a way to fix the quality of the image loading with the code supplied? Appreciate any support
Hello! I have used this code and works amazingly. However it also hides the 'slideshow' and there isn't an option for a second image. Would you mind helping with this. Thank you kindly.
I just noticed this now, a year later... Shopify has added the option to incorporate two images. When I uploaded the second image, it displayed in a left-right layout (just like the one shown in your vid 7:42). How can we set the second image as the mobile version? Thanks in advance!
I love you too, You're very welcome brother and glad i could help, Good luck with your product and no worries a lot of videos on the way and they should help too. Cheers
Hi everyone - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this: 1. Delete the CSS from this video to avoid conflicts. 2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining. 3. Copy this code into the Custom CSS section of your banner image: @media only screen and (max-width: 768px) { .banner { display: none; } } 4. Duplicate the banner image and replace the image of the second banner image section to your mobile image. 5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’. 6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done! I hope this helps!
Hello, thank you very much for the video. I must say that I thought this would solve my problem, but once I applied what you say, the images began to look very distorted, I contacted Shopify support and they tell me that this code generates some conflict that makes them look like this. So, although I can configure an image for the mobile and another image for the computer, since they looked so distorted I had to leave a single image for both again. 😢
hey man! thank you for the method as it ends up working! my only issue is, after around 15 minutes, my desktop banner becomes so blurry that it looks horrible. desktop is 2300x800, mobile is 700x700. I have to used medium size banner because if I have "adapt to first image" it makes the banner on mobile look horrible. do you have any recommendations for what I can do to prevent my banner from being blurry. I cannot have a blurry banner as it makes my website look highly unprofessional
Hey, you're welcome. I got that fix requested here before but without implementing this trick so you might have to wait i'll make a video for fix for it. Is the blurrry image occurs on both mobile and desktop ? also what theme are you using ? Cheers
@@OnHOWGuy hey! Many of your videos are helping me a lot to create a good website. The only one that did not work is this one, same issue with the blurry banner from the desktop
@@enzovillalon4133 Yeah i just saw this now and i will work on it. Its hard to find a solution or a trick that would work for every theme/version and each person uses different themes and versions so put yourself in my shoes. Cheers
hi! this worked perfectly for banner images but I'm not having a second image option for slide show and so slideshow images are not showing in mobile, any suggestions?
This man just elevated my store 100%! I tried doing this a month ago with another channel and it took so much code, an in the end the resolution for the mobile was blurry(other people had the same result) so wasted my time.
All my videos are genuine and with heavy testing and very few people leave comments like yours appreciating the work so i appreciate you and thank you. Cheers
Hi Anas, thank you for this video. I applied this fix and it did work to get the separate images to display for desktop vs. mobile. Awesome! However, now that I've applied this code, the first image (the desktop one) is a little blurry. It is no longer as sharp as it was before adding the code and the second image for the mobile version. Have you come across this before and do you happen to have a fix for this? I found a different solution from another UA-camr, but his fix is more complicated than yours, so I'm hoping to get yours to work. Thanks again.
How do I put a different video for the mobile app and Desktop app. The Video I put for Desktop app doesnt look the same on mobile and Viceversa. How Do I fix this?
Hey, I discovered that since I have a slideshow section on my store, adding this code couses the background images not to render on my slider due to the media display none, is there maybe a possible fix for this?
I was able to copy and paste the code and it did add the Mobile layout option to my theme editor. However, I still only see one option for images. There is no container for "second image"
PLEASE HELP!!! My website is almost ready, but every time i use a different image on desktop, the mobile version gets reduced to a small header!! please help!
It does work but unfortunately when I download the second image ( the one for mobile) the definition of the first picture (the one for desktop) changes and become pixellated. Does anyone has this issue?
@@NavigoCross Hey. I did find a solution that I use (this is Dawn theme). It is not perfect for it affects the size of the image, although it fixes the blurry-ness of the image and I made it work for me. Go to image-banner.liquid. Scroll down to the around the 45th line. You should see these 4 lines: 1 else 2 assign half_width = '50vw' 3 assign stacked_sizes = '(min-width: 750px) 50vw, 100vw' 4 endif Now change both of the "50vw" values to "100vw" instead. That worked for me. Hopefully it helps you.
great work! but i am facing a problem. when i am adding first image it is looking good in the desktop view but as soon as i am adding the second image the desktop and the mobile are getting divided meaning that both in the mobile view and desktop view it is showing me both pictures half half.
I have a question. Does Aurora Theme support if I want to change the Image banner in my collection page? like i want to have different image banner per collection. is that possible?
Works perfectly bro! There's one thing I need to know and I couldn't find anywhere. How to set a vertical image for mobile? Like... different image format/size for desktop and mobile (horizontal for desktop and vertical for mobile). I understood what you said on the comments about see the next content below the banner, but I really need a full screen image on mobile. Could you help me please?!
Hi bro! Is it possible to make some adjustments in the code so that the banner on mobile adjusts to the original size of the image? I really need a vertical image on mobile and I haven't been able to do that yet. :(
@@alexandreoliveira7449 Hi - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this: 1. Delete the CSS from this video to avoid conflicts. 2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining. 3. Copy this code into the Custom CSS section of your banner image: @media only screen and (max-width: 768px) { .banner { display: none; } } 4. Duplicate the banner image and replace the image of the second banner image section to your mobile image. 5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’. 6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done! I hope this helps!
hi, what if I want my image banner on mobile to be a different height to what it is on desktop? I can show different images thanks to your code but I want the different images to be different heights. Shopify has 'adapt to first image' in customise settings but no option to adapt both images to their image height. Can you help?
hey! ive watched your youtube video. now i have the problem in my theme there isnt a section-image-banner.css ... what can i do to still use a different picture for my store? thanks in advance ❤
Thank you so much for your support! That’s really amazing how easy you present the things! I only have one issue: after implementing this code the picture on the desktop is blurry. How could I fixe it?🙏🏻
Hi - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this: 1. Delete the CSS from this video to avoid conflicts. 2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining. 3. Copy this code into the Custom CSS section of your banner image: @media only screen and (max-width: 768px) { .banner { display: none; } } 4. Duplicate the banner image and replace the image of the second banner image section to your mobile image. 5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’. 6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done! I hope this helps!
I followed everything in the video, but when I go to the mobile version, yes, a new image is there... BUUUT my text and buttons are above the image, not on the image like they should be. Any way to fix this? Thank you!
Can you please explain how you do this with the original theme you had in place? My video does not suit on mobile and would love to have a different size video on mobile!
That is such a simple solution! It worked perfectly for me on Sense theme. I’m wondering if there’s any way for this to work when using a slideshow rather than an image banner section? But if not that’s fine, it’s well worth having a static header to have it look good on mobile and desktop. Thank you for making this video!
Oh I'm using this on refresh theme, and I couldn't be able to figure out where I should put the image for mobile view , as refresh theme also have slide banners
This is not working for me.. my first image is set on Adapt to fit image and the mobile one then is huge... both are super blurry but are high quality... any advice??
When i do this - It makes my desktop banner blurry - Why would this be happening? - The banner is HIGH res and looks perfect until i edit the code, please advise - Thank you.
I’m using the dawn theme. For my banner images, I replaced it with the slideshow option because I have multiple pictures I wanted to use interchangeably. But the size isn’t right. It just zooms in on the image when I put it in mobile version. Thanks 🙏🏼
Hello Elena, im afraid you might have to wait as i just made a code to adjust the placement of banner image but i didn't record the video yet. I will work on it now. Cheers
Hi everyone - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this: 1. Delete the CSS from this video to avoid conflicts. 2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining. 3. Copy this code into the Custom CSS section of your banner image: @media only screen and (max-width: 768px) { .banner { display: none; } } 4. Duplicate the banner image and replace the image of the second banner image section to your mobile image. 5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’. 6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done! I hope this helps!
@OnHOW it didn't work for me, it worked on the phone section but on the pc it still divided in two, when I uploaded the image and slider images disappear on mobile view
I tried this and it worked which is amazing, however it causes my desktop banner to become blurry and really low-res looking. Has anyone else encountered this issue & have any suggestions?
Hi 👋 Do you already have a video on how to add an “image banner” to a theme - any theme? I’m using the old Debute theme on Shopify. And it has no option for an image banner like the theme “Dawn” has. Their customer service could not tell me how to add the banner or code it. My question sounds too simple for them not to have a solution, maybe you do? TY!
I do have a solution for everything haha, thats unfortunate. You can try downloading the current dawn theme as a zip file then add the section image-banner.liquid and the asset section-image-banner.css manually in file editor and see if that would show up in the theme editor. Its difficult for me to say if its 100% going to work because i cant the current theme code but its worth trying. Cheers
Hello! This was super helpful, I used the new code you gave however it made it so that my text was also transparent! So now there is no header at all showing, wondering what I am doing wrong. Thank you!
Hi @onHOW when I upload an image to the desktop banner, the quality looks great. However, after I upload an image for the mobile section, the desktop image loses quality. I’m not sure why this is happening, could you help me with this?
Thats strange, did you check with different browser, what theme/version are you using ? Please let me know in new comment as its difficult or me to see replies now. Cheers
Hi this is so helpful thank you for making the video. I have question, how about my banner is a slideshow ? would the size be changed with the code that your provided ? thank you so much
@@RebecaAguayo-n8n Hi - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this: 1. Delete the CSS from this video to avoid conflicts. 2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining. 3. Copy this code into the Custom CSS section of your banner image: @media only screen and (max-width: 768px) { .banner { display: none; } } 4. Duplicate the banner image and replace the image of the second banner image section to your mobile image. 5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’. 6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done! I hope this helps!
Hi, when I searched by the file name nothing come up and it’s empty under the Asset section, I tried to create a new css file and paste on a blank page it doesn’t work, please advise what to do.
This worked really well! Except, does it not work for the slideshow images? Is there another way to have the slideshow images to adapt to the mobile version?
I have a video on the way for adjusting banner image but not sure about the slideshow. What theme/version are you using ? Please let me know in a new comment as its difficult for me now to see replies. Cheers
Hey man! The code worked perfectly but I am seeing an issue with fitting my image in both mobile and desktop version using a canva design. I have tried to set the recommended image sizes and it is not working. Any insight?
Your videos are amazing. Thank you! But something went wrong for me here. I copied the code correctly and went through each step several times. In the end, only half of the image is displayed on the desktop and cell phone. Can anyone help me?
![How To Make Slideshow Clickable in Shopify [Dawn Theme]](http://i.ytimg.com/vi/hFAGSF6KJLc/mqdefault.jpg)
![How to Make Your MOBILE Shopify Store Look Better [QUICK TIPS]](/img/n.gif)
I just discovered your channel today and I am already loving it. Thanks for sharing your knowledge. I am a shopify designer (not a code expert) and your simple instructions are so easy to follow and really a life saver. Please dont get tired of making videos like these. Thank you very much and God bless.
You're very welcome and thank you for the nice words, All my video require heavy testing to make everything works perfect (unlike other tuts) but few people notice and leave comments like yours so i appreciate your comment and its my pleasure that i was able to help you.
Cheers
I think that's happen because you assign animation behaviour to the image
i just found your channel a couple days ago and it's honestly one of the best! your tutorials are easy to follow and applicable. i hope you get more subs!!!
Brother I'm from Pakistan 🇵🇰 and I'm watching your video for 2nd time butt from now you will be my idol❤😍
Hey brother, much respect to Pakistani people.
Thank you and i appreciate that, your words mean a lot actually.
cheers
@@OnHOWGuy Thanks a lot Brother but I still have an issue as I'm working on the Refresh theme can you tell me where I should put images to view for mobile display.
bro you are the goat, because of you i didnt have to pay for any of the things i wanted to do on my shopify store! instructions are easy and precise!!
this is the bext code i have ever edited, super simple and effective, i feel greate after editing code for my shopify store all day long. thank you - Anas
please share insights about banner size in pixels for both desktop & mobile.
Should we design 2 banners with different sizes or 1 will do the job for mobile and desktop?
no you need two different sizes
I was looking for a solution to this in a while and I'm so thankful that I finally found your video! Thank you so much :)
You're very welcome and really glad i could help.
Cheers
you are a gift from god, thank you for making these videos, you're doing everyone a massive favour
I do it as described in the video. But when I refresh my page afterwards, my banner is not fully displayed. If I change the banner height in the settings from adjust to first image to the middle, it doesn't work. Can you please help me. The same applies to the mobile version
this happened to me too,. Did you find a way to fix it?
Select banner height - adapt to first image, then scroll down to mobile layout and untick both ‘stack images on mobile’ and ‘show container on mobile’, that should fix it
@@CozytownRenders bro youre a genius ! thank you. Any chance on how to fix the quality issue on the first image?
Thnks buddy .it surely works !@@CozytownRenders
I have been trying to figure out how to do this for months. Thank you so much for sharing! Life saver!!!
Brilliant! Thank you! Your content really makes a difference and helps people improve their businesses.
Thanks for the video. This method though loads both images with is not so SEO friendly. I wish you would teach how to load image with only one img tag.
You're an amazing teacher! Thank you so much!
When the page is in desktop view I’m getting the two image view, though the mobile image is not displaying, it’s just a grey space. Is there something more I need to do?
I'm getting two images on mobile with the second one being a grey space. 🤔
Thank you for sharing! I did have one issue with running this code. The desktop banner image is loading blurry since implementing the code. I thought it was a shopify issue but they raised the issue with the code. Is there a way to fix the quality of the image loading with the code supplied? Appreciate any support
Extraordinary!
I can't believe that something is not fake to me finally😅
Thank you for the help❤
Hello!
I have used this code and works amazingly. However it also hides the 'slideshow' and there isn't an option for a second image. Would you mind helping with this.
Thank you kindly.
Didnt work for me, splits my banner into two but doesnt show the second image only grey area, same on the mobile view. Any ideas why?
same
I just noticed this now, a year later... Shopify has added the option to incorporate two images. When I uploaded the second image, it displayed in a left-right layout (just like the one shown in your vid 7:42). How can we set the second image as the mobile version? Thanks in advance!
SUPER AS ALWAYS!!!! IT'S GREAT TO DO BUSINESS WITH A TALENTED PERSON!!!! YOU ARE THE BEST!!!!
Thank you so much and glad you think so.
Cheers
I Love You Bro this Video helped so much im making a Website with my friend rn for our new product and this is Just what we needed❤❤❤
I love you too, You're very welcome brother and glad i could help, Good luck with your product and no worries a lot of videos on the way and they should help too.
Cheers
I have been going crazy trying to do this an no one had an answer. Simple and efficient, thank you so much!
Really glad you finally found my working video and you're very welcome.
Cheers
Thanks you so much!.. That was so simple to do. This had been bugging me for ages!! Great Stuff!
Hello, when I have added this code, when I add an image for the phone, the desktop image loses quality.
Yes.. i had the same problem
I think the banner resolution is low in the code.. try to change it from 749 px to 1080px
Have you been able to solve this issue?
Hi everyone - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this:
1. Delete the CSS from this video to avoid conflicts.
2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining.
3. Copy this code into the Custom CSS section of your banner image:
@media only screen and (max-width: 768px) {
.banner {
display: none;
}
}
4. Duplicate the banner image and replace the image of the second banner image section to your mobile image.
5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’.
6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done!
I hope this helps!
It is really helpful out of many videos, get the right one
Problem solved
Thank you & bright future ahead
Thank you and really glad it was helpful.
Cheers
I am very happy youtube recommended your channel. I am deeply grateful. Thank you very much for all you do.
Thank you so much for the nice words and its my pleasure.
Cheers
u're my freaking hero, hope u keep making vids !"
LIFE SAVER!!! Thank you so much, already subscribed and liked :)
Thank you and glad i could help.
Cheers
is it possible to show an video header on desktop but an image on phone?!
Im working on that actually.
Hi, different banner images, but the PC banner image is not clear, how to solve it?
You tried with different pics ?
Hey, can we also do different slideshows or adjust the slideshow height according to different screens ?
I got that on the way
@@OnHOWGuy omg when can we expect it? Excited for it xx
Hello, thank you very much for the video. I must say that I thought this would solve my problem, but once I applied what you say, the images began to look very distorted, I contacted Shopify support and they tell me that this code generates some conflict that makes them look like this. So, although I can configure an image for the mobile and another image for the computer, since they looked so distorted I had to leave a single image for both again. 😢
I had the same problem:(
hey man! thank you for the method as it ends up working! my only issue is, after around 15 minutes, my desktop banner becomes so blurry that it looks horrible. desktop is 2300x800, mobile is 700x700. I have to used medium size banner because if I have "adapt to first image" it makes the banner on mobile look horrible. do you have any recommendations for what I can do to prevent my banner from being blurry. I cannot have a blurry banner as it makes my website look highly unprofessional
Hey, you're welcome.
I got that fix requested here before but without implementing this trick so you might have to wait i'll make a video for fix for it.
Is the blurrry image occurs on both mobile and desktop ?
also what theme are you using ?
Cheers
@@OnHOWGuy hey! Many of your videos are helping me a lot to create a good website. The only one that did not work is this one, same issue with the blurry banner from the desktop
@@OnHOWGuy same problem here... only occurs on desktop
@@enzovillalon4133 Yeah i just saw this now and i will work on it.
Its hard to find a solution or a trick that would work for every theme/version and each person uses different themes and versions so put yourself in my shoes.
Cheers
@@OnHOWGuy I have the same issue! I wish desktop adapted to its own image (first one), and mobile adapted to its own image as well (second one)
Nice, simple, and clean. Another life-saver from you. Thank you!
You're very welcome and thank you so much for the nice comment.
Cheers
Thank you, finally some code that just works
You're very welcome and glad I could help.
Cheers
hi! this worked perfectly for banner images but I'm not having a second image option for slide show and so slideshow images are not showing in mobile, any suggestions?
.
Great video brother, Thanks for your help!
This man just elevated my store 100%!
I tried doing this a month ago with another channel and it took so much code, an in the end the resolution for the mobile was blurry(other people had the same result) so wasted my time.
All my videos are genuine and with heavy testing and very few people leave comments like yours appreciating the work so i appreciate you and thank you.
Cheers
Great videos, thank you.
Is there a way to do this for slideshows?
You're very welcome.
I have a video coming soon about that.
Cheers
@@OnHOWGuyI am waiting for it!
this WORKED! THANK YOU!
Love from Pakistan for solving this issue
Thanks dude
Thx for the video. it help a lot, you got a New Follower!
Hi Anas, thank you for this video. I applied this fix and it did work to get the separate images to display for desktop vs. mobile. Awesome!
However, now that I've applied this code, the first image (the desktop one) is a little blurry. It is no longer as sharp as it was before adding the code and the second image for the mobile version.
Have you come across this before and do you happen to have a fix for this? I found a different solution from another UA-camr, but his fix is more complicated than yours, so I'm hoping to get yours to work. Thanks again.
Can you please let me know the video you found and if you have now fixed this issue.
How do I put a different video for the mobile app and Desktop app. The Video I put for Desktop app doesnt look the same on mobile and Viceversa. How Do I fix this?
Thank you from the bottom of my heart. Be blessed my brother.
Hey, I discovered that since I have a slideshow section on my store, adding this code couses the background images not to render on my slider due to the media display none, is there maybe a possible fix for this?
I also have an slide show man I this you should edit the slideshow css file instead of image banner
AMAZING. worked perfect. keep up the good work :) great videos
You are amazing too, glad i could help.
Cheers
Such a well informed video! Thank you so much for making that so simple!
You're very welcome and glad i could help.
Cheers
I was able to copy and paste the code and it did add the Mobile layout option to my theme editor. However, I still only see one option for images. There is no container for "second image"
same problem :( Shopify change constantly his coding programation
Great video. You have a new subscriber from Mexico 👍
This guy deserves a reward thank you ver much for all information!
PLEASE HELP!!! My website is almost ready, but every time i use a different image on desktop, the mobile version gets reduced to a small header!! please help!
It does work but unfortunately when I download the second image ( the one for mobile) the definition of the first picture (the one for desktop) changes and become pixellated. Does anyone has this issue?
Yeah I have this issue. Took me awhile to figure out why the image was pixelated. Have you found a solution?
@@bosguitarguy Sme thing to me, can you help me?
@@NavigoCross Hey. I did find a solution that I use (this is Dawn theme). It is not perfect for it affects the size of the image, although it fixes the blurry-ness of the image and I made it work for me.
Go to image-banner.liquid. Scroll down to the around the 45th line. You should see these 4 lines:
1 else
2 assign half_width = '50vw'
3 assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
4 endif
Now change both of the "50vw" values to "100vw" instead. That worked for me. Hopefully it helps you.
great work! but i am facing a problem. when i am adding first image it is looking good in the desktop view but as soon as i am adding the second image the desktop and the mobile are getting divided meaning that both in the mobile view and desktop view it is showing me both pictures half half.
I have a question. Does Aurora Theme support if I want to change the Image banner in my collection page? like i want to have different image banner per collection. is that possible?
Works perfectly bro! There's one thing I need to know and I couldn't find anywhere. How to set a vertical image for mobile? Like... different image format/size for desktop and mobile (horizontal for desktop and vertical for mobile). I understood what you said on the comments about see the next content below the banner, but I really need a full screen image on mobile. Could you help me please?!
Hi bro! Is it possible to make some adjustments in the code so that the banner on mobile adjusts to the original size of the image? I really need a vertical image on mobile and I haven't been able to do that yet. :(
Would also need help with this. @@alexandreoliveira7449
@@alexandreoliveira7449 Hi - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this:
1. Delete the CSS from this video to avoid conflicts.
2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining.
3. Copy this code into the Custom CSS section of your banner image:
@media only screen and (max-width: 768px) {
.banner {
display: none;
}
}
4. Duplicate the banner image and replace the image of the second banner image section to your mobile image.
5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’.
6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done!
I hope this helps!
hi, what if I want my image banner on mobile to be a different height to what it is on desktop? I can show different images thanks to your code but I want the different images to be different heights. Shopify has 'adapt to first image' in customise settings but no option to adapt both images to their image height. Can you help?
hey! ive watched your youtube video. now i have the problem in my theme there isnt a section-image-banner.css ... what can i do to still use a different picture for my store? thanks in advance ❤
Thank you so much for your support! That’s really amazing how easy you present the things! I only have one issue: after implementing this code the picture on the desktop is blurry. How could I fixe it?🙏🏻
Hi - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this:
1. Delete the CSS from this video to avoid conflicts.
2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining.
3. Copy this code into the Custom CSS section of your banner image:
@media only screen and (max-width: 768px) {
.banner {
display: none;
}
}
4. Duplicate the banner image and replace the image of the second banner image section to your mobile image.
5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’.
6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done!
I hope this helps!
I followed everything in the video, but when I go to the mobile version, yes, a new image is there... BUUUT my text and buttons are above the image, not on the image like they should be. Any way to fix this? Thank you!
I'm using Debut theme and when I search for section-image it is not there? Any thoughts?
thanks so much!!!!
I tried to solve this issue among so many ways.
This way works so simple.
Can you please explain how you do this with the original theme you had in place? My video does not suit on mobile and would love to have a different size video on mobile!
I have that video on the works actually, im working on a script that would optimize the video banner on mobile.
Cheers
@@OnHOWGuy Amazing! Looking forward to it 😃
Hey! I keep checking the videos you update, but not sure if I missed it. Did you already post it? 😀
That is such a simple solution! It worked perfectly for me on Sense theme. I’m wondering if there’s any way for this to work when using a slideshow rather than an image banner section? But if not that’s fine, it’s well worth having a static header to have it look good on mobile and desktop. Thank you for making this video!
Oh I'm using this on refresh theme, and I couldn't be able to figure out where I should put the image for mobile view , as refresh theme also have slide banners
in the mobile the photo is cropped becasue of the ratio of the first image, what i need to do?
This is not working for me.. my first image is set on Adapt to fit image and the mobile one then is huge... both are super blurry but are high quality... any advice??
Thank you 🙏 This worked perfectly for me
You're very welcome and glad i could help.
Cheers
You are my hero. This just fixed it for me. Ty!
Hey can you do one for slideshows. They have recently changed things so the old code I used to use. Doesn't work
Found any solution? I'm lost too
i have uploaded two images but when in desktop view the two imges show side by side
When i do this - It makes my desktop banner blurry - Why would this be happening? - The banner is HIGH res and looks perfect until i edit the code, please advise - Thank you.
I’m using the dawn theme. For my banner images, I replaced it with the slideshow option because I have multiple pictures I wanted to use interchangeably. But the size isn’t right. It just zooms in on the image when I put it in mobile version. Thanks 🙏🏼
Hello Elena, im afraid you might have to wait as i just made a code to adjust the placement of banner image but i didn't record the video yet.
I will work on it now.
Cheers
@@OnHOWGuy thank you 🙏🏼
Hi everyone - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this:
1. Delete the CSS from this video to avoid conflicts.
2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining.
3. Copy this code into the Custom CSS section of your banner image:
@media only screen and (max-width: 768px) {
.banner {
display: none;
}
}
4. Duplicate the banner image and replace the image of the second banner image section to your mobile image.
5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’.
6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done!
I hope this helps!
@OnHOW When I go to edit code and search section-image there is no assets. it just says "add asset". What am I to do?
@OnHOW it didn't work for me, it worked on the phone section but on the pc it still divided in two, when I uploaded the image and slider images disappear on mobile view
How can you do this with video banners?
Im still working on that trick actually.
Cheers
My image is below the Heading, Text and buttons. Can you tell me how to fix it please?
I figured it out. Thanks for the video!
i have the same problem. How did u do that < i have problem only on mobile @@usacustomscreenprintsembro4293
I tried this and it worked which is amazing, however it causes my desktop banner to become blurry and really low-res looking. Has anyone else encountered this issue & have any suggestions?
Yes, did you find a solution?
Same problem here. did you find a solution?
same here
Hi 👋 Do you already have a video on how to add an “image banner” to a theme - any theme? I’m using the old Debute theme on Shopify. And it has no option for an image banner like the theme “Dawn” has. Their customer service could not tell me how to add the banner or code it. My question sounds too simple for them not to have a solution, maybe you do? TY!
I do have a solution for everything haha, thats unfortunate.
You can try downloading the current dawn theme as a zip file then add the section image-banner.liquid and the asset section-image-banner.css manually in file editor and see if that would show up in the theme editor.
Its difficult for me to say if its 100% going to work because i cant the current theme code but its worth trying.
Cheers
Hello! This was super helpful, I used the new code you gave however it made it so that my text was also transparent! So now there is no header at all showing, wondering what I am doing wrong. Thank you!
Hi @onHOW when I upload an image to the desktop banner, the quality looks great. However, after I upload an image for the mobile section, the desktop image loses quality. I’m not sure why this is happening, could you help me with this?
Thats strange, did you check with different browser, what theme/version are you using ?
Please let me know in new comment as its difficult or me to see replies now.
Cheers
Hi this is so helpful thank you for making the video. I have question, how about my banner is a slideshow ? would the size be changed with the code that your provided ? thank you so much
Hi, My banner image is blurry in dawn theme, I have tried different sizes but same result,any suggestions plz
Have you been able to solve this issue?
@@RebecaAguayo-n8n Hi - Here's a fix for this. First, the problem is when you have two images of different aspect ratios, they are displayed differently which causes errors. One solution I used was this:
1. Delete the CSS from this video to avoid conflicts.
2. Have the banner image only display the desktop image by deleting the second image and making sure there is only one image remaining.
3. Copy this code into the Custom CSS section of your banner image:
@media only screen and (max-width: 768px) {
.banner {
display: none;
}
}
4. Duplicate the banner image and replace the image of the second banner image section to your mobile image.
5. In the CSS section, replace ‘max-width: 768px’ with ‘min-width: 769px’.
6. Make sure your other settings are set correctly to suit your banner images (especially banner height settings) and you’re done!
I hope this helps!
Once I do this, the buttons appear above the image on mobile rather than below.... how do I change this?
You are a lifesaver !!!❤
It doesnt seem to work if the image is fixed in the background position, id love to know how to fix that
Hi, when I searched by the file name nothing come up and it’s empty under the Asset section, I tried to create a new css file and paste on a blank page it doesn’t work, please advise what to do.
As soon as i add my second image banner, the first one becomes very blurry. What can I do to help with that?
After entering this code, the slideshows are not visible on the mobile view!
Thanks for such an easy and straightforward tutorial!
It works! Thank you! Super easy, subscribed and liked ❤️
You're welcome and glad i could help.
Cheers
Hello!
It causes the desktop image to be blurry whenever mobile image is uploaded.
I will look into it now.
Are you using Dawn as well ?
@@OnHOWGuy Yes. I figured it out. It was something with changing the 50vx or something to 100vx in one of the files
@@anophenis2787 can you help me?
@@anophenis2787 I am having the same issue do you know how to fix this please?
Love this! Thank you bro 🙌🏼
This worked really well! Except, does it not work for the slideshow images? Is there another way to have the slideshow images to adapt to the mobile version?
I have a video on the way for adjusting banner image but not sure about the slideshow.
What theme/version are you using ?
Please let me know in a new comment as its difficult for me now to see replies.
Cheers
Does this work on the Shopify ‘Spotlight’ theme too?
This was really helpful. God bless u
Glad it was helpful, Amen.
Cheers
Thank you Anas! Super explanations, I really appreciate how helpful you are.
You're very welcome my friend and glad i could be helpful.
Cheers
Bro what's the update on drop servicing series?
Got you, i just have to finish this Shopify series first.
Cheers
Hey man! The code worked perfectly but I am seeing an issue with fitting my image in both mobile and desktop version using a canva design. I have tried to set the recommended image sizes and it is not working. Any insight?
i have added code and in my site appeared two images and cant delete. this doesnt work
Your videos are amazing. Thank you! But something went wrong for me here. I copied the code correctly and went through each step several times. In the end, only half of the image is displayed on the desktop and cell phone. Can anyone help me?