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

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

Комментарии • 176

  • @britzban
    @britzban 2 месяца назад +2

    I have been struggling with this for almost 2 weeks. Tried other peoples solutions and theirs actually made it worse or not at all and yours was the simplest and worked absolutely perfect. Sir you are a scholar. Thank you, Subscribed.

  • @funmundi
    @funmundi 10 дней назад +1

    I watched a whole bunch of videos and this one is the only one that actually helped me, thank you!

    • @WebSensePro
      @WebSensePro  9 дней назад

      Great, please subscribe to show support

  • @hannaginger
    @hannaginger 8 месяцев назад +5

    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
      @WebSensePro  8 месяцев назад +1

      Great to hear!

    • @antonyeet
      @antonyeet 4 месяца назад

      a eu achei procure melhor

    • @gordimclipador7675
      @gordimclipador7675 26 дней назад

      Você está com problema dos banner na altura, pois se seleciona a opção de adaptar a primeira imagem, deixa o banner mobile em tamanho fino igual do banner de navegador.

  • @emileeogrady6361
    @emileeogrady6361 27 дней назад

    Literally the only video I found that fixed my website, it completely upleveled the looks of my site! Thankyou, thankyou, thankyou!!!!!!!!!!!!!!!!!!!

  • @poniana
    @poniana 7 месяцев назад +1

    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!

  • @Shrimpy
    @Shrimpy 5 месяцев назад +2

    Amazing tutorial bro!! Worked perfectly

  • @supertekcanada2131
    @supertekcanada2131 10 дней назад +1

    Thank you for great video. Simple and efficient. It solved all my problems

  • @jakobcorts740
    @jakobcorts740 9 дней назад +1

    bro is a legend!

  • @moonbeam.v
    @moonbeam.v 3 месяца назад +1

    THANK YOU so much!! I've subscribed for a few months now and your videos have helped me so much ❤

    • @WebSensePro
      @WebSensePro  2 месяца назад

      I'm so glad! Pls share the video

  • @andre_the_pilot
    @andre_the_pilot 5 часов назад

    That was an excellent video on how to manage different formats, but how do you upload multiple images to the same image banner, as a slideshow with a fade, every 5-8 seconds? I don't seem to be able to find this anywhere. Can you help?

  • @EricasGirlyWorld
    @EricasGirlyWorld 5 месяцев назад +1

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

  • @MarieEveDemers
    @MarieEveDemers 3 месяца назад +2

    Thank you, works like a charm!

  • @RafaelMartins-qn9lk
    @RafaelMartins-qn9lk 8 месяцев назад +4

    Great solution! Very nice not needing to edit base css

  • @danielcalhoun6766
    @danielcalhoun6766 Месяц назад

    You are amazing!!!! Soooo simple and it gets the job done 🔥🔥🔥🔥

  • @JoshMonark
    @JoshMonark 10 дней назад +1

    thank you it worked out very well !

    • @WebSensePro
      @WebSensePro  9 дней назад

      Great to hear! Don't forget to subscribe if it helped

  • @bcwell
    @bcwell 6 месяцев назад +2

    Saved me so much time, thank you!

  • @sunburstrpg
    @sunburstrpg Месяц назад

    Great video, thanks! If we can do either method, is there any difference in performance? Which of the two methods do you think is better?

  • @UnicPresets
    @UnicPresets 4 месяца назад +1

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

    • @WebSensePro
      @WebSensePro  4 месяца назад

      Your welcome, don't forget to subscribe

  • @zomzom7802
    @zomzom7802 3 месяца назад

    Such a lifesaver! Thanks man!

  • @BhramariBySanchayita
    @BhramariBySanchayita 2 месяца назад +1

    This is great information, just changing custom CSS code, easy to track. I have just have one question (since you are a Shopify Partner), how often does Shopify makes changes to their themes that may break the website or some functionality?

  • @dread3156
    @dread3156 2 месяца назад

    game changer! Thank you so much!

  • @YelenaRichy
    @YelenaRichy 5 месяцев назад

    Appreciate such the solution! It worked perfectly.

  • @l-0upe895
    @l-0upe895 5 месяцев назад

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

  • @jamiegeurtjens1492
    @jamiegeurtjens1492 8 месяцев назад +2

    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.

  • @WhitneySolomon-q4b
    @WhitneySolomon-q4b 4 месяца назад

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

  • @sweetybeels
    @sweetybeels 7 месяцев назад +2

    This is amazing. Thank you!

  • @MrElsehrawe
    @MrElsehrawe 3 месяца назад

    thanks alot bro , searching for hours ❤❤

  • @clarissaschaos-artstudio3222
    @clarissaschaos-artstudio3222 Месяц назад

    That was so easy!!!! Thank you!!!!

  • @yashramani7559
    @yashramani7559 2 месяца назад +1

    I have added the code and it worked well, can you also tell how on mobile image (the second image) - the button comes under the banner i want to put the button on the banner as it was in the orignal theme

  • @IMRANDMEXECUTIVE
    @IMRANDMEXECUTIVE 4 месяца назад

    It's very helpful and works very well. Thanks

  • @poripurnoshareez3684
    @poripurnoshareez3684 5 месяцев назад

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

  • @GamieFor
    @GamieFor 2 месяца назад

    PERFECT!!! Managed to change! I've left a comment on your earlier RUclips which I couldn't do it, I will delete that. Thank you!!!

  • @WinningMarketing
    @WinningMarketing 6 месяцев назад

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

    • @WebSensePro
      @WebSensePro  6 месяцев назад

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

  • @sadiawaheed9008
    @sadiawaheed9008 2 месяца назад +1

    subscribed, thank you! :)

  • @blastoisecharizard
    @blastoisecharizard 5 месяцев назад

    Thank you! this worked perfectly!

  • @AnzlaNaeem
    @AnzlaNaeem 2 месяца назад +1

    Thank you 👍

  • @alexandriamaloney8961
    @alexandriamaloney8961 8 месяцев назад

    Thank you, so so appreciative of this!

  • @LLCoolJake76
    @LLCoolJake76 7 месяцев назад

    Worked great! Thank you!

  • @Entertainment4u15
    @Entertainment4u15 4 месяца назад +1

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

  • @brookelanzi6599
    @brookelanzi6599 5 месяцев назад

    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?

  • @tae_nae9833
    @tae_nae9833 5 месяцев назад

    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
      @WebSensePro  4 месяца назад +1

      Great, please share it too

  • @yamubeauty
    @yamubeauty 4 месяца назад +1

    does this work with the autoplay videos u gave us?

    • @WebSensePro
      @WebSensePro  4 месяца назад

      Not it does not

    • @dylanasmaro6491
      @dylanasmaro6491 Месяц назад

      @@WebSensePro hi is it possible to make a video for this? Because the autoplay video for desktop is good, however mobile display is compressed
      Thanks

  • @bamtekhome2258
    @bamtekhome2258 6 месяцев назад +1

    AMAZING thank you!

  • @usmanghani-im4qc
    @usmanghani-im4qc 8 месяцев назад

    Awesome boss keep it up, works even for slideshows

  • @OTHMANE-w5u
    @OTHMANE-w5u 4 месяца назад

    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
      @WebSensePro  4 месяца назад

      You are doing something wronf

  • @MyUrbanBackyard_PDX
    @MyUrbanBackyard_PDX 4 месяца назад +1

    Fantastic! Much obliged!

    • @WebSensePro
      @WebSensePro  4 месяца назад

      Thanks, don't forget to subscribe

  • @lechicmiami
    @lechicmiami 3 месяца назад

    Is there a difference in website performance between doing it this way vs the other way?

  • @Legc26
    @Legc26 5 месяцев назад

    Great video! thanks for your help!

  • @williamworth3125
    @williamworth3125 4 месяца назад +1

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

  • @Mohammedfathimhere
    @Mohammedfathimhere 7 месяцев назад

    great value for time, Thank you

  • @NickHallett-d9c
    @NickHallett-d9c 3 месяца назад +2

    And what about Shopify's responsive theme? This code doesn't work.

  • @sassyangelcollections1578
    @sassyangelcollections1578 7 месяцев назад +1

    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
      @WebSensePro  6 месяцев назад

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

  • @gabrib1372
    @gabrib1372 2 месяца назад

    Hi! Thx so much for the video! How can I do the same but instead do it witha banner do it with a video?

    • @WebSensePro
      @WebSensePro  2 месяца назад

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

  • @TheCarsDude07
    @TheCarsDude07 Месяц назад

    hi amazing video! I use trade theme whats the best size for the banner on mobile and desktop please? I will may require your services in the future.

    • @WebSensePro
      @WebSensePro  Месяц назад

      Desktop: Height 400-600px, resolution 1920x1080.
      Mobile: Height 300-500px, resolution 800x1000.

  • @PtrBr
    @PtrBr 4 месяца назад +1

    Thank you so much mr indian man

    • @WebSensePro
      @WebSensePro  4 месяца назад

      Your welcome, please don't forget to subscribe

  • @stefanensko
    @stefanensko 7 месяцев назад

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

  • @giovab6510
    @giovab6510 День назад

    Legend.

  • @jabe5895
    @jabe5895 8 месяцев назад

    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
      @WebSensePro  7 месяцев назад

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

  • @mohammadhadeed5411
    @mohammadhadeed5411 7 месяцев назад

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

    • @WebSensePro
      @WebSensePro  7 месяцев назад

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

  • @saeedgujjar663
    @saeedgujjar663 6 месяцев назад

    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
      @WebSensePro  6 месяцев назад

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

  • @theyeethree
    @theyeethree 7 месяцев назад

    Worked

  • @cecilialopez1772
    @cecilialopez1772 8 месяцев назад

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

    • @cecilialopez1772
      @cecilialopez1772 8 месяцев назад

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

    • @WebSensePro
      @WebSensePro  7 месяцев назад

      I think so yes

  • @summerchiang725
    @summerchiang725 6 месяцев назад

    THANK YOU SO MUCH!!

  • @dpranka
    @dpranka Месяц назад

    Thank you.

  • @timhuizer7640
    @timhuizer7640 6 месяцев назад

    Do you also have this voor a collage?

    • @WebSensePro
      @WebSensePro  6 месяцев назад

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

  • @KelvinDelaCruz-fg6mc
    @KelvinDelaCruz-fg6mc 8 месяцев назад +1

    Thanks for this

  • @alwarya
    @alwarya 7 месяцев назад +1

    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
      @WebSensePro  7 месяцев назад

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

  • @StephenTutton-w7x
    @StephenTutton-w7x 5 месяцев назад

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

    • @WebSensePro
      @WebSensePro  5 месяцев назад

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

  • @Ishaan-o1w
    @Ishaan-o1w 6 месяцев назад

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

    • @WebSensePro
      @WebSensePro  6 месяцев назад

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

  • @BM8C7
    @BM8C7 4 месяца назад

    thank you bro

  • @hacohen4525
    @hacohen4525 8 месяцев назад

    Thank you verry much man saved me!

  • @GeetaPatil-o9d
    @GeetaPatil-o9d 8 месяцев назад

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

  • @gabcu1657
    @gabcu1657 6 месяцев назад

    Thank you very much!

  • @McCoyinfaith
    @McCoyinfaith 8 месяцев назад +1

    Can you please make selected variant video on dawn14.0

    • @WebSensePro
      @WebSensePro  8 месяцев назад +1

      In editing mode, turn on the notifications

  • @Kiutdxvkkk
    @Kiutdxvkkk 8 месяцев назад

    Brother your contain is ossam ❤❤ love form india

  • @fatihozdemir4221
    @fatihozdemir4221 7 месяцев назад

    will this work with the video banner?

    • @WebSensePro
      @WebSensePro  6 месяцев назад

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

  • @muhammadrehan2907
    @muhammadrehan2907 7 месяцев назад

    is this working just in Dawn theme?

  • @parkciamillo4302
    @parkciamillo4302 8 месяцев назад

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

    • @WebSensePro
      @WebSensePro  7 месяцев назад

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

  • @JCBusiness-hn9ix
    @JCBusiness-hn9ix 8 месяцев назад

    What if i want to show two images in pc and one image in mobile?

    • @WebSensePro
      @WebSensePro  8 месяцев назад

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

  • @topviralclips8194
    @topviralclips8194 2 месяца назад +1

    Desktop code not working

    • @WebSensePro
      @WebSensePro  2 месяца назад

      Thats weird work fine for us

  • @15fifteenmedia
    @15fifteenmedia 7 месяцев назад

    Perfect

  • @gessynevesfilho2335
    @gessynevesfilho2335 8 месяцев назад

    tysm!

  • @saucydee1
    @saucydee1 8 месяцев назад

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

    • @WebSensePro
      @WebSensePro  7 месяцев назад

      Desktop 1200 x 400 pixels and Mobile 360 x 120 pixels

  • @tanyakashyap681
    @tanyakashyap681 6 месяцев назад

    Sir where is the code?

    • @WebSensePro
      @WebSensePro  6 месяцев назад

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

  • @AnesidoraForHim
    @AnesidoraForHim 7 месяцев назад

    where is the code ?

    • @WebSensePro
      @WebSensePro  7 месяцев назад

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

  • @jennifermccoy2971
    @jennifermccoy2971 6 месяцев назад

    Can I hire you??

    • @WebSensePro
      @WebSensePro  6 месяцев назад

      Sure, contact via websensepro.com/contact-us

  • @SaqibRajput-op8dn
    @SaqibRajput-op8dn 7 месяцев назад

    😍

  • @NoorienParveen
    @NoorienParveen 3 месяца назад

    Thank you so much❤

  • @mommylhey
    @mommylhey 7 месяцев назад

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

  • @rachelellis8056
    @rachelellis8056 29 дней назад

    Thank you!

  • @IvanGonzalez-nt8ez
    @IvanGonzalez-nt8ez 5 месяцев назад

    Thank you for this

    • @WebSensePro
      @WebSensePro  4 месяца назад

      My pleasure! Dont forget to subscribe

  • @heyalsilverman
    @heyalsilverman 3 месяца назад

    Thank you so much!