How to Display a Perfect, Mobile-Ready and Fully Responsive Banner on Your Shopify Store
One of the first things people ask me is how to have a different banner image on mobile without a slider app.
Long story short, this is a responsive image banner. You upload a desktop image and a mobile image, add optional text and buttons, and Shopify serves the right one. No app, no extra JS from a third party.
I built it this way because most themes still crop one image for both screens. This one is copy/paste. Last tested on Dawn in 2026.
Want to see it first? Here's a live demo.
Works on Dawn, Sense, Craft, Spotlight, Taste, Refresh and most OS 2.0 themes. Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.
This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.
Looking to install this on a premium or custom theme? Contact us.
How to add it
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, click the 3 dots > Edit code.
- Open the sections folder and click Add a new section. Name it exactly ezfy-responsive-banner. The file name and the section name have to match, otherwise Shopify won't load it.
- Paste this code, then save. This is the whole section, schema included:
- Click Save.
- Click the 3 dots > Customize.
- Click Add section and look for Responsive Banner (PRO). Add it to the template you want.
- Add a desktop image and a mobile image, then save.
- Save the theme.
If you prefer Shopify's own editor docs, they cover Edit code here: Edit your theme code.
How to customize it
Upload two images. Desktop should be wide. Mobile should be taller, closer to 4:5 or 9:16, so it doesn't look cropped on a phone.
You can add a heading, a short line of text and buttons. Overlay color helps if the photo is busy. Keep the text off the edges on mobile or it will sit under the notch.
If the banner doesn't show up
Check the section file name. It has to be ezfy-responsive-banner.
In Customize, look for Responsive Banner (PRO). That's the name in the schema.
If mobile still shows the desktop crop, you didn't add a mobile image. The section will fall back to the desktop file.
If you get stuck, tell me which theme you're on. That usually solves it.
Subscribe for Shopify researches, tips & guides
Get high quality posts about Shopify insights. No spam, unsubscribe anytime.