Shopify Sense Theme: Custom Desktop & Mobile Banner Images

Hey store owners! Let's talk about something that's probably given more than a few of you a headache: those hero banners that look absolutely stunning on desktop but turn into a cropped, awkward mess on mobile. It's a super common frustration, and it came up recently in the Shopify Community, specifically regarding the popular Sense theme.

Our fellow merchant, LoveSong, kicked off a great thread asking for help. They wanted to use a beautiful landscape image for desktop and a perfectly framed portrait image for mobile, but Shopify's default cropping was messing things up. They even tried Shopify Sidekick and got code snippets they weren't comfortable with. Sound familiar? Good news: the community rallied with some fantastic, practical solutions that don't require you to be a coding wizard.

The Core Problem: Why Your Hero Banner Crops Awkwardly

Many of Shopify's free Online Store 2.0 themes, like Sense (and Dawn, Craft, etc.), come with an "Image Banner" section that's designed to be responsive. This means it tries to adapt a single image to different screen sizes. While this is great for simplicity, it often leads to unwanted cropping, especially when you have text or key visual elements that need to stay visible.

LoveSong's situation perfectly highlights this: a landscape image for desktop needs to be portrait for mobile to look good, but the theme's single image field can't magically do both without cropping.

First Step: Always Check Your Theme Version!

Before diving into any solutions, a few community members (like ai-theme-code-editor and HBNStudio) wisely pointed out that Shopify is constantly updating its themes. It's always worth checking if your current Sense theme version has added a native setting for separate desktop and mobile banner images. You'd find this in your Online Store > Themes > Customize editor, within the "Image banner" section settings.

If you're on the latest version and still don't see that option, then it's time for one of the community-tested workarounds!

The Safest & Easiest Fix: Two Banners + Custom CSS

This was hands-down the most recommended and clearest solution from experts like Weaverse, suyash1, and ajaycodewiz. It's elegant because it uses built-in theme editor features and only a tiny bit of CSS, without touching any core Liquid files. Here's how it works:

Step-by-Step Instructions:

Go to Your Theme Editor: From your Shopify admin, navigate to Online Store > Themes > Customize for your Sense theme.
Add Two Image Banner Sections: In the left sidebar, click Add section and select "Image banner." Do this twice, so you have two separate Image Banner sections on your page. You can drag them into place if they aren't where you want them.
Configure Your Desktop Banner:
- Click on the first Image Banner section in the left sidebar.
- Upload your Landscape (Desktop) image.
- Scroll down to the very bottom of the right-hand settings panel to find the Custom CSS field.
- Paste this code into the Custom CSS field (this hides the desktop banner on mobile screens):
```
@media screen and (max-width: 749px) {
  .banner { display: none !important; }
}
```
Configure Your Mobile Banner:
- Now, click on the second Image Banner section in the left sidebar.
- Upload your Portrait (Mobile) image.
- Scroll down to its Custom CSS field.
- Paste this code into the Custom CSS field (this hides the mobile banner on desktop screens):
```
@media screen and (min-width: 750px) {
  .banner { display: none !important; }
}
```
Match Content & Save: Make sure to set the same heading, text, and buttons for both banner sections so your messaging is consistent across devices. Don't forget to click Save at the top right!

This method ensures your desktop users see the landscape image, and your mobile users see the portrait one, without any weird cropping. Magic! Here's a peek at the result:

Option 2: Let Shopify Support Handle It (for Free Themes!)

If the idea of even a single line of CSS makes you uneasy, there's another fantastic option, especially since Sense is a free theme developed by Shopify. As Weaverse pointed out, if you're on an active paid Shopify plan, you're eligible for Shopify Design Time. This typically offers up to 60 minutes of free minor theme tweaks by their support team.

How to Request Shopify Design Time:

Go to the Shopify Help Center and log into your account.
Contact Support via Chat.
Clearly state your request: "I would like to use my Shopify Design Time to add a separate mobile image picker to the Image Banner section on my Sense theme."

Their team can make the necessary code changes directly and safely on a duplicate of your theme. This is perfect if you want a truly integrated solution within a single banner section, rather than managing two.

A More Technical but Contained Approach: Custom Liquid Section

HamidEjaz offered another clever solution for those who are a bit more comfortable with code but still want to avoid editing theme files directly. This involves using a "Custom Liquid" section:

First, upload both your desktop and mobile images to Content > Files in your Shopify admin. Copy their URLs.
In the theme editor, click Add section and choose Custom Liquid.
Paste the following code into the Custom Liquid box, replacing DESKTOP_URL and MOBILE_URL with your actual image URLs:
```
  
  
```

This creates a self-contained banner that swaps images based on the 749px breakpoint. Keep in mind, this is a standalone image swap, so if you need complex headings, text, and buttons overlaid, you'd have to build that into the custom liquid yourself, which can get a bit more involved.

The beauty of the Shopify community is how many different brains come together to solve these real-world problems. Whether you choose the two-banner CSS trick, leverage Shopify's free design time, or go for a Custom Liquid solution, you've got solid, tested ways to make sure your hero banners look fantastic, no matter what device your customers are using. It's all about making your Shopify store shine and provide the best experience possible!

Mastering Responsive Banners: How to Use Separate Desktop & Mobile Images on Shopify's Sense Theme