How To Show Different Banner Images On Mobile & Desktop In Shopify

[@VABianne_2023]

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.

[@OnHOWGuy]

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

[@mohammedkhaled5791]

I think that's happen because you assign animation behaviour to the image

[@lostboycassius]

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

[@kamranmaqbool3690]

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?

[@awsmcf2835]

no you need two different sizes

[@brandonclark5271]

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

[@AbedNaseri]

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.

[@AbelAbraham-k3g]

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.

[@zakriarajput4617]

Brother I'm from Pakistan 🇵🇰 and I'm watching your video for 2nd time butt from now you will be my idol❤😍

[@OnHOWGuy]

Hey brother, much respect to Pakistani people. Thank you and i appreciate that, your words mean a lot actually. cheers

[@rubabnasir5984]

@@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.

[@upsaraandco]

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

[@DeliciOats]

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 KZbinr, but his fix is more complicated than yours, so I'm hoping to get yours to work. Thanks again.

[@joshtaco96]

Can you please let me know the video you found and if you have now fixed this issue.

[@Kitty_Adventures4]

im going through the same issue

[@JordynRutledge]

I have been trying to figure out how to do this for months. Thank you so much for sharing! Life saver!!!

[@SageSamuels]

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!

[@huss4659]

you are a gift from god, thank you for making these videos, you're doing everyone a massive favour

[@alexandreoliveira7449]

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?!

[@alexandreoliveira7449]

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. :(

[@noelnielsen9434]

Would also need help with this. @@alexandreoliveira7449

[@olys.apparel]

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

[@SharynDale-v2z]

Great videos, thank you. Is there a way to do this for slideshows?

[@OnHOWGuy]

You're very welcome. I have a video coming soon about that. Cheers

[@nethra2]

​@@OnHOWGuyI am waiting for it!

[@BERTTheothershoe]

Thanks for this amazing videos! I love your channel it has helped me a lot. I did this and it worked, but I had a carrousel below the banner and after pasting this code it just dissapeared...I don't know how to make it appear again, can you please help me please

[@danielabetancurrestrepo6215]

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. 😢

[@davidgattinger8262]

I had the same problem:(

[@magdalenostrowska]

Brilliant! Thank you! Your content really makes a difference and helps people improve their businesses.

[@Sydneyscollection]

Thanks for this great video, please note that it only works when the section has 'image behaviour' set to 'none'. Can you update the code to render for 'fixed background position' etc? The code targets every 'image banner' section across the entire website, I suggest adding it to the individual sections' custom CSS.

[@simreecosmetics]

Hey, can we also do different slideshows or adjust the slideshow height according to different screens ?

[@OnHOWGuy]

I got that on the way

[@simreecosmetics]

@@OnHOWGuy omg when can we expect it? Excited for it xx

[@mustafatombulca7236]

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

[@nakittugaga2790]

this happened to me too,. Did you find a way to fix it?

[@CozytownRenders]

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

[@footgearbyk]

@@CozytownRenders bro youre a genius ! thank you. Any chance on how to fix the quality issue on the first image?

[@jayhindsinghbundela3703]

Thnks buddy .it surely works !​@@CozytownRenders

[@devanshverma6608]

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.

[@elenamoments]

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?

[@OnHOWGuy]

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

[@Surya-Narang]

Can you tell what should be the image size??

[@armansaifi_]

Extraordinary! I can't believe that something is not fake to me finally😅 Thank you for the help❤

[@nutrilima.]

Thank you so much for the video. I tried it, and it seems not to work when you add an animation (fixed background position). Could you please help with that? Thank you!

[@ines3251]

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 :)

[@OnHOWGuy]

You're very welcome and really glad i could help. Cheers

[@tempzTV]

It is really helpful out of many videos, get the right one Problem solved Thank you & bright future ahead

[@OnHOWGuy]

Thank you and really glad it was helpful. Cheers

[@CozytownRenders]

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!

[@rubabnasir5984]

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

[@ИгорьИгорь-к5з]

SUPER AS ALWAYS!!!! IT'S GREAT TO DO BUSINESS WITH A TALENTED PERSON!!!! YOU ARE THE BEST!!!!

[@OnHOWGuy]

Thank you so much and glad you think so. Cheers

[@Batmanpipi1997]

hi~~ may i know is it possible to show video banner on desktop while showing pictures on mobile??? many thanks!!

[@stevethegoatdiecast1728]

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

[@OnHOWGuy]

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

[@enzovillalon4133]

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

[@AdamRezali]

@@OnHOWGuy same problem here... only occurs on desktop

[@OnHOWGuy]

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

[@yvespires17]

@@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)

[@gee-tm2fq]

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?

[@ferminpereda174]

.

[@floko3255]

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❤❤❤

[@OnHOWGuy]

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

[@EllieSineath]

So helpful! Could you make a video on the same topic but with slideshows. How do you make slideshows mobile friendly.

[@carolynecampos5328]

I want too pleaseeee!!!

[@TheMarketofAlexandria]

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.

[@OnHOWGuy]

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

[@JaimeSolisC]

I am very happy youtube recommended your channel. I am deeply grateful. Thank you very much for all you do.

[@OnHOWGuy]

Thank you so much for the nice words and its my pleasure. Cheers

[@aaliyaf.e6870]

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?

[@Felixrcs]

Excelente tutorial. Is there a way to do that for slideshow? Thanks

[@atdb209Ye]

Nice, simple, and clean. Another life-saver from you. Thank you!

[@OnHOWGuy]

You're very welcome and thank you so much for the nice comment. Cheers

[@jabe5895]

Thank you very much just found your channel and subscribed, will tell my friends, question, I will like to hide the banner header on all my pages and just show it on the home page, I am using the Dawn theme, right now the banner is showing on all my pages and it I delete it in any page it will deleted throughout the website, how can I do that? Thank you for the great video.

[@josephhodgkinson5215]

Thanks you so much!.. That was so simple to do. This had been bugging me for ages!! Great Stuff!

[@mustaphasahraoui6647]

Thanks for the video! I actually have a problem where I used a slideshow with different background pictures but they only show on Desktop, is there a solution for that?

[@OnHOWGuy]

You're welcome, What theme/version are you using ? Cheers

[@mustaphasahraoui6647]

@@OnHOWGuy Thanks for replying! I am using the Ride theme

[@TheMiig1513]

Thank you, finally some code that just works

[@OnHOWGuy]

You're very welcome and glad I could help. Cheers

[@Gatzio]

Wow, incredible!!! But one question, what pixel format is ideal for an image in mobile format?

[@mondejarabe]

I have been going crazy trying to do this an no one had an answer. Simple and efficient, thank you so much!

[@OnHOWGuy]

Really glad you finally found my working video and you're very welcome. Cheers

[@Youtopia-bj]

thanks so much!!!! I tried to solve this issue among so many ways. This way works so simple.

[@edsonboots5924]

Thanks for the video, it worked well for me. But the image quality on desktop got real bad after this? Any idea how I can fix it?

[@MatanNaveh]

Did you find a way to fix it?

[@unapologetically_montee]

Such a well informed video! Thank you so much for making that so simple!

[@OnHOWGuy]

You're very welcome and glad i could help. Cheers

[@MrJeffje1982]

This guy deserves a reward thank you ver much for all information!

[@guestmarga9701]

Can this work for all images too?

[@Adam00Lythgoe]

can you do this but for video so it does landscape on desktop and portrait for mobile? Thank you.

[@Jedwardoh]

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?

[@ibos1772]

yes perfect ut which size should the pictzre has so for mobile vertical but wich size?

[@stellasiodmok7106]

Hi there! I just wanted to reach out to you that, even though this worked for my Dawn theme before, when I updated it to the version 13.0.1, the coding disappeared, the two images became one for desktop (instead of one for the desktop and one for mobile) and when I added the code again, the situation for desktop (the two images side by side instead of the one) stayed the same lol. Any ideas as to why this happened and what to do about it? Maybe everything is different for this new version of the Dawn theme? Can you offer a new video at one point for this new Dawn theme and let me know when you have it up? I would greatly appreciate it, otherwise I may be stuck with the older version or have to pay for some Expert to do this for me, which I want to avoid for now ... Thanks! :)

[@VladislavBoridianu]

Thanks for such an easy and straightforward tutorial!

[@AS-rk5vb]

Does this work on the Shopify ‘Spotlight’ theme too?

[@harshitsopra]

your videos are great but i want you to do the same thing with third party theme because i dont have section-image-banner file in my code.

[@TonyFromDadeCounty]

hey i wanted to know if you can make a video on changing logo size on mobile only . it looks big sometime compared to on desktop. thank you and bless

[@OnHOWGuy]

Hey, i just noted your request and i will work on it. It might take a week or so be posted because videos for this week already uploaded and scheduled. Cheers

[@jmjones]

hi! Does this code only work for Dawn theme?

[@JohannesBitcube]

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?

[@CTGEYILSA]

I also have an slide show man I this you should edit the slideshow css file instead of image banner

[@aersonal276]

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!

[@cassandrastarling6502]

Hello Can you use this for slideshow?

[@fraserduncan6462]

This works great but it seems like my images on my slideshow have disappeared. Any solutions to this. Thank you

[@walkmultipledogs]

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?

[@angelagsanchez]

I'm getting two images on mobile with the second one being a grey space. 🤔

[@oliwierwellman9265]

amazing video only one question how do I make the mobile image full screen

[@OnHOWGuy]

If its not full screen then change the pic resolution.

[@pauletteraqueno]

hi, is it possible to change the image dimensions/size of the mobile ver banner?

[@forzaaw]

Nice video. Is there the possibility to change the banner size at mobile view to portrait like?

[@OnHOWGuy]

thank you, that would require a custom code to have it fixed, because the banners size changes based on browser resolution. cheers

[@adeniyiquasim9580]

Hi, Please I want to know, is the same thing applicable if I want to use a gif or video?

[@OnHOWGuy]

It requires a different code i guess. Cheers

[@EmeraldHayley]

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?

[@MatanNaveh]

Yes, did you find a solution?

[@BundelCompound]

Same problem here. did you find a solution?

[@JoshuaMcCarthy-c5p]

same here

[@elenamoments]

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 🙏🏼

[@OnHOWGuy]

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

[@elenamoments]

@@OnHOWGuy thank you 🙏🏼

[@luislopez8349]

u're my freaking hero, hope u keep making vids !"

[@Sam-ql4ze]

You are my hero. This just fixed it for me. Ty!

[@김애화-m8d]

Hi, I wonder how to show different Slider Images on mobile and desktop. Is there any way to do this?

[@elvirstreamt1966]

will it also apply to the regular image banner section?

[@azura1774]

Hey can you do one for slideshows. They have recently changed things so the old code I used to use. Doesn't work

[@moneydoesthings]

Found any solution? I'm lost too

[@alkahfapparel]

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"

[@gabrielmercadillo9485]

same problem :( Shopify change constantly his coding programation

[@issyeastwood4893]

hi! how do i make both images their full height? the mobile banner image is cropped to the height of the desktop banner image.

[@Unculturedindie]

This was really helpful. God bless u

[@OnHOWGuy]

Glad it was helpful, Amen. Cheers

[@NienkevanBeurden]

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!

[@OnHOWGuy]

I have that video on the works actually, im working on a script that would optimize the video banner on mobile. Cheers

[@NienkevanBeurden]

@@OnHOWGuy Amazing! Looking forward to it 😃

[@NienkevanBeurden]

Hey! I keep checking the videos you update, but not sure if I missed it. Did you already post it? 😀

[@thedivyashow2821]

Hey, can you please help me to change the images of slideshow for mobile and desktop ??

[@danakretzmann7044]

I'm using Debut theme and when I search for section-image it is not there? Any thoughts?

[@devjyotiroy6639]

Could you please make a video to do the same with background video section? Thanks in advance

[@OnHOWGuy]

I have it planned

[@lucascaceresroca6254]

Great video! How could I do the same for a slideshow?

[@appledevice2661]

+1

[@CaroleHansen-f2e]

I'd love a video on how to change the color of the discount promo text (i.e. 20% off) in Shopify CART & CHECKOUT pages.

[@redhorns.official]

I am using motion theme...will this work?

[@howtomarinar]

LIFE SAVER!!! Thank you so much, already subscribed and liked :)

[@OnHOWGuy]

Thank you and glad i could help. Cheers

[@Onlyfootball290]

Can we set, video on the Desktop and Image for the mobile on the same theme?

[@OnHOWGuy]

with this code no but i have a video on that on the way. Cheers

[@chaimaechaima7608]

Thank you 🙏 This worked perfectly for me

[@OnHOWGuy]

You're very welcome and glad i could help. Cheers

[@stickyickystationary4982]

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!

[@OnHOWGuy]

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

[@MrPetrulucian]

How can i add a banner to mobile version in full width?!? I see that shopify only shows the picture as a square, and it is not showing the full picture. If you could make a video on this subject it would be greatly appreciated!

[@realworldautomotive]

Very simple add on code and works great. But when both images are uploaded it hurts the image quality of either or both. I believe the same problem exists without the code and just adding image one and two normally. I'm using Craft Ver: 13.0.0. I really wish there was a fix for this. I can't deal with poor quality images.

[@PtitP0i]

Hello, there it seems like it is not working anymore on Dawn V11.0.0 Do you have a fix by any chance ? :) Thanks again, love your vids!

[@aaronbilecki407]

Love this! Thank you bro 🙌🏼

[@T-L0206]

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.

[@EmporiumOpulence]

This is amazing brother but can you make a video same for slid show

[@thebestmusiccc2072]

Great video. You have a new subscriber from Mexico 👍

[@mikegotkeys6826]

what theme do you use ?

[@baseballlavalnordmf6866]

Thank you Anas! Super explanations, I really appreciate how helpful you are.

[@OnHOWGuy]

You're very welcome my friend and glad i could be helpful. Cheers

[@1001mono1001]

is it possible to show an video header on desktop but an image on phone?!

[@OnHOWGuy]

Im working on that actually.