ua-cam.com/video/COPugLSWb8g/v-deo.html - Updated tutorial Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX Our Shopify App: ✅BBD ‑ Big Bulk Discount 👉 apps.shopify.com/big-bulk-discount
it's been more than 3 weeks I was trying to find out the solution for this matter, I did tried many other different method but they were compromising the quality of banner. Thank you so much for providing the right directions.
Thank you do much for making this video!! I was making my website and becoming super frustrated but your step by step tutorial really broke it down for me and fixed everything! Thank you!!!
IT WORKED!! If I could kiss you right now I would!! LOL! 🤣I do not understand why all website themes are not coded this way! 60% of consumers use their phones when they're looking online, I don't get it. I have been losing my mind trying to find a mobile first theme that I like, then changing all of my images to fit the Dawn theme so they somehow still look good on both mobile and desktop, then starting all over using about 30 different themes but just wanting the simplicity of Dawn. There are so many other tutorials that I've tried and they do not work, you explained it well and...it WORKED! THANK YOU SO SO SO SO MUCH!
Thank you for creating this tutorial. I found a different solution to this first, but when I applied it the image for desktop ended up losing quality, so it looked blurry. I couldn't figure out how to fix it. Your solution is a bit more complicated, but it is still pretty simple, and it works without sacrificing image quality. The only part of your tutorial I had a little trouble with was finding the div ids, especially the one for mobile. But after carefully going through all the sections of the code in the inspection pane I was able to identify the correct codes. It looks beautiful. Thanks again for doing this.
Nice I do traditional programming and still don't have everything about liquid down. I have sort of just taught myself digging through the code. I need to actually take the time to learn how everything is connected. I was trying to just code this out the traditional way but could not figure out what I was doing wrong. As soon as I started this video and you created two banners I was kicking myself for not thinking about that. Lol what a smart work-around. I still can not believe I didn't think of it. I adapted this to work with the slider instead. Was an easy adaption. THANK YOU!!!!
I can't find the section id. I mean, I followed all the steps, but there is no ID, only text. There are no numbers 😢 Plz help, it's been almost 2 weeks I am facing this problem
Thanks very much it worked! Would you be able to tell me what code I have to add for an iPad so my desktop image doesn't get cut on the left and right?
I'm running into an issue with this code because it uses section IDs, which change when I duplicate the theme. I'm using Dawn 12.0. So each time I update the site and create a duplicate, the banners break and I have to re-inspect to find the new IDs. Is there a workaround to avoid this problem? Thanks!
Hello, Thank you for your comment....I couldn't fix it... Can you help me with debugging? I am using sense. In the mobile view, it shows both the images but while inspecting it disappears. I tried with different browsers, but it did not help.
Sir it worked of one image banner. But what if i have to add one more banner ... do i'll have to duplicate code in the base.css and update the ids etc ( but it did not worked i tried)
Thank you! Is it possible to do this for multiple banners at once? If I was to add the code twice? Or does it just work one for desktop and one for mobile?
I used this with the trade theme and it worked for the desktop image, but not the mobile. No matter what image I upload for the mobile banner, it just leaves a gray space there as if a picture isn't uploaded at all. can you help?
Hello works perfectly if I resize the window on the Desktop. But if I open it on the phone it still shows both sections. I am using an Iphone 13 Pro Max. Do you have any fixes for that? :( Best regards
Sorry if this is a stupid question, but will this work on different sections? Would I just repeat what I did the first time using different section IDs? I'm so excited.
Thank you for this tutorial, it works for my desktop however when I am on mobile it is still showing me the two banners, any advice on how to fix this?
Thank you so much my problem is solved I am using impulse theme so the process and steps were not the same and effective but your logic of showcasing two banners and hidding one has solved the problem
IDK but is not working 4 me ;C, the mobile image appears in my settings but when i select once to use it at mobile users, once i watch in my celphone the image just doesnt show
Ive used this and it works on desktop but when I check my website on my phone the mobile version shows both banners... I've checked the editor on shopify and the mobile and desktop versions are working... Not sure what to do to make my banner work on my mobile ☹️
hello, i would like to do the same of this video but instead of being images i would like them to be background banner for different for the mobile and computer? how could i do it?
Sir it worked of one image banner. But what if i have to add one more banner ... do i'll have to duplicate code in the base.css and update the ids etc ( but it did not worked i tried) Please answer @@WebSensePro
Hello, the destop banner version is too wide. Is there a way to narrow a bit so it can match the products wifht just below it? Also, what are the recomended sizes for both mobile and desktop banners? Tahnk you a lot, your work is just amazing!
Hi! Thank you so much I finally solved the problem Ive been craving for!! I just want to ask if there is also a way to display 2 banners each separately from mobile and desktop. Thank you so much!!!
Hi, Thank you for this video, its great! - i have a different image banner on each page of my collections and would like to use this methose for desktop/mobile images. Would i need to copy your code multiple times into BASE.CSS and add each individual banner code? will that work. Please help. Thanks :)
Thanks for the video! Great - really useful guidance. I have given it a go and my desktop image does not appear in my 'mobile view'- that's great. However, I can still see the mobile image on my 'desktop' view. Any ideas on how I may keep my desktop image only in desktop and mobile only image in mobile view? thanks again.
![How To Show Different Banner Images On Mobile & Desktop [Shopify - Updated]](http://i.ytimg.com/vi/COPugLSWb8g/mqdefault.jpg)
![How To Show Different Banner Images On Mobile & Desktop [Shopify - Updated]](/img/tr.png)
![[Shopify - Dawn Theme 15.2.0 ] How To Show Selected Variant Images](http://i.ytimg.com/vi/MfGv5uLy02A/mqdefault.jpg)
![How To Show Collection Banner in Full Width [Dawn Theme Shopify]](/img/n.gif)
ua-cam.com/video/COPugLSWb8g/v-deo.html - Updated tutorial
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
Our Shopify App: ✅BBD ‑ Big Bulk Discount 👉 apps.shopify.com/big-bulk-discount
it's been more than 3 weeks I was trying to find out the solution for this matter, I did tried many other different method but they were compromising the quality of banner. Thank you so much for providing the right directions.
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
This worked perfectly for a client project. Thank you! I got paid money thanks to this video.
Excellent! Dont forget to share and like
Timestamps:
00:00 - Introduction
00:35 - Preview of Desktop and Mobile Banners
01:10 - Initiating Theme Publication
01:35 - Desktop Banner Customization Steps
02:20 - Mobile Banner Customization Steps
03:40 -Implementation of CSS Code
05:00 - Updating Section IDs in CSS Code
08:00 - Live Demonstration of Theme Preview
Tried a few other methods and none of them worked. You're a life saver!
Glad I could help!
Thank you do much for making this video!! I was making my website and becoming super frustrated but your step by step tutorial really broke it down for me and fixed everything! Thank you!!!
You're welcome!
IT WORKED!! If I could kiss you right now I would!! LOL! 🤣I do not understand why all website themes are not coded this way! 60% of consumers use their phones when they're looking online, I don't get it. I have been losing my mind trying to find a mobile first theme that I like, then changing all of my images to fit the Dawn theme so they somehow still look good on both mobile and desktop, then starting all over using about 30 different themes but just wanting the simplicity of Dawn. There are so many other tutorials that I've tried and they do not work, you explained it well and...it WORKED! THANK YOU SO SO SO SO MUCH!
Share this content and I will get the Kiss 😅😅
Thank you for creating this tutorial. I found a different solution to this first, but when I applied it the image for desktop ended up losing quality, so it looked blurry. I couldn't figure out how to fix it. Your solution is a bit more complicated, but it is still pretty simple, and it works without sacrificing image quality.
The only part of your tutorial I had a little trouble with was finding the div ids, especially the one for mobile. But after carefully going through all the sections of the code in the inspection pane I was able to identify the correct codes. It looks beautiful. Thanks again for doing this.
Your welcome, dont forget to subscribe. A newer solution which will be easier to this is coming soon
Nice I do traditional programming and still don't have everything about liquid down. I have sort of just taught myself digging through the code. I need to actually take the time to learn how everything is connected. I was trying to just code this out the traditional way but could not figure out what I was doing wrong. As soon as I started this video and you created two banners I was kicking myself for not thinking about that. Lol what a smart work-around. I still can not believe I didn't think of it. I adapted this to work with the slider instead. Was an easy adaption. THANK YOU!!!!
Glad you were able to adapt it to your slider! Don't forget to subscribe if it helped you
Amazing clear video. Props to you. It worked first try
does it work if i dont remove the buttons of the image banner section?
As usual, THANK YOU so much for your straightforward, easy-to-follow, fantastic tutorials. MAGIC!!!
You're welcome!
Thank you! So many videos with the most complicated ways to do this but this makes total sense. U rock
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
I can't find the section id. I mean, I followed all the steps, but there is no ID, only text. There are no numbers 😢 Plz help, it's been almost 2 weeks I am facing this problem
Thanks a lot Sir. I tried it on slideshow section and it worked. Thank You for this Knowledge.
You are most welcome
Thanks very much it worked! Would you be able to tell me what code I have to add for an iPad so my desktop image doesn't get cut on the left and right?
Hmm... will need three different sections for that. Great idea for another video
what i want on shopify is a full screen image banner for a collection but a different image for the collection on mobile how do do that
I'm running into an issue with this code because it uses section IDs, which change when I duplicate the theme. I'm using Dawn 12.0. So each time I update the site and create a duplicate, the banners break and I have to re-inspect to find the new IDs. Is there a workaround to avoid this problem? Thanks!
Your feedback is noted, will check, find and post solution for this
Hi, by any chance have you found a solution? Thanks! @@WebSensePro
@@WebSensePro Thank you!
Please give a code for Sliding banners too? Will it work the same way for Sliding banners as well?
Thanks for the idea, will definitely make a solution for that
This worked!! This is awesome. Thank you so much for teaching
You're welcome!
smartest way to do it... Its showing both the images in mobile version but i'll fix it ...thanks a ton
Great
Hello, Thank you for your comment....I couldn't fix it... Can you help me with debugging? I am using sense.
In the mobile view, it shows both the images but while inspecting it disappears. I tried with different browsers, but it did not help.
Sir it worked of one image banner. But what if i have to add one more banner ... do i'll have to duplicate code in the base.css and update the ids etc ( but it did not worked i tried)
It should work fine if you properly add code
CSS code not showing in the description, how can I get it?
Thank you! Is it possible to do this for multiple banners at once? If I was to add the code twice? Or does it just work one for desktop and one for mobile?
Yes you can do this on multiple banners by placing ID's and adding CSS code with appropriate ID's
I used this with the trade theme and it worked for the desktop image, but not the mobile. No matter what image I upload for the mobile banner, it just leaves a gray space there as if a picture isn't uploaded at all. can you help?
Yes, please contact via websensepro.com/contact-us for paid support
Hello works perfectly if I resize the window on the Desktop. But if I open it on the phone it still shows both sections. I am using an Iphone 13 Pro Max. Do you have any fixes for that? :( Best regards
Thats weird, make sure you used the correct ID
Bhai mobile view ky leay konsy pixels chahie banner banany ky leay. Kya length or width hai mobile view ki plz pta dain
Max width 480 pixel
Sorry if this is a stupid question, but will this work on different sections? Would I just repeat what I did the first time using different section IDs? I'm so excited.
Yes you will have to add sections id repeatedly
This has been very helpful indeed! Many thanks
You're welcome!
Thank you for this tutorial, it works for my desktop however when I am on mobile it is still showing me the two banners, any advice on how to fix this?
Try again
This worked perfectly. Thank you very sincerely!
Your welcome
Thank you! I didn't get it the first time but it worked!
You're welcome!
I have try this tutorial It's 100% work! Thank You.
You're welcome!
my mobile view is still showing two banner, but desktop is showing only one, help me
Check updated video
I used other codes but it made the image worse. But your code is completely different. Works well and has beautiful images. Thanks you so much !
Can U Make A Video About Make Slideshow Images Clickable On Shopify ?
where is code?
Check description of the video
Sure, added in my list
Alot of empty space is coming if I am using custom code to display different banners for mobile and desktop. Any suggestions? Theme is Sense
* sliding banners
Weird it shouldnt be a problem
WebSense is the GOAT!
Hello brother, it worked fine in the mobile but am still facing the issue in desktop version.
Make sure to implement it properly
My inspect button isnt working and somehow i cant inspect my website, any other way to do this ?
You can do that via keyboard shortcut
Thank you so much my problem is solved
I am using impulse theme so the process and steps were not the same and effective but your logic of showcasing two banners and hidding one has solved the problem
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Omg this works THANK YOU VERY MUCH
Dont forget to share and like
Does this work with any image outside of banner images using the same code as long as I input the correct IDs?
Please contact via websensepro.com/contact-us for paid suppor
It works but I think I have to do this every time I add or change an image banner to my template, if so I don't think it is practical.
Yes, working on a new tutorial for this
IDK but is not working 4 me ;C, the mobile image appears in my settings but when i select once to use it at mobile users, once i watch in my celphone the image just doesnt show
Will have to check whats wrong with it. Most of our audience confirm that its working
Bro we want put all banners and slodes shoe separately so how will be that possible?
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
I am able to retain the desktop version. However, the mobile version is showing both. Please suggest
Please contact via websensepro.com/contact-us for paid support
Thank you so much! This was super helpful :)
Your welcome, dobt forget to share and subscribe
What is the dimension of your banner?
The height for my banner is too large and takes up too much space, even when I change it to small like you did
Desktop 1200 x 400 pixels and Mobile 360 x 120 pixels
Hi , thanks for the video, i tried this code but its not working for me , could you please help on this.
Please contact via websensepro.com/contact-us for paid support
Thanks. This worked well. Do you think it's possible that Shopify would ever dynamically update the section IDs which would break this?
For every new section you will have to do this
Does this also work for Refresh theme?
Yes it does
Hello, I have one issue, on mobile the desktop banner still shows but on desktop the mobile banner does not show
Please contact via websensepro.com/contact-us for paid support
Ive used this and it works on desktop but when I check my website on my phone the mobile version shows both banners... I've checked the editor on shopify and the mobile and desktop versions are working... Not sure what to do to make my banner work on my mobile ☹️
I had the same issue. I couldn't figure it out how to fix it!!!
We are in process of creating an updated tutorial for this which will add "Mobile CSS" settings on this section. Stay tuned
We have tested it on our side and it's working fine for us
hello, i would like to do the same of this video but instead of being images i would like them to be background banner for different for the mobile and computer? how could i do it?
Not sure what you mean here. Do you want me to create a tutorial on how I create a tutorial?
Just what I needed! Thanks so much
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Sir it worked of one image banner. But what if i have to add one more banner ... do i'll have to duplicate code in the base.css and update the ids etc ( but it did not worked i tried)
Please answer @@WebSensePro
thanks, it worked but now the "image overlay opacity" is not working in mobile version
Kindly share your website url.
Thank you. It was a quick change and worked perfectly.
Glad it helped Don't forget subscribe like and share
hello guys! mine works well for mobile but on the desktop it shows both images? any ideea why ? thank you
Please contact via websensepro.com/contact-us for paid support
Base.css is not showing in my code editor plzz help me how can i fix it
Add code on any CSS file
What is the size of Mobile Size?
Any square sizs
Hi, really appreciate your video, just for my knowledge wanted to know can we add multile banner for each category i.e 2 for desktop and 2 for mobile?
Yes you can! pretty simple with CSS tricks just like I showed in this video
You are the best! Worked perfectly first time
Great to hear!
brother me refresh theme me karahi ous me to complete har cheez diffrent hai kya ap help kkar skkty hain refresh theme mobile banner lagana hai
Wait for new video
thanks for this tutorial, it worked perfectly
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
thanks this helped heaps. do you have a code for (multicolumn mobile only?) also?
Please contact via websensepro.com/contact-us for paid support
This is awsome sir! You just fixed my problem! Thank you so much!
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
I now trust you with everything. Thank you!!!!
Thanks 😇😇
Hello, encountering a problem with desktop. The codes worked on mobile, but on desktop it's not applying? :(
did you manage to solve this? i'm facing the same issue
Will create updated tutorial for this one
Hello, the destop banner version is too wide. Is there a way to narrow a bit so it can match the products wifht just below it? Also, what are the recomended sizes for both mobile and desktop banners? Tahnk you a lot, your work is just amazing!
You can adjust sizing from Customize settings
@@WebSensePro I tried but the banner width remains bigger than the products
Thanks You So Much, For Easy and updated tutorial.
You're welcome!
Hi! Thank you so much I finally solved the problem Ive been craving for!! I just want to ask if there is also a way to display 2 banners each separately from mobile and desktop. Thank you so much!!!
and it seems like its not working on the .json format, is there any way i can do it? Appreciate it so very much!
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Will this work for slides banner?
Yes if you pull correct ID from inspect element tool
@@WebSensePro Nice, thank you:)
@@WebSensePro Thank you again, tried it and it worked for me:)
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
@@SunnyBright433 how did you pull the correct ID from inspect element tool?
Hi, Thank you for this video, its great! - i have a different image banner on each page of my collections and would like to use this methose for desktop/mobile images. Would i need to copy your code multiple times into BASE.CSS and add each individual banner code? will that work. Please help. Thanks :)
Yes will need to add code multiple time
Brilliant !! Thanks a lot, BTW Can you tell us how to do the same with the autoplay video of yours ? It would be a lifesaver.... Please Big Bro
Will do soon, dont forget to subscribe
Thanks for the video, was absolutely helpful
You're welcome!
Excellent! U saved me bro.
Glad I could help
Thanks for the video! Great - really useful guidance. I have given it a go and my desktop image does not appear in my 'mobile view'- that's great. However, I can still see the mobile image on my 'desktop' view. Any ideas on how I may keep my desktop image only in desktop and mobile only image in mobile view? thanks again.
Updated video coming next week
Shopify Tutorial For Beginner 2024 ua-cam.com/video/GzmxVJ6anbE/v-deo.html
what is the desktop and mobile image banner size?
Dont remember 🤣🤣
Amazing. Thanks for this perfect solution.
Your welcome
Hi, are the banners clickable as wel?
ua-cam.com/video/EtjKGcdo3yw/v-deo.htmlsi=0_Ip8Q0Zrh0vWXgD
Thanks boss! Very helpful.
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
great tutorial, thank you!
Glad it was helpful!
Amazing video, great help.... thank you very much for this
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Very much needed video....thanks a lot...
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
is code can be diffrent
Meaning?
Thank you very much. Extremely helpful video!
You're welcome! Don't forget to subscribe, like and share
A lot of thanks really . God Bless you. You helped a loooooooot thank you one more time
Glad it helped
thanks! what size do you use for mobile slides
You can change size via customize settings
amazing! it worked!
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
I did this but it only works on the desktop and the mobile still shows both banners
Code is not properly implemented
what is the banner size for mobile version and desktop version
You can change size from Customize settings
worked for me. thanks
can someone provide me the code i don't see it in the comment
Check blog in description
My king 🤴🏾
😅😅😅
Hi there, thank you for the tutorial!
You are welcome!
Sir where is the css file please provide
websensepro.com/blog/show-different-banner-images-on-mobile-desktop-in-shopify/
worked thanks alot
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Lifesaver!!
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Great, thanks
You are welcome!
its really work ❤❤❤❤😊
Glad to hear that