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

Рет қаралды 21,472

Күн бұрын

Welcome to WebSensePro! In this tutorial, we're diving into a highly requested topic for Shopify store owners. Many of you have been reaching out with questions about customizing banners for different versions-desktop and mobile. I'll walk you through the process of displaying distinct images on your desktop and mobile versions of the website.
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
Blog: websensepro.com/blog/show-dif...
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
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us
Hire Us On Upwork: www.upwork.com/freelancers/~0...
Hire Us on Fiverr: www.fiverr.com/websensepro

Пікірлер: 213

@WebSensePro 2 ай бұрын

kzfaq.info/get/bejne/ebWAqMp9uL3GaJs.html - Updated tutorial

@chaudhryharoon1935 5 ай бұрын

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.

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@lorraineb2109 2 ай бұрын

As usual, THANK YOU so much for your straightforward, easy-to-follow, fantastic tutorials. MAGIC!!!

@WebSensePro Ай бұрын

You're welcome!

@WebSensePro 8 ай бұрын

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

@wak4694 5 ай бұрын

Thank you! So many videos with the most complicated ways to do this but this makes total sense. U rock

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@Yashika-gaming78 3 ай бұрын

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

@fansari1000 6 ай бұрын

Thank you. It was a quick change and worked perfectly.

@WebSensePro 6 ай бұрын

Glad it helped Don't forget subscribe like and share

@ejwhite1364 2 ай бұрын

Tried a few other methods and none of them worked. You're a life saver!

@WebSensePro 2 ай бұрын

Glad I could help!

@drapetree 3 ай бұрын

This worked!! This is awesome. Thank you so much for teaching

@WebSensePro 3 ай бұрын

You're welcome!

@huajade 7 ай бұрын

This is awsome sir! You just fixed my problem! Thank you so much!

@WebSensePro 7 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@booknerd3159 6 күн бұрын

Fantastic work! Thank you so much!

@WebSensePro 4 күн бұрын

You're welcome!

@nephewwwww 3 ай бұрын

Thank you so much! This was super helpful :)

@WebSensePro 3 ай бұрын

Your welcome, dobt forget to share and subscribe

@livelegacy8761 3 ай бұрын

This worked perfectly. Thank you very sincerely!

@WebSensePro 3 ай бұрын

Your welcome

@miguelangelm7642 3 күн бұрын

Thanks for the video, was absolutely helpful

@WebSensePro 3 күн бұрын

You're welcome!

@user-yu5tn1yp4n 6 ай бұрын

Thank you very much. Extremely helpful video!

@WebSensePro 6 ай бұрын

You're welcome! Don't forget to subscribe, like and share

@Saltandstarsxvanessa 3 ай бұрын

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!

@WebSensePro 3 ай бұрын

Share this content and I will get the Kiss 😅😅

@cyberspider78910 8 ай бұрын

Very much needed video....thanks a lot...

@WebSensePro 7 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@faechic888 5 ай бұрын

Just what I needed! Thanks so much

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@iamusmanshabbir142 5 ай бұрын

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

@SudheerYadavseo Ай бұрын

Thanks You So Much, For Easy and updated tutorial.

@WebSensePro Ай бұрын

You're welcome!

@CandidFounders 17 күн бұрын

WebSense is the GOAT!

@sicknorenson 5 ай бұрын

Thanks boss! Very helpful.

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@ceezzgo8461 5 ай бұрын

thanks for this tutorial, it worked perfectly

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@KaanAyfer Ай бұрын

You are the best! Worked perfectly first time

@WebSensePro Ай бұрын

Great to hear!

@ians5113 6 ай бұрын

Amazing video, great help.... thank you very much for this

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@user-nf3en6hx9j 3 ай бұрын

Thanks a lot Sir. I tried it on slideshow section and it worked. Thank You for this Knowledge.

@WebSensePro 3 ай бұрын

You are most welcome

@cl93959 3 ай бұрын

Thank you! I didn't get it the first time but it worked!

@WebSensePro 3 ай бұрын

You're welcome!

@mariarahim3358 21 күн бұрын

A lot of thanks really . God Bless you. You helped a loooooooot thank you one more time

@WebSensePro 20 күн бұрын

Glad it helped

@jared7300 Ай бұрын

Amazing. Thanks for this perfect solution.

@WebSensePro Ай бұрын

Your welcome

@user-co9yd4ix3u 4 ай бұрын

great tutorial, thank you!

@WebSensePro 4 ай бұрын

Glad it was helpful!

@Yinsterovna 6 ай бұрын

amazing! it worked!

@WebSensePro 6 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@aqsafareed19 Ай бұрын

I have try this tutorial It's 100% work! Thank You.

@WebSensePro Ай бұрын

You're welcome!

@girlwiththehoops 4 ай бұрын

I now trust you with everything. Thank you!!!!

@WebSensePro 4 ай бұрын

Thanks 😇😇

@MasonRobinson-hm3oi 2 ай бұрын

Great video, thank you!

@WebSensePro Ай бұрын

My pleasure!

@DeliciOats 5 ай бұрын

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.

@WebSensePro 5 ай бұрын

Your welcome, dont forget to subscribe. A newer solution which will be easier to this is coming soon

@craftycare 4 ай бұрын

Hi there, thank you for the tutorial!

@WebSensePro 3 ай бұрын

You are welcome!

@mahadahmed4181 8 ай бұрын

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

@WebSensePro 7 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@wildatheart15 7 ай бұрын

Thank you so much!!!!!

@WebSensePro 7 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@afrasyabkhanyousafzai7623 2 ай бұрын

Excellent! U saved me bro.

@WebSensePro 2 ай бұрын

Glad I could help

@necrutat1905 6 ай бұрын

worked thanks alot

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@SumitraThreadsbyViryaRetails 5 ай бұрын

Thank You so much!!!!!

@WebSensePro 5 ай бұрын

You're welcome! Dont forget to subscribe

@alansilverman6311 4 ай бұрын

Great, thanks

@WebSensePro 3 ай бұрын

You are welcome!

@MatheusSouza-fd4vd 3 ай бұрын

You're the best!!!!!!!!!!!!!!

@WebSensePro 2 ай бұрын

Your welcome

@nannaklich499 3 ай бұрын

THANK YOU!!!

@WebSensePro 3 ай бұрын

Your welcome

@hassimirza1644 5 ай бұрын

Great, it's worked

@WebSensePro 4 ай бұрын

Glad it helped

@jordanberry2794 6 ай бұрын

Lifesaver!!

@WebSensePro 5 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@Funny_Adam_Rose 4 ай бұрын

its really work ❤❤❤❤😊

@WebSensePro 4 ай бұрын

Glad to hear that

@Funny_Adam_Rose 4 ай бұрын

Thanku so much❤❤❤❤❤

@WebSensePro 4 ай бұрын

Your welcome

@egleruzgaite3692 3 ай бұрын

thank you!

@WebSensePro 2 ай бұрын

Your welcome

@NotDRG 21 күн бұрын

I LOVE YOU

@ivanmonreal8915 3 ай бұрын

My king 🤴🏾

@WebSensePro 3 ай бұрын

😅😅😅

@webdesignmemmingen7683 4 ай бұрын

amazing

@WebSensePro 3 ай бұрын

Thank you! Cheers!

@sarannshsjaain8249 7 ай бұрын

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?

@WebSensePro 7 ай бұрын

Yes you can! pretty simple with CSS tricks just like I showed in this video

@emilycollins3766 6 ай бұрын

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?

@WebSensePro 6 ай бұрын

Yes you can do this on multiple banners by placing ID's and adding CSS code with appropriate ID's

@igeeekable 3 ай бұрын

smartest way to do it... Its showing both the images in mobile version but i'll fix it ...thanks a ton

@WebSensePro 3 ай бұрын

Great

@igeeekable 3 ай бұрын

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.

@vuson5239 3 ай бұрын

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 !

@vuson5239 3 ай бұрын

Can U Make A Video About Make Slideshow Images Clickable On Shopify ?

@Alizakhan-94 3 ай бұрын

where is code?

@WebSensePro 2 ай бұрын

Check description of the video

@WebSensePro 2 ай бұрын

Sure, added in my list

@maxzee.c 14 күн бұрын

thanks this helped heaps. do you have a code for (multicolumn mobile only?) also?

@WebSensePro 3 күн бұрын

Please contact via websensepro.com/contact-us for paid support

@praveenbalaji2279 2 ай бұрын

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 ❤

@WebSensePro 2 ай бұрын

Updated video coming next week

@Ions11 3 ай бұрын

Thanks. This worked well. Do you think it's possible that Shopify would ever dynamically update the section IDs which would break this?

@WebSensePro 3 ай бұрын

For every new section you will have to do this

@Saltandstarsxvanessa 3 ай бұрын

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.

@WebSensePro 3 ай бұрын

Yes you will have to add sections id repeatedly

@luizjr7293 8 ай бұрын

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!

@WebSensePro 8 ай бұрын

You can adjust sizing from Customize settings

@luizjr7293 8 ай бұрын

@@WebSensePro I tried but the banner width remains bigger than the products

@danielrees6092 2 ай бұрын

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.

@WebSensePro 2 ай бұрын

Updated video coming next week

@pipoluzzi 7 ай бұрын

thanks! what size do you use for mobile slides

@WebSensePro 7 ай бұрын

You can change size via customize settings

@MerlsLife 3 ай бұрын

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

@WebSensePro 3 ай бұрын

Yes will need to add code multiple time

@dcorner4 3 ай бұрын

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?

@WebSensePro 3 ай бұрын

Try again

@iamusmanshabbir142 5 ай бұрын

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)

@WebSensePro 5 ай бұрын

It should work fine if you properly add code

@JoseGonzalezecom 4 ай бұрын

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?

@WebSensePro 4 ай бұрын

Not sure what you mean here. Do you want me to create a tutorial on how I create a tutorial?

@wildatheart15 7 ай бұрын

Please give a code for Sliding banners too? Will it work the same way for Sliding banners as well?

@WebSensePro 6 ай бұрын

Thanks for the idea, will definitely make a solution for that

@shaikh629 6 ай бұрын

Hi , thanks for the video, i tried this code but its not working for me , could you please help on this.

@WebSensePro 6 ай бұрын

Please contact via websensepro.com/contact-us for paid support

@user-lo1ys6ql9s 5 ай бұрын

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

@WebSensePro 5 ай бұрын

Thats weird, make sure you used the correct ID

@OnlineGaming-xd9ms 3 ай бұрын

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

@WebSensePro 2 ай бұрын

Wait for new video

@jmelom446 7 ай бұрын

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!

@WebSensePro 6 ай бұрын

Your feedback is noted, will check, find and post solution for this

@victormartinez3250 5 ай бұрын

Hi, by any chance have you found a solution? Thanks! @@WebSensePro

@jmelom446 4 ай бұрын

@@WebSensePro Thank you!

@Cooking_with_Minal 3 ай бұрын

Bhai mobile view ky leay konsy pixels chahie banner banany ky leay. Kya length or width hai mobile view ki plz pta dain

@WebSensePro 3 ай бұрын

Max width 480 pixel

@papuhboy 7 күн бұрын

Does this work with any image outside of banner images using the same code as long as I input the correct IDs?

@WebSensePro 3 күн бұрын

Please contact via websensepro.com/contact-us for paid suppor

@user-gw5ot1ss4u 2 ай бұрын

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?

@WebSensePro Ай бұрын

Yes, please contact via websensepro.com/contact-us for paid support

@MyUrbanBackyard_PDX Ай бұрын

👍

@sagca7985 3 ай бұрын

Does this also work for Refresh theme?

@WebSensePro 3 ай бұрын

Yes it does

@E_Angel03 2 ай бұрын

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

@WebSensePro Ай бұрын

Desktop 1200 x 400 pixels and Mobile 360 x 120 pixels

@user-sp6cw2tz5f 5 ай бұрын

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.

@WebSensePro 5 ай бұрын

Yes, working on a new tutorial for this

@wildatheart15 5 ай бұрын

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

@wildatheart15 5 ай бұрын

* sliding banners

@WebSensePro 5 ай бұрын

Weird it shouldnt be a problem

@juanjoseochoa8419 4 ай бұрын

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

@WebSensePro 4 ай бұрын

Will have to check whats wrong with it. Most of our audience confirm that its working

@simreecosmetics 5 ай бұрын

My inspect button isnt working and somehow i cant inspect my website, any other way to do this ?

@WebSensePro 5 ай бұрын

You can do that via keyboard shortcut

@engr.streetvlog 5 ай бұрын

what the size of banner for desktop and for mobile ?

@WebSensePro 5 ай бұрын

What ever you set

@CheckoutCrave 2 ай бұрын

Base.css is not showing in my code editor plzz help me how can i fix it

@WebSensePro 2 ай бұрын

Add code on any CSS file

@ziyadghazi3191 5 ай бұрын

Hello brother, it worked fine in the mobile but am still facing the issue in desktop version.

@WebSensePro 5 ай бұрын

Make sure to implement it properly

@Hidesandcult 8 ай бұрын

what is the banner size for mobile version and desktop version

@WebSensePro 7 ай бұрын

You can change size from Customize settings

@riddhisiddhiethnics Ай бұрын

Hi, are the banners clickable as wel?

@WebSensePro Ай бұрын

kzfaq.info/get/bejne/e9qafqqUydWXqas.htmlsi=0_Ip8Q0Zrh0vWXgD

@kahineeshah 7 күн бұрын

I am able to retain the desktop version. However, the mobile version is showing both. Please suggest

@WebSensePro 4 күн бұрын

Please contact via websensepro.com/contact-us for paid support

@3krby 29 күн бұрын

Hello, I have one issue, on mobile the desktop banner still shows but on desktop the mobile banner does not show

@WebSensePro 17 күн бұрын

Please contact via websensepro.com/contact-us for paid support

@LEEAtheCRAB 2 ай бұрын

Hello, encountering a problem with desktop. The codes worked on mobile, but on desktop it's not applying? :(

@TenKeep-qx9be 2 ай бұрын

did you manage to solve this? i'm facing the same issue

@WebSensePro 2 ай бұрын

Will create updated tutorial for this one

@sg7571 4 ай бұрын

I did this but it only works on the desktop and the mobile still shows both banners

@WebSensePro 4 ай бұрын

Code is not properly implemented

@pmartinezarastey 3 ай бұрын

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 ☹️

@paulay21 3 ай бұрын

I had the same issue. I couldn't figure it out how to fix it!!!

@WebSensePro 2 ай бұрын

We are in process of creating an updated tutorial for this which will add "Mobile CSS" settings on this section. Stay tuned

@WebSensePro 2 ай бұрын

We have tested it on our side and it's working fine for us

@SunnyBright433 7 ай бұрын

Will this work for slides banner?

@WebSensePro 7 ай бұрын

Yes if you pull correct ID from inspect element tool

@SunnyBright433 7 ай бұрын

@@WebSensePro Nice, thank you:)

@SunnyBright433 7 ай бұрын

@@WebSensePro Thank you again, tried it and it worked for me:)

@WebSensePro 7 ай бұрын

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

@wildatheart15 7 ай бұрын

@@SunnyBright433 how did you pull the correct ID from inspect element tool?

@shanayarajput09 4 ай бұрын

is code can be diffrent

@WebSensePro 3 ай бұрын

Meaning?

@varinderkumar4562 27 күн бұрын

Sir where is the css file please provide

@WebSensePro 17 күн бұрын

websensepro.com/blog/show-different-banner-images-on-mobile-desktop-in-shopify/

@JCBusiness-hn9ix Ай бұрын

How to show two pictures in desktop and one image in mobile?

@WebSensePro Ай бұрын

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

@CrysFilmes369 2 ай бұрын

Where's the code??????

@WebSensePro 2 ай бұрын

In the description

@Liamleviathan 6 ай бұрын

doesn't work, makes my mobile app bannerless

@WebSensePro 6 ай бұрын

Works fine for us and countless others. Please try doing that again

@halelmousai2922 5 ай бұрын

@@WebSensePro the same happens to me for some reason:\

@DatSickTV 4 ай бұрын

i dont understand nothing and the finally of this. bad preview no movement banneer

@WebSensePro 4 ай бұрын

Not clear what your issue is

@jonathanblack1095 5 ай бұрын

I thought he has a splendid man bun but it's just a poorly positioned plant.

@WebSensePro 5 ай бұрын

What do you mean?