Shopify Hero Banner Headaches: How to Show Different Images for Desktop & Mobile on Sense Theme (No Code Editing Needed!)

Hey fellow store owners! Let's dive into a common frustration that recently sparked a great discussion in the Shopify Community: getting your hero banner to look perfect on both desktop and mobile. Our friend LoveSong, using the Sense theme, highlighted the issue – default cropping just wasn't cutting it for their landscape desktop and portrait mobile images.

Sound familiar? You're not alone. Many Shopify Online Store 2.0 themes like Sense, Dawn, and Craft lack a built-in option for separate mobile banner images. But the good news is, the community rallied with some fantastic, often no-code-editing solutions!

First Things First: Check Your Theme Version

Before diving into any solutions, a couple of experts, ai-theme-code-editor and HBNStudio, wisely pointed out that Shopify sometimes updates themes. It's always worth checking if your Sense theme version already supports separate desktop and mobile banner images natively. Go to Online Store > Themes > Customize, click on your Image Banner section, and look through the settings. You might get lucky!

If not, no worries! The community has a tried-and-true method that's surprisingly simple.

The Community Favorite: Two Banners, Smart CSS (No Liquid Code Required!)

This approach, championed by Weaverse, suyash1, and demonstrated beautifully with screenshots by ajaycodewiz, is by far the safest and easiest way to tackle this. You'll create two separate Image Banner sections in your theme editor, one for desktop and one for mobile, and then use a tiny bit of Custom CSS to tell them when to show up.

Here's how to set it up:

Step 1: Create Your Desktop Banner

1. Go to Online Store > Themes > Customize on your Sense theme.
2. Click your existing Image Banner section (or add one) and upload your Landscape (Desktop) image.
3. Click on the Image Banner section in the left sidebar to open its settings on the right.
4. Scroll down to the bottom of the right sidebar to the Custom CSS field.
5. Paste this code:

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

This code tells the browser: "Hey, if the screen width is 749 pixels or less (i.e., a mobile device), hide this banner!"

Step 2: Create Your Mobile Banner

1. In the left sidebar, click Add section and select a second Image Banner.
2. Upload your Portrait (Mobile) image to this section.
3. Click on this second Image Banner section.
4. Scroll down to its Custom CSS field on the right sidebar and paste:

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

And this code says: "If the screen width is 750 pixels or more (i.e., a desktop device), hide this banner!"

The result? Desktop users see your landscape image, and mobile users get your perfectly proportioned portrait image. No cropping, no fuss! Ajaycodewiz even shared some visual proof of this working beautifully:

Remember to set the same heading, text, and buttons on both banners so they match seamlessly. This method is quick, takes just a couple of minutes, and avoids any risky direct code edits!

A 'Code-in-Editor' Alternative (for the slightly more adventurous)

For those slightly more comfortable with a bit of code, HamidEjaz shared a clever alternative using the "Custom Liquid" section in the theme editor. This method allows you to embed your own HTML and CSS directly. You'd first upload both your desktop and mobile images to Content > Files, then add a Custom Liquid section and paste this code, replacing "DESKTOP_URL" and "MOBILE_URL" with your image links:

This is a neat, self-contained solution. Just be aware that this specific snippet is a standalone banner. If you need all the bells and whistles of the native Image Banner section (like headings, text, and buttons overlaid on the image), you'd need to either manually add those into the Custom Liquid code or look into a more involved edit of the image-banner.liquid file.

When in Doubt: Call in Shopify Support!

Weaverse also reminded us about Shopify Design Time – a fantastic resource! If you're on an active paid Shopify plan and using a free theme like Sense, you're often eligible for up to 60 minutes of free minor theme tweaks. Simply contact Shopify Support via chat and 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 safely implement the change directly on a copy of your theme.

This is a great option if you prefer a hands-off approach or a more integrated solution without using two separate sections.

A quick reminder: always duplicate your theme first (Online Store > Themes > Actions > Duplicate) before making any changes. This gives you a safe testing ground and an easy way to revert if needed.

It's truly inspiring to see the Shopify community collaborate on these practical challenges. Whether you're just starting your own Shopify store today or you're a seasoned merchant, there's always a solution out there. With these insights, you can get those hero banners looking absolutely perfect, no matter the device!