Mastering Responsive Hero Images: Custom Banners for Desktop & Mobile on Shopify

Hey everyone, let's talk about something that comes up all the time in the Shopify community: getting your hero section to look absolutely perfect on every device. We've all been there, meticulously designing that stunning banner for desktop, only to cringe when we see how it squishes or crops on a phone screen. It's a common headache, and it's exactly what one of our fellow store owners, Imprynt, recently ran into with their Savor theme.

The Responsive Hero Image Challenge: One Size Doesn't Fit All

Imprynt's goal was clear: they wanted their hero image to be a specific custom height on desktop (say, 100% of the viewport) but a different, shorter height on mobile (like 50%), and crucially, they wanted to use different images for each view. This is a brilliant approach because what looks great as a wide, sweeping landscape on a big screen often needs a more focused, portrait-style image for a phone to truly pop.

The initial roadblock? As Mustafa_Ali from the community pointed out, the Savor theme's section settings UI doesn't natively offer separate desktop/mobile height controls for banners. This is a limitation many themes share – they offer general responsive adjustments, but not the granular control Imprynt was looking for.

Here's a peek at what Imprynt was seeing in their theme settings, showing the challenge:

A Community-Powered Solution Emerges: Two Sections, Smart CSS

While Imprynt initially mentioned finding some "claude code" (perhaps a custom snippet or a different app workaround) to get by, the most robust and universally applicable solution came from a seasoned community member, tim_1. This approach uses a classic web development technique: CSS Media Queries. It's genius in its simplicity and effectiveness, and it's a trick every store owner or developer should have in their toolkit.

The core idea? Instead of trying to force one section to behave differently for desktop and mobile, you create two separate sections. One is specifically for desktop, and the other is exclusively for mobile. Then, you use a tiny bit of custom CSS to tell each section when to show up and when to hide.

How to Implement Different Hero Images & Heights with Custom CSS

This method works beautifully for hero images, videos, or any content block you want to customize for specific devices. Here’s the step-by-step breakdown:

1. Identify Your Hero Section: Go into your Shopify Admin, navigate to Online Store > Themes > Customize. Find the hero image or banner section you want to modify on your homepage.
2. Duplicate the Section: Once you've located your hero section, you'll need to duplicate it. Most themes allow you to do this directly in the theme editor. You'll now have two identical hero sections.
3. Configure Your Desktop Hero Section:
   • Edit one of the duplicated sections. This will be your Desktop Hero.
   • Upload your high-resolution desktop-optimized image.
   • Adjust its height, content, and any other settings to look perfect on larger screens.
   • Now, here’s the magic part: Look for a "Custom CSS" or "Custom liquid" field within that section's settings. If your theme doesn't offer a specific "Custom CSS" field for sections, you might need to add a custom CSS file to your theme or use a custom liquid section to inject the style.
   • Add the following CSS code to this Desktop Hero section's Custom CSS field:

   @media (max-width:749px) {
     .your-section-class-name { display: none; }
   }

   • Important Note: Replace .your-section-class-name with the actual CSS class of your hero section. You can usually find this by inspecting the element in your browser's developer tools. If your theme's custom CSS field applies directly to the section, you might just need { display: none; } as tim_1 suggested, but using a class selector is safer.
4. Configure Your Mobile Hero Section:
   • Edit the other duplicated section. This will be your Mobile Hero.
   • Upload your mobile-optimized image (often a taller, more portrait-oriented image).
   • Adjust its height, content, and any other settings to look fantastic on smaller screens. This is where you'd set your 50% custom height for mobile.
   • Again, find the "Custom CSS" field for this Mobile Hero section.
   • Add this CSS code to hide it on desktop:

   @media (min-width:750px) {
     .your-section-class-name { display: none; }
   }

   • Remember to replace .your-section-class-name with the correct class for this section, too.
5. Test Thoroughly: Save your changes and preview your store. Resize your browser window or view it on actual desktop and mobile devices to ensure both sections are displaying correctly and switching seamlessly at the 749px/750px breakpoint.

The 749px and 750px breakpoints are common choices, but you can adjust these values if your theme or design requires a different switch point.

Why This Approach is So Powerful

This "two sections, one hidden" technique is incredibly versatile. It's not just for hero images; you can use it for:

• Device-specific text: Show a longer intro on desktop, a shorter one on mobile.
• Different calls to action: Maybe a full button group on desktop, a single prominent button on mobile.
• Optimized images for performance: Serve a larger file size for desktop and a smaller, more compressed one for mobile, improving load times.

It gives you complete control over the user experience on different devices, ensuring your brand looks its best and performs optimally no matter how your customers are browsing. It's a fantastic example of how a little custom CSS, combined with the flexibility of Shopify's section-based themes, can solve seemingly complex design challenges. So next time you're wrestling with responsive design, remember this clever community solution!