Shopify Responsive Banners: How to Use Different Images for Desktop & Mobile (Sense Theme Guide)

Mastering Responsive Design: How to Display Unique Images for Desktop and Mobile on Shopify

Hey store owners! As experts in helping businesses thrive on e-commerce platforms, we at Shopping Cart Mover know a thing or two about the headaches that can arise from seemingly simple design challenges. One of the most common frustrations we hear about is the dreaded hero banner that looks absolutely stunning on desktop but turns into a cropped, awkward mess on mobile devices.

This isn't just a minor aesthetic issue; it's a critical user experience (UX) and conversion killer. A poorly displayed banner can obscure key messages, make your brand look unprofessional, and ultimately drive potential customers away. This very challenge recently sparked a lively discussion in the Shopify Community, specifically regarding the popular Sense theme, which is a free Online Store 2.0 theme by Shopify.

A merchant named 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 responsive cropping was messing things up. Sound familiar? Good news: the community rallied with some fantastic, practical solutions that don't require you to be a coding wizard, and we're here to break them down for you.

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 fit various screen sizes. While this is great for simplicity and ensures your site looks decent on any device, it often leads to unwanted cropping. The theme's algorithm prioritizes filling the available space, sometimes at the expense of your image's focal points.

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. This is particularly problematic when your banner includes text overlays or specific product shots that need to remain fully visible.

First Step: Always Check Your Theme Version!

Before diving into any solutions, a few community members 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 typically find this in your Online Store > Themes > Customize editor, within the "Image banner" section settings. Look for options like "Mobile image" or "Image for mobile." If it's there, you're golden! If not, proceed to the solutions below.

Solution 1: The Safest & Easiest Method (Using Theme Editor + Custom CSS)

This is the community-recommended, no-risk approach that doesn't involve editing raw Liquid code files. Since Sense is an OS 2.0 theme, every section has a built-in Custom CSS box. You can leverage this by using two separate banner sections—one for desktop and one for mobile—and then using a single line of CSS in the editor to toggle their visibility based on screen size.

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 !important; }
   }

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 !important; }
   }

5. Click Save at the top right.

How it works: The CSS `@media` rules are called "media queries." They tell the browser to apply specific styles only when certain conditions are met. In this case, the first snippet hides the desktop banner when the screen width is 749 pixels or less (typical mobile size), and the second snippet hides the mobile banner when the screen width is 750 pixels or more (typical desktop/tablet size). This ensures that only the appropriate image loads for each device, preventing cropping and optimizing load times.

Solution 2: Request Free Customization from Shopify Support

Since Sense is a free theme created by Shopify, if you are on an active paid Shopify plan, you are eligible for Shopify Design Time (up to 60 minutes of free minor theme tweaks). If you prefer Shopify’s team to code this directly into a single Image Banner section for you, this is a viable option:

1. Go to the Shopify Help Center and log into your account.
2. Contact 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."
3. Their theme support team can make the code change directly on a copy of your theme safely.

While this is a "hands-off" approach, it might involve waiting for Shopify's support team, whereas Option 1 is super quick and takes less than 2 minutes to set up yourself!

Best Practices for Optimizing Your Shopify Banners

• Image Optimization: Always compress your images before uploading them to Shopify. Large image files slow down your site, negatively impacting SEO and user experience. Use tools like TinyPNG or Shopify's built-in optimization.
• Aspect Ratios: Aim for a landscape aspect ratio (e.g., 16:9 or 2:1) for desktop banners and a portrait aspect ratio (e.g., 9:16 or 3:4) for mobile banners. This ensures your images fill the space without awkward letterboxing or excessive cropping.
• Clear Call-to-Action (CTA): Ensure your banner text and CTA button are legible on both desktop and mobile. Sometimes, you might need to adjust text size or position within the theme editor for each banner.
• Test, Test, Test: After implementing any changes, always preview your store on various devices (or use your browser's developer tools to simulate different screen sizes) to ensure everything looks perfect.

Optimizing your Shopify store for all devices is crucial for success in today's mobile-first world. By implementing these simple yet effective strategies, you can ensure your brand always puts its best foot forward, no matter how your customers are browsing. If you're looking to start your own e-commerce journey or need to migrate your existing store to a more robust platform, remember that Shopify offers unparalleled flexibility and tools to help you succeed.

At Shopping Cart Mover, we're dedicated to helping merchants like you navigate the complexities of e-commerce. Whether it's a migration project or optimizing your current Shopify setup, we're here to provide expert guidance and support.