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.
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.
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
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.
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.
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?
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!!!
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?
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
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
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, 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!
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
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)
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.
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 :)
Hi, I've implemented working perfectly thanks... Can you also pls share how can I do the same in collection page as well different image in desktop and different image on mobile.... Also I've seen your collection banner image video tutorial which implemented and working well ❤
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, 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?
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 ☹️
![How To Show Different Banner Images On Mobile & Desktop [Shopify - Updated]](http://i.ytimg.com/vi/COPugLSWb8g/mqdefault.jpg)
ruclips.net/video/COPugLSWb8g/видео.html - Updated tutorial
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.
Shopify Tutorial For Beginner 2024 ruclips.net/video/GzmxVJ6anbE/видео.html
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!
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
As usual, THANK YOU so much for your straightforward, easy-to-follow, fantastic tutorials. MAGIC!!!
You're welcome!
Thanks a lot Sir. I tried it on slideshow section and it worked. Thank You for this Knowledge.
You are most 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
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 worked!! This is awesome. Thank you so much for teaching
You're welcome!
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
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.
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
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
Thank you! I didn't get it the first time but it worked!
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
This worked perfectly. Thank you very sincerely!
Your 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
Thank you. It was a quick change and worked perfectly.
Glad it helped Don't forget subscribe like and share
Thank you so much! This was super helpful :)
Your welcome, dobt forget to share and subscribe
I have try this tutorial It's 100% work! Thank You.
You're welcome!
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
WebSense is the GOAT!
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.
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!
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.
Thanks You So Much, For Easy and updated tutorial.
You're welcome!
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
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.
You are the best! Worked perfectly first time
Great to hear!
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
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
Fantastic work! Thank you so much!
You're welcome!
Thanks for the video, was absolutely helpful
You're welcome!
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
Thanks boss! Very helpful.
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Amazing. Thanks for this perfect solution.
Your welcome
great tutorial, thank you!
Glad it was helpful!
worked for me. thanks
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
I now trust you with everything. Thank you!!!!
Thanks 😇😇
thanks this helped heaps. do you have a code for (multicolumn mobile only?) also?
Please contact via websensepro.com/contact-us for paid support
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
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 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
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
Hi, I've implemented working perfectly thanks...
Can you also pls share how can I do the same in collection page as well different image in desktop and different image on mobile.... Also I've seen your collection banner image video tutorial which implemented and working well ❤
Updated video coming next week
A lot of thanks really . God Bless you. You helped a loooooooot thank you one more time
Glad it helped
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.
Excellent! U saved me bro.
Glad I could help
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
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
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
amazing! it worked!
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
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.
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?
Hello brother, it worked fine in the mobile but am still facing the issue in desktop version.
Make sure to implement it properly
Does this also work for Refresh theme?
Yes it does
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
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
Great, thanks
You are welcome!
worked thanks alot
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
what the size of banner for desktop and for mobile ?
What ever you set
Hi there, thank you for the tutorial!
You are welcome!
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
thanks, it worked but now the "image overlay opacity" is not working in mobile version
Kindly share your website url.
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
THANK YOU!!!
Your welcome
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
my mobile view is still showing two banner, but desktop is showing only one, help me
Check updated video
Thank You so much!!!!!
You're welcome! Dont forget to subscribe
My king 🤴🏾
😅😅😅
Great, it's worked
Glad it helped
thanks! what size do you use for mobile slides
You can change size via customize settings
Thank you so much!!!!!
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
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
Lifesaver!!
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
You are the best
Thanks, don't forget to subscribe
thank you so much sir
You're welcome
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?
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, 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
its really work ❤❤❤❤😊
Glad to hear that
Base.css is not showing in my code editor plzz help me how can i fix it
Add code on any CSS file
thank you!
Your welcome
Hi, are the banners clickable as wel?
ruclips.net/video/EtjKGcdo3yw/видео.htmlsi=0_Ip8Q0Zrh0vWXgD
You're the best!!!!!!!!!!!!!!
Your welcome
the Dickstop version on my theme is visible on mobile as well
Thanks
Welcome
Thanku so much❤❤❤❤❤
Your welcome
amazing
Thank you! Cheers!
what is the desktop and mobile image banner size?
Dont remember 🤣🤣
is code can be diffrent
Meaning?
I did this but it only works on the desktop and the mobile still shows both banners
Code is not properly implemented
can someone provide me the code i don't see it in the comment
Check blog in description
I LOVE YOU