How to add featured hero images to any Shopify theme
Share
Introduction
Make a strong first impression with Flexi Featured Hero Images — a flexible section designed to highlight key messages, promotions, or brand moments at the top of your pages. A well-designed hero image sets the tone for your storefront and immediately communicates value to new and returning customers.
In the video above, you’ll learn how to add featured hero images to any Shopify theme using Flexi’s intuitive section settings. Discover how to combine imagery, headlines, supporting text, and calls-to-action into a cohesive hero layout that works beautifully across devices.
Ideal for homepages, collection pages, and landing pages, the Flexi Featured Hero Images section integrates seamlessly with any Shopify theme. From bold promotional banners to subtle brand storytelling, you can create hero layouts that feel native to your store.
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 Featured Hero Images.
Install Section
Open the Flexi app and navigate to the sections library. Search for "Featured Hero Images" and click "Add to Theme" to install it instantly.
Add to Your Store
Go to your Shopify admin → Online Store → Themes → Customize. Click "Add section" and select "Featured Hero Images" from the available sections.
Set Section Width
In the section settings, choose your preferred layout:
- Full width: Create an 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 create hero slides or static hero layouts. Each block can include a background image, headline, supporting text, and one or more call-to-action buttons.
You can feature seasonal promotions, new product launches, brand messaging, or editorial content and reorder hero content easily using Shopify’s drag-and-drop editor.
Customize & Style
Fine-tune your hero images using Flexi’s built-in settings:
- Adjust image height, focal point, and overlay styles
- Control text alignment and content positioning
- Customize buttons, typography, and color contrast
- Set responsive behavior for desktop and mobile
Works Seamlessly with Dawn & Horizon
Flexi sections are built for Shopify’s modern theme architecture, which means Featured Hero Images work seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.
Dawn Compatibility
Dawn is Shopify’s reference theme, and the Flexi Featured Hero Images section follows the same responsive layout and spacing conventions used throughout Dawn.
This allows hero content to inherit your theme’s typography, button styles, and accessibility standards by default, while still giving you full control over visual presentation.
Horizon & Modern Framework Support
Horizon represents Shopify’s next-generation theme framework. The Featured Hero Images section integrates cleanly with Horizon-based themes without overriding global styles or introducing JavaScript conflicts.
Because each hero section is self-contained and theme-safe, you can confidently add featured hero layouts 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 touching theme code
- Preview design changes safely before publishing
- Reuse hero layouts across multiple themes
- Switch themes without rebuilding your hero content
Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi Featured Hero Images adapt automatically — helping you create impactful first impressions while maintaining performance and design consistency.