How to add a hero image section to any Shopify theme

Introduction

Create a strong first impression with the Flexi Hero Image Section — a flexible layout designed to highlight a single, high-impact image paired with clear messaging and calls to action. A hero image section helps communicate your brand, promotion, or value proposition immediately when customers land on your page.

In the video above, you’ll learn how to add a hero image section to any Shopify theme using Flexi’s intuitive section settings. Discover how to control image sizing, text overlays, and responsive behavior to create a polished hero experience across desktop and mobile.

Perfect for homepages, landing pages, and collection headers, the Flexi Hero Image section integrates seamlessly with any Shopify theme. Whether you’re launching a new product, running a promotion, or telling your brand story, this section gives you full creative control without writing code.

Setup Instructions

Install the App

Visit the Shopify App Store and install Flexi Slider Sections. Start your free trial to unlock access to all Flexi sections, including the Hero Image section.

Install Section

Open the Flexi app and navigate to the sections library. Search for "Hero Image" and click "Add to Theme" to install it instantly.

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Navigate to the page where you want the hero image to appear, click "Add section", and select "Hero Image" from the available sections.

Set Section Width

In the section settings, choose how the hero image should be displayed:

• Full width: Create an immersive, edge-to-edge hero experience
• Fixed width: Set a custom maximum width (320px – 1440px)
• Theme width: Match your theme’s default content container

Add Content

Click "Add block" to configure your hero content. Each block can include a background image, headline, supporting text, and one or more call-to-action buttons.

This allows you to clearly communicate key messages such as promotions, product launches, or brand positioning right at the top of your page.

Customize & Style

Customize your hero image section using Flexi’s built-in settings:

• Adjust image height, focal point, and overlay opacity
• Control text alignment and content positioning
• Customize typography, buttons, and color contrast
• Fine-tune responsive behavior for mobile and tablet

Works Seamlessly with Dawn & Horizon

Flexi sections are built for Shopify’s modern theme architecture, which means the Hero Image section works seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.

Dawn Compatibility

Dawn is Shopify’s reference theme, and the Flexi Hero Image section follows the same responsive layout patterns, spacing conventions, and accessibility standards used throughout Dawn.

This ensures your hero image inherits your theme’s typography, buttons, and color system by default, while still allowing precise control over layout and presentation.

Horizon & Modern Framework Support

Horizon represents Shopify’s next-generation theme framework. The Hero Image section integrates cleanly with Horizon-based themes without overriding global styles or introducing JavaScript conflicts.

Because each Flexi section is self-contained and theme-safe, you can confidently add hero images to modern and highly customized storefronts.

Theme-Safe by Design

Every Flexi section is scoped, isolated, and performance-optimized. This means you can:

• Add or update hero images without editing theme code
• Preview design changes safely before publishing
• Reuse the same hero image across pages and themes
• Switch themes without rebuilding hero layouts

Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi’s Hero Image section adapts automatically — helping you create strong visual first impressions while maintaining performance and design consistency.