How to add a hero with blocks sections to any Shopify theme

Introduction

Build flexible, content-rich hero layouts with the Flexi Hero with Blocks Section — a modular hero section designed to combine strong visuals with customizable content blocks. Instead of a single static message, this section lets you layer headlines, text, buttons, icons, or supporting elements inside a structured hero layout.

In the video above, you’ll learn how to add a hero with blocks section to any Shopify theme using Flexi’s intuitive block-based system. Discover how to mix and match content blocks, control layout hierarchy, and create responsive hero designs that adapt across devices.

Perfect for homepages, landing pages, and campaign-focused layouts, the Flexi Hero with Blocks section integrates seamlessly with any Shopify theme. Whether you’re highlighting key features, value propositions, or calls to action, this section gives you precise control over both design and messaging.

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 Hero with Blocks.

Install Section

Open the Flexi app and navigate to the sections library. Search for "Hero with Blocks" 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 section to appear, click "Add section", and select "Hero with Blocks" from the available sections.

Set Section Width

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

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

Add Content

Click "Add block" to build out your hero content. Each block can represent a headline, paragraph, button group, icon row, or supporting content element.

Blocks can be reordered freely, allowing you to create structured hero layouts such as stacked messaging, feature highlights, or multi-CTA hero sections without editing theme code.

Customize & Style

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

• Control block spacing, alignment, and layout direction
• Adjust background images, overlays, and focal points
• Customize typography, colors, and button styles
• 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 with Blocks 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 with Blocks section follows the same responsive layout principles, spacing conventions, and accessibility standards used throughout Dawn.

This ensures your hero content inherits your theme’s typography and button styles by default, while still allowing advanced layout control through Flexi’s settings.

Horizon & Modern Framework Support

Horizon represents Shopify’s next-generation theme framework. The Hero with Blocks 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 modular 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 content blocks without editing theme code
• Preview layout changes safely before publishing
• Reuse the same hero with blocks 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 with Blocks section adapts automatically — helping you create flexible, high-impact hero layouts that clearly communicate your message and guide customers toward action.