How To Show Different Banner Images On Mobile & Desktop [Shopify - Updated]

[@hannaginger]

I'm Brazilian, and I looked for a solution to this issue in every possible place, and I didn't find any Brazilian teaching about it. Thank you very much for this video! I just subscribed to your channel

[@WebSensePro]

Great to hear!

[@antonyeet]

a eu achei procure melhor

[@Shrimpy]

Amazing tutorial bro!! Worked perfectly

[@WebSensePro]

Glad it helped!

[@poniana]

Thank you so much! I tried the older way and wondered why it wasn't working and found this updated video and now everything works again, awesome!

[@EricasGirlyWorld]

Omg just did it and it looks perfect! Thank you so much for this!!!!!

[@WebSensePro]

Great job!

[@WhitneySolomon-q4b]

This worked perfectly and so easy!! 🙌🏽💜💜💜

[@RafaelMartins-qn9lk]

Great solution! Very nice not needing to edit base css

[@WebSensePro]

Thanks!

[@bcwell]

Saved me so much time, thank you!

[@WebSensePro]

You're welcome!

[@mommylhey]

This is amazing! Thank you so much!!!!

[@WebSensePro]

You're welcome!

[@UnicPresets]

You're the man! Perfect, Thank you so much

[@WebSensePro]

Your welcome, don't forget to subscribe

[@zomzom7802]

Such a lifesaver! Thanks man!

[@WebSensePro]

Glad it helped!

[@IMRANDMEXECUTIVE]

It's very helpful and works very well. Thanks

[@WebSensePro]

Glad it helped

[@poripurnoshareez3684]

Thank you so much, Mr. Naseer. Moreover Thanks for providing this helpful tutorial. Salam.

[@MyUrbanBackyard_PDX]

Fantastic! Much obliged!

[@WebSensePro]

Thanks, don't forget to subscribe

[@WinningMarketing]

Thank you - is there a similar option with slideshow? so have rotating images but different ones for mobile and desktop?

[@WebSensePro]

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

[@YelenaRichy]

Appreciate such the solution! It worked perfectly.

[@WebSensePro]

You're welcome!

[@heyalsilverman]

Thank you so much!

[@yamubeauty]

does this work with the autoplay videos u gave us?

[@WebSensePro]

Not it does not

[@brookelanzi6599]

This is great!! Thank you! Can you confirm the dimensions and px that is needed for both desktop and mobile? I have desktop = 1920 x 1080 and mobile = 500x500 px. Is this correct?

[@WebSensePro]

Yes

[@bamtekhome2258]

AMAZING thank you!

[@WebSensePro]

You're so welcome!

[@blastoisecharizard]

Thank you! this worked perfectly!

[@WebSensePro]

Glad it helped!

[@Entertainment4u15]

Hey just wondering does this work on a slide show tab, beacsue the theme im using doesnt have a image banner

[@WebSensePro]

No it does not

[@jamiegeurtjens1492]

Will this work if you leave the buttons and heading on? Asking because I would like to keep that functionality so visitors can read my mission statement (heading) and then immediately click on the Learn More or Shop Now button.

[@WebSensePro]

Yes it will work

[@l-0upe895]

Good preparation, Good video, good code - Keep it up man, youre doing a great job! you got my sub!

[@WebSensePro]

Thanks for the sub!

[@Legc26]

Great video! thanks for your help!

[@WebSensePro]

Glad it helped!

[@usmanghani-im4qc]

Awesome boss keep it up, works even for slideshows

[@tae_nae9833]

well-done, problem solved. I subscribed right after it got resolved. I have watched a lot of videos but none of them worked for me.

[@WebSensePro]

Great, please share it too

[@alexandriamaloney8961]

Thank you, so so appreciative of this!

[@WebSensePro]

You're welcome!

[@mohammadhadeed5411]

Amazing content, but i have a question , what if i want a slideshow of image banners? how will it work then?

[@WebSensePro]

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

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

[@WebSensePro]

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

[@mohammed.fathim]

great value for time, Thank you

[@WebSensePro]

You're welcome!

[@PtrBr]

Thank you so much mr indian man

[@WebSensePro]

Your welcome, please don't forget to subscribe

[@OTHMANE-w5u]

hello thank you for your video but I don't understand how you let each one shows with phone or desktop because they shows both with me the both banners ??

[@WebSensePro]

You are doing something wronf

[@BM8C7]

thank you bro

[@williamworth3125]

Hello sir i am having problem with that - is any WIDTH/HEIGHT REQUIRED FOR DESKTOP IMAGE & MOBILE ???

[@WebSensePro]

It depends on the image

[@stefanensko]

would you mind telling me the image size you have used in the video for the mobile version? thanks in advance

[@WebSensePro]

WEBP - 1100 × 1100

[@timhuizer7640]

Do you also have this voor a collage?

[@WebSensePro]

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

[@McCoyinfaith]

Can you please make selected variant video on dawn14.0

[@WebSensePro]

In editing mode, turn on the notifications

[@fatihozdemir4221]

will this work with the video banner?

[@WebSensePro]

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

[@cecilialopez1772]

hi does this work for slideshows as well? I have have both Image banners and Slideshows.

[@cecilialopez1772]

IT WORKED THANK YOU SO MUCH! Question will this code still work when Shopify updates to new versions of dawn in future?

[@WebSensePro]

I think so yes

[@theyeethree]

Worked

[@hacohen4525]

Thank you verry much man saved me!

[@WebSensePro]

Your welcome

[@gabcu1657]

Thank you very much!

[@WebSensePro]

You're welcome!

[@GeetaPatil-o9d]

Really Helpful Sir. But my shopify is giving me only 25 ad sections, I am not able to add new section. Please help

[@WebSensePro]

It's not possible.

[@Ishaan-o1w]

Sir I want to do the same thing for the collection image..Please help sir

[@WebSensePro]

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

[@Kiutdxvkkk]

Brother your contain is ossam ❤❤ love form india

[@WebSensePro]

You're welcome! 😊

[@parkciamillo4302]

Can you do a tutorial on how to do this exact same thing but with multicolumn sections

[@WebSensePro]

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

[@saeedgujjar663]

When i paste the code and save nothing changes And in custom css section In second line of code there is a yellow error underlined when i drag mouse there it shows that "slideshow-component" does not appear to be used in this section.Try different selector.

[@WebSensePro]

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

[@alwarya]

Hi, The code is working on Android however on iOS both the banner images are visible. Could you please help fix this as we're really stuck

[@WebSensePro]

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

[@StephenTutton-w7x]

Where is the code to copy from? I can’t see it in description

[@WebSensePro]

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

[@15fifteenmedia]

Perfect

[@WebSensePro]

Thanks!

[@gessynevesfilho2335]

tysm!

[@WebSensePro]

Thanks!

[@muhammadrehan2907]

is this working just in Dawn theme?

[@WebSensePro]

Yes

[@sassyangelcollections1578]

hi i tried using it, but theres a border in mobile view, how to remove that? i'm using 375x680 size in mobile banner

[@WebSensePro]

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

[@JCBusiness-hn9ix]

What if i want to show two images in pc 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

[@jennifermccoy2971]

Can I hire you??

[@WebSensePro]

Sure, contact via websensepro.com/contact-us

[@tanyakashyap681]

Sir where is the code?

[@WebSensePro]

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

[@AnesidoraForHim]

where is the code ？

[@WebSensePro]

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

[@saucydee1]

What resolution do you like to use for desktop and mobile images in this banner?

[@WebSensePro]

Desktop 1200 x 400 pixels and Mobile 360 x 120 pixels

[@SaqibRajput-op8dn]

😍

[@sweetybeels]

This is amazing. Thank you!

[@WebSensePro]

You're welcome!

[@NoorienParveen]

Thank you so much❤

[@LLCoolJake76]

Worked great! Thank you!

[@WebSensePro]

You're welcome!

[@KelvinDelaCruz-fg6mc]

Thanks for this

[@WebSensePro]

My pleasure!

[@summerchiang725]

THANK YOU SO MUCH!!

[@WebSensePro]

You're welcome!

[@IvanGonzalez-nt8ez]

Thank you for this

[@WebSensePro]

My pleasure! Dont forget to subscribe