How to Add Separate Desktop & Mobile Banners in Shopify Dawn Theme (With Perfect Mobile Image Fit)
Are you using the Shopify Dawn theme and want to make your store’s banner look amazing on both desktop and mobile? Sometimes a banner that looks great on desktop can get cropped or stretched on mobile devices. The good news: you can show two different banners—one optimized for desktop, and one for mobile—with a simple code trick.
In this post, I’ll walk you through step-by-step how to:
- Upload separate banner images for desktop and mobile
- Add custom code to your Shopify Dawn theme to show the right banner on the right device
- Fix mobile banner image sizing with CSS’s
object-fitproperty so it looks perfect
Why Use Separate Banners for Desktop and Mobile?
Desktop screens are wide and short, while mobile screens are narrow and tall. Because of this, a single banner image usually can’t look good on both without stretching or cropping.
By uploading two banners optimized for each screen size, you keep your store looking professional and polished everywhere.
Step 1: Create Your Desktop and Mobile Banners
Make two images with these recommended dimensions:
- Desktop banner: around 2000 x 800 pixels (wide and not too tall)
- Mobile banner: around 1000 x 1200 pixels (taller to fill vertical space)
Tip: Keep important text or logos centered so they aren’t cut off on any device.
Step 2: Upload Your Banner Images to Shopify
- From your Shopify admin, go to content > Files
- Upload both banner images here
- Copy the URLs of each uploaded image
Step 3: Add Your Banners with Custom Liquid Code
- Go to Online Store > Themes > Customize
- Add a new Custom Liquid section where you want your banner to appear
- Paste this HTML, replacing the URLs with your own:
/*Custom Liquid Code*/
<div class=”banner-desktop”>
<img src=”YOUR DESKTOP IMAGE URL” alt=”Banner for Desktop”>
</div>
<div class=”banner-mobile”>
<img src=”YOUR MOBILE IMAGE URL” alt=”Banner for Mobile”>
</div>
Step 4: Add CSS to Show the Right Banner on Each Device
- Go to Online Store > Themes > Edit Code
- Open your main CSS file (usually
Assets/base.cssorAssets/theme.css) - Add this CSS at the bottom:
/* Custom Banner Styling */
.banner-desktop {
display: block;
}
.banner-mobile {
display: none;
}
.banner-mobile img {
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 749px) {
.banner-desktop {
display: none;
}
.banner-mobile {
display: block;
}
}
This CSS:
- Shows the desktop banner on screens wider than 749px
- Shows the mobile banner on screens 749px or narrower
- Uses
object-fit: coveron the mobile banner image so it fills the space nicely without distortion
Step 5: Preview and Adjust
Use Shopify’s theme preview tool to check your store on desktop and mobile views. Adjust your banner images if needed to keep key content visible.
Bonus Tips
- Use image editing tools like Canva, Photoshop, or free online resizers to create and crop banners easily
- Keep file sizes optimized for faster loading (try Shopify’s built-in image optimizer or tools like TinyPNG)
- Experiment with CSS
object-positionif you want to control which part of the mobile banner crops
Conclusion
Adding separate desktop and mobile banners in Shopify’s Dawn theme is a simple but powerful way to improve your store’s design and user experience. With just a few lines of code and optimized images, your banners will look perfect on every device.
If you found this helpful, check out my video tutorial for a step-by-step walkthrough and don’t forget to subscribe for more Shopify tips!