Show Different Shopify Banner Image on Desktop and Mobile

different banner image for PC & Mobile
different banner image for PC & Mobile

In Shopify default Debut theme, there are sections called “image with text” and “image with text overlay”. You can use them to put an image with text on your home page, but you can’t set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.

In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:

Define your own sections

login to your store backend,select your theme to edit code

edit theme code
edit theme code

Add new section called “yx-desktop-banner”,then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.

add new section
add new section

Repeat above step to create the other section named as “yx-mobile-banner”.

Add Image Picker to the section

Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:

<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
 <div class="container-full">
   {% for block in section.blocks limit: 1 %}
	<img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
   {% endfor %}
</div>
</div>
{% schema %}
  {
    "name": "YX Desktop Banner",
    "class": "yx-desktop-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Desktop Banner Image",
      "settings": [
        {
          "label": "Desktop Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        }
      ]
    }
  ],
 "presets": [
    {
      "name": "YX Desktop Banner",
      "category": "Home",
"blocks":[{"type" : "image_picker"}]
    }
]
  }
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

You can get the above file directly from GitHub.

Save it.

Replaced yx-mobile-banner.liquid file content with the following lines:

<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
 <div class="container-full">
   {% for block in section.blocks limit: 1 %}
	<img class="img-responsive lazyload"  data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
   {% endfor %}
</div>
</div>
{% schema %}
  {
    "name": "YX Mobile Banner",
    "class": "yx-mobile-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Mobile Banner Image",
      "settings": [
        {
          "label": "Mobile Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        }
      ]
    }
  ],
 "presets": [
    {
      "name": "YX Mobile Banner",
      "category": "Home",
      "blocks":[{"type" : "image_picker"}]
    }
 ]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

You can get the above file directly from GitHub.

Don’t forget to save it as well.

Now when you customize your theme, click [Add section] you will see two new sections: ”YX Desktop Banner” and “YX Mobile Banner“.

new section shown up

Add CSS codes to control our style

After you add newly created sections to your home page, obviously we don’t want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named “yx-desktop-hidden” for the mobile banner container and put a class named “yx-mobile-hidden” into the desktop banner container. And we have given mobile and desktop banner container-related class name “yx-mobile-banner-container” and “yx-desktop-banner-container“. Now we can easily use a CSS style to control them.

add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the Assets directory.

theme.css file location in Debut Theme
@media only screen and (max-width: 749px) {
   .yx-mobile-hidden{
      display:none;
    }
   .yx-desktop-hidden{
      display:block;
    }
}

@media only screen and (min-width: 750px) {
   .yx-mobile-hidden{
      display:block;
   }
   .yx-desktop-hidden{
      display:none;
    }
}

You can copy and past the codes from JSFiddle as well.

As you can see we use CSS @media and screen size(750px as a threshold screen width) to differentiate mobile from desktop.

Debug and Test

In order to get the best performance and visual looking, we highly recommend  1920(width) * 1080(height) for desktop and 800(width) * 800(height) for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.

shopify theme preview
shopify theme preview

If you don’t like the default style, you can customer them by adding special attributes for “yx-mobile-banner-container” class to control mobile banner style and do similar changes to “yx-desktop-banner-container” class for your desktop banner.

Make it live

So far all good, if you and your customer both are satisfied with the changes. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.

publish a theme when you are editing it.

publish a theme
publish a theme

publish a theme from theme list. Themes ->Actions ->Publish.

publish a theme
publish a theme from theme list

Conclusions

Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, a different theme maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to accomplish these, please do not hesitate to leave a message at the below comment area or contact us, we will try our best to help you out.

TIPS

Shopify has deprecated the sass supporting in the theme editor, for more details please visit here

Please follow and like us:
Pin Share

You may also like...

108 Responses

  1. Asif says:

    Hi,
    I have followed the steps and successfully added the Mobile and Desktop banner. However I have 2 issues.
    1- I am still seeing the background image of the desktop banner on the mobile view, though the background image of the mobile banner is not visible on the desktop view.

    2- I would want to make both the banners full width and the section height medium, same as the image with overlay text

    Please help me with these 2 queries, it would be a great relief

    • shopifyguru says:

      1. Yes you are right, actually, we load the desktop and mobile background images just hide or show them based on specific screen size.

      2. if you want to have a full-width banner, you can set the banner container width with 100vw

      • Quique says:

        Amazing! Everything works perfect, thanks for your tip. Im trying to set the banner container in the mobile banner, full-width. How can I do this? Thanks in advance.

      • Hagan says:

        Hey, thanks so much for this guide.

        But I am still getting the banner from the desktop and mobile appearing on the same screen. Do you know how I can fix that?

  2. Ashish says:

    It works. Can you please help me on how do i add clickable buttons to these Banner.

    I want to add a button to these banners to take them to a collection page

  3. eric says:

    @shopifyguru.
    Hi, for the full-width banner, in which file to set the banner container width with 100vw?
    I followed the instructions, and it works, but it is a banner image, but I need an image with overlay text, is it possible? Thanks

    • shopifyguru says:

      hi eric , please try this:
      .yx-desktop-hidden{
      width: 100%;
      padding: 0 !important;
      }
      .yx-mobile-hidden{
      padding: 0 !important;
      max-width: 100vw !important;
      }

      • Sarah says:

        Hi, I’m trying to do the same (make the desktop and mobile banners full width), but I’m unsure whereabouts in the code I’m supposed to paste the above code in? Please can you help?

  4. simant says:

    Hi, You’re the best! I was searching for this for literally 3 days. I have one big concern hope you might be able to help! Everything is fine with the section but there is some same between the header and banner! I would like to get rid of that space between the header and the banner if possible. Can we make it like image overlay section. Hope to get your response asap! Once again thank you!

  5. says:

    .yx-desktop-hidden{
    width: 100%;
    padding: 0 !important;
    }
    .yx-mobile-hidden{
    padding: 0 !important;
    max-width: 100vw !important;
    }
    我想问下这个代码是加在哪里的

  6. Sarah says:

    Hi, I’m trying to do the same (make the desktop and mobile banners full width), but I’m unsure whereabouts in the code I’m supposed to paste the above code in? Please can you help?

  7. willy says:

    I follow all the instruction but I still see both the mobile and desktop view on the main page? What will be my mistake?

  8. Willy says:

    Hi, both yx-desktop-banner and yx-mobile-banner appear on the mobile and desktop homepage. Anyway, how can I rectify this problem?

  9. Willy says:

    Hi, my URL is https://neuuwellness.com/. I put the code into Assets > theme.css without the .liquid. Also at layout found theme.liquid but without the CSS. Maybe is it the version issue?

  10. Willy says:

    Starting recently new versions of Shopify theme will not have SASS based CSS files.

    Even if you download a new version from the theme store if the liquid, or sass, version of theme.css still doesn’t exist then most likely that theme has been converted to no longer use the .scss.liquid version as part of Shopify’s depreciation of the SASS language in favour of a modern CSS standard workflow.

    Anyway, we can work around it with theme.css or any better approach?

  11. Willy says:

    I already put the code inside Assets > theme.css but I still see both yx-desktop-banner and yx-mobile-banner with desktop and mobile view

  12. amelia says:

    Hi There!
    Would this also work for slideshows?

  13. willy says:

    my site is neuu-wellness.myshopify.com and the password is neuu. thank.

    • shopifyguru says:

      Sorry to reply later, I have checked your website.
      From your theme.css file, I can found yx-desktop-hidden .
      but from your front-end code, I mean in the HTML part , I can’t find where did you put it.
      so please check your yx-mobile-banner.liquid if you have put the correct codes in

  14. Steph says:

    is there away to add a shop button on the desktop image? 🙂

  15. Fred Douglas says:

    I have tried many times to solve this problem with the solutions provided in other blogs, but couldn’t be successful and always found some error in the process. At last, found your post, and It rocks! Thanks a lot for sharing.

  16. ahsan says:

    i am adding in prestige theme the same code provided now section option is showing but dont see images on homepage what will be the issue plz help

  17. Ratnaraj Sukale says:

    Hi, it worked thank you. I need this feature in the hero section how can I apply the CSS of the hero section to this section

  18. ChalkyWeb says:

    Thanks for this!

    How can I update the schema so I can add a url input box to the same section? I know I can hard code it but it won’t be user friendly for the team… I’ve tried copying your code and adding a ‘url’ element but I keep getting schema errors.

  19. Steph says:

    HI there,
    Everything worked, but I can’t seem to make the image that I added a url link to show the image. it links to the page I want it to, but it doesn’t show the image i selected. How do I display the image?

    • shopifyguru says:

      Could you please share your store URL and password, I can have a look.

        • shopifyguru says:

          from your store, what I can see is you did it all correct, your image has been shown up already for mobile and desktop, a little bit confused what the problem you got, can you tell me more details?

          • Steph says:

            The image with the shop now button was the one I wanted to make clickable. linking people to the shop all page. I made two versions of your code. so, I have YX Desktop Banner and YX Desktop Banner2. the second one I added a link to, but the image doesn’t show up even though I selected an image. once on the website it the placement where the image should be says NO IMAGE.

            I hope that makes sense.

  20. Steph says:

    Do you have any ideas as to why? I could possibly send a screenshot of the coding.

    • shopifyguru says:

      yes, please send me a screenshot and codes

      • Steph says:

        Do you have an email or somewhere where I can post them? Below I copied the code I used for the banner. I just want the image to link to another page but it won’t show the image I selected.

        MY BANENR CODE
        —————

        {% schema %}
        {
        “name”: “YX Desktop Banner”,
        “class”: “yx-desktop-banner-section”,
        “max_blocks”: 1,
        “blocks”: [
        {
        “type”: “image_picker”,
        “name”: “Desktop Banner Image”,
        “settings”: [
        {
        “label”: “Desktop Banner Image”,
        “id”: “yx_image_picker”,
        “type”: “image_picker”
        }
        ]
        }
        ],
        “presets”: [
        {
        “name”: “YX Desktop Banner”,
        “category”: “Home”,
        “blocks”:[{“type” : “image_picker”}]
        }
        ]
        }
        {% endschema %}
        {% stylesheet %}
        {% endstylesheet %}
        {% javascript %}
        {% endjavascript %}

  21. Iris says:

    Hello, may I know for the slider, is it all the steps above will be the same as well?

  22. Retro says:

    Thank you for this post, but I am a little confused. I followed the guide 3 times now, but I still get the desktop banner showing in the mobile view and vice versa. How can I fix this?

  23. Retro says:

    Hey, thanks for the post. But I was a little confused because I followed the guide 3 times, but I still get the desktop banner showing in the mobile version, and vice versa. Do you know how to fix this?

  24. Hagan says:

    Hello,

    I have tried to do this tutorial three times, but I keep getting the banner of the desktop appearing on the mobile version and vice versa (the mobile banner showing on the desktop version).

    Does anyone know how to fix this?

    Thanks in advance

  25. Nige says:

    Would love it if there were a workaround for Dawn theme, unfortunately the image doesn’t display.

    • shopifyguru says:

      Sorry did not test with Dawn theme, but I don’t think it is hard to get it works, Could you please share your URL and view pwd?

    • Daniel says:

      Dear all,

      I have followed the steps you provided in the article “Show Different Shopify Banner Image on Desktop and Mobile” for the DEBUT theme back then.

      However, now we are using the DAWN Theme and would like to do the same but unfortunately you cannot do the same in this particular theme.

      Do you have an updated article for the DAWN Theme, where you can also click on the images?

      Best regards,
      Daniel

  26. Nicole says:

    hello! Thanks so much for this it worked perfectly! There is only one thing i would like your help with.. In the mobile version de banner is not full width it has white spaces on both sides. Is there anyway I can make it full width?

    Thanks!

    https://www.adinausa.com/
    crewck

  27. Laura says:

    Hi this works perfectly for me – thank you. I’m wondering if I can do the same with banner images on the collection pages? Is that possible with the Debut theme?

  28. Laura says:

    Is there a way to do something similar on the collection pages – have 2 image pickers for the banners, one for desktop and one for mobile?

  29. Ignatius says:

    Hi, Thank you for sharing this useful knowledge. However the mobile is not able to show the mobile banner, it only shows the desktop banner on the mobile. Hope you can give some help.

  30. Scott says:

    Hi there. I want to apply this to a slideshow as apposed to a static banner, and be able to add a URL link as per the slideshow function in the Supply theme. Do you have the code for this. Thanks.

  31. Jasmine says:

    How can we make these banner clickable links? I’d like the banners to be linked to the product page. Thanks so much!

  32. Caitlin says:

    All works great, however the images are not constraining to the page width on either desktop or mobile. Adding sideways scroll to home page. Could you advise how to resolve this issue please? Thanks in advance

  33. Sahil says:

    Amazing solution, worked very well on Brooklyn theme. I have two queries though.
    1. There is a lot of top margin space, that i am unable to remove in both desktop and mobile, I want zero margin and the menu options to overlay on the image.
    2. Is there any way to add slideshow images for mobile and desktop instead of one image? We are aiming for slideshow section look for both mobile and desktop. Thanks in advance.

    • shopifyguru says:

      1. what’s your image size? if your image size is big(including ratio can cover your maximum screen size) enough, should not be any space there.
      or Could you please share your story URL let me have a look
      2. I think it should be ok to support slideshow, but need a lot of codes, haven’t got time to do this recently
      but I will put it in my plan, please keep eye on

  34. ben says:

    Hey does this work on other themes? I am using Debutify – I tried it and the options dont seem to show up when i go to customize. thanks

  35. Amy says:

    Hi, do you have an update on how to add the button inside the banner and make the button responsive to browser sizes?

    • Amy says:

      I followed the link you attached and manage to create a button and set the positions, but when I change browser sizes, the button moves into a different spot

  36. Daniel says:

    Dear all,

    I have followed the steps you provided in the article “Show Different Shopify Banner Image on Desktop and Mobile” for the DEBUT theme back then.

    However, now we are using the DAWN Theme and would like to do the same but unfortunately you cannot do the same in this particular theme.

    Do you have an updated article for the DAWN Theme, where you can also click on the images?

    Best regards,
    Daniel

  37. Daniel says:

    Do you have an updated article for the DAWN Theme, where you can also click on the images?

  38. Celine says:

    Hello Shopifyguru, I’m trying to include the code into my Dawn Theme in Shopify, but i can’t seem to add the code into my assets. For Dawn Theme, they only have individual assets instead of the theme.css, able to assist and let me know where to include the code?

  39. Jasmin says:

    Hello,
    I use the Theme Sense and it does work… but not completly.
    I can add a Section and Picture, but it can not be seen.

    Could you help us?

  40. Bulman says:

    Hi,

    Can you please help us? We tried add your code but we have DAWN theme?

  41. attivo says:

    hello i need help please
    What happens is that I am using the dawn theme and I can’t find where to paste the last code of the css
    since I don’t have the debut theme
    please

  42. attivo says:

    hello i need help please
    What happens is that I am using the dawn theme and I can’t find where to paste the last code of the css
    since I don’t have the debut theme
    please
    ,

  43. ROMİNA says:

    Hello,
    When I’m adding a new asset, it’s asking me to select the format now from a dropdown menu:
    .css
    .css.liquid
    .scss
    .scss.liquid
    .js
    .js.liquid

    which one should I select? I tried with scss.liquid and it gives errors:

    This file contains the following errors:
    Line 8 — Liquid syntax error: Unknown tag ‘schema’

    can you please help?

    many thanks,

  44. Kaydee says:

    Hello, please please can you help, this is exactly what I needed and have been trying to do for months.. but now there’s no CTA option? or even a way to make it click through?

    Is there anyway to make slideshows have a mobile image option too??

    Im really desperate and really struggling

Leave a Reply

Your email address will not be published. Required fields are marked *