Shopify Hero Images: Get Custom Desktop & Mobile Heights (Even on Savor Theme!)

Hey everyone! It's a common scenario in the Shopify world: you've got a stunning hero image that looks absolutely perfect on your desktop site, but then you check it on your phone, and it's either too tall, too short, or just doesn't quite hit the mark. Sound familiar? You're definitely not alone. This challenge recently popped up in the Shopify Community, and it sparked a great discussion about how to achieve that pixel-perfect responsive design.

The Responsive Hero Image Challenge: One Image, Two Worlds?

Our fellow store owner, Imprynt, kicked off a thread asking a very specific and relatable question: how to set a custom hero image height for desktop (say, 100%) and a different one for mobile (like 50%), ideally with different images for each view. They mentioned they were using the Savor theme and even shared a helpful screenshot of their theme settings:

As Mustafa_Ali pointed out, many themes, including Savor, don't always offer separate desktop/mobile height controls directly within their section settings UI. This is where a little custom code magic, or what Imprynt later vaguely referred to as "claude code" (likely custom code), comes into play. It's a perfect example of when the built-in theme options hit their limit, and you need to roll up your sleeves just a tiny bit.

The Community's Go-To Solution: Two Sections, Smart CSS

The most robust and widely accepted solution, which tim_1 clearly articulated in the thread, involves creating two separate sections for your hero banner. One section is designed specifically for desktop, and the other for mobile. Then, you use a bit of CSS magic (called "media queries") to tell your browser which section to display based on the screen size. It's a brilliant and flexible approach that gives you total control.

Step-by-Step: Implementing Separate Hero Sections for Desktop & Mobile

Let's break down how you can apply this "two sections, smart CSS" strategy to your own Shopify store, ensuring your hero images look fantastic everywhere.

Step 1: Duplicate or Create Two Hero Sections

Head over to your Shopify Admin > Online Store > Themes > Customize. Find your existing hero banner section (often called "Image banner", "Hero", "Slideshow", or similar). If you want to keep your existing content, simply duplicate this section. Otherwise, add two new hero sections to your homepage.

Step 2: Customize Each Section for Its Intended View

• For your Desktop Hero Section: Upload your high-resolution desktop-optimized image. Set its height, text, call-to-action buttons, and any other settings exactly how you want them to appear on larger screens.
• For your Mobile Hero Section: Upload a separate, mobile-optimized image. This is crucial! Mobile images often need a different aspect ratio or even different content to look good on smaller screens. Adjust its height (e.g., 50% custom height as Imprynt wanted), text, and buttons to be perfect for phones.

Step 3: Apply Custom CSS to Hide the Desktop Section on Mobile

Now for the CSS. Select your Desktop Hero Section in the theme customizer. Look for an option like "Custom CSS" or "Custom Liquid" (sometimes it's under "Custom CSS" within the section settings itself, or you might need to edit your theme's base.css or theme.css file). Paste the following code:

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

Important: You'll need to replace .your-section-class-name with the actual CSS class of your hero section. You can usually find this by inspecting the element on your live site using your browser's developer tools (right-click, "Inspect"). It might be something like .section-header, .hero-banner, or a unique ID. If your theme provides a direct "Custom CSS" box within the section settings, sometimes you can just use { display: none; } directly as tim_1 suggested, and the theme automatically targets the section's parent container.

Step 4: Apply Custom CSS to Hide the Mobile Section on Desktop

Next, select your Mobile Hero Section. In its "Custom CSS" area, paste this code:

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

Again, remember to replace .your-section-class-name with the correct class for your mobile hero section. This code tells the browser: "If the screen is 750 pixels wide or larger, hide this section."

Key Considerations:

• Breakpoint: The 749px and 750px breakpoint is a common one for distinguishing between mobile and desktop/tablet, but you can adjust these values if your theme or design requires a different cutoff.
• Section IDs/Classes: Getting the correct CSS selector (.your-section-class-name) is crucial. If you're unsure, a quick search in the Shopify Community or a chat with a developer can help you pinpoint it for your specific theme.
• Theme Updates: If you heavily customize your theme files, remember that future theme updates might overwrite your changes. Always back up your theme before making extensive code modifications, or consider using a Shopify app designed for custom CSS.

Why This Approach Works (and Why It's So Popular)

This method is a favorite among Shopify developers and savvy store owners for a few good reasons:

• Total Control: You get to design each experience (desktop and mobile) independently, from images to text overlays and button placement.
• Optimized Performance: While both sections are technically "loaded" by the browser, only one is actually displayed, minimizing visual clutter and allowing for truly distinct visual experiences.
• Theme Agnostic: It works regardless of whether your theme (like Savor) has direct UI controls for separate mobile/desktop heights. It's a universal solution!

It's fantastic to see the community rally around these kinds of challenges. Imprynt's initial question really highlighted a common pain point, and the collective wisdom, especially from folks like tim_1 and Mustafa_Ali, provided a clear, actionable path forward. Don't be afraid to dive into a little custom CSS — it can unlock a whole new level of control over your store's design and ensure your customers have a consistent, beautiful experience no matter how they browse!