How To Add Different Banners For Desktop And Mobile In Shopify

By /

If you’re using one of Shopify’s free themes, you might have noticed that the same banner image is used for both desktop and mobile. This can be frustrating because desktop banners are wide, while mobile screens need a more vertical layout for better visibility.

If we want a Shopify store that is fully responsive, we need to show different banners on different devices. Luckily, with a simple Liquid and CSS tweak, you can display separate banner images for mobile and desktop, ensuring a better user experience.

Note that while there are other ways to get this done, this one is the most straightforward and doesn’t require editing the theme code.

1. Create Your Image Banner

Add the image banner to your store as you would normally do. Edit the title, text, buttons, and other attributes until satisfied.

2. Duplicate The Banner You Just Created

Easily click on the section’s three-dot menu and select Duplicate.

Now, you can replace the image with the alternative version destined for mobile devices.

3. Add Custom CSS Code To Both Banners

Once both banners are ready, add the following code in the Custom CSS setting. This will ensure they only appear on their assigned devices (desktop or mobile).

Add this code to the desktop image banner:

@media screen and (max-width: 749px) {
  .banner,
    slideshow-component {
      display: none;
    }
}

Add this code to the mobile image banner:

@media screen and (min-width: 750px) {
  .banner,
    slideshow-component {
      display: none;
    }
}

5. Test Your Changes

Once you’ve saved your changes, check both views of your website. You can do so directly through the mobile and desktop view buttons on the Theme Editor’s top right menu bar.

If you test your website directly on your browser, you might need to reload the page if it was open before editing your Shopify theme.

Now, your Shopify store will display optimized banners for both desktop and mobile visitors, improving their shopping experience!

Pro Tip: Always test your changes on multiple devices before publishing live. If you’re unsure, duplicate your theme before editing its code or design.

Need more help? Feel free to reach out!

Scroll to Top