How to add a hero grid section to any Shopify theme

Introduction

Create a bold, modern first impression with the Flexi Hero Grid Section — a visually structured layout designed to showcase multiple hero images, messages, or links in a single cohesive grid. Instead of relying on a single hero banner, a hero grid lets you highlight multiple campaigns, categories, or value propositions at once.

In the video above, you’ll learn how to add a hero grid section to any Shopify theme using Flexi’s intuitive section and block system. Discover how to build grid-based hero layouts, control image sizing, and create responsive designs that adapt seamlessly across devices.

Perfect for homepages and landing pages, the Flexi Hero Grid section integrates seamlessly with any Shopify theme. Whether you’re featuring collections, promotions, or editorial content, this section gives you the flexibility to create high-impact layouts without custom 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 Grid.

Install Section

Open the Flexi app and navigate to the sections library. Search for "Hero Grid" 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 to display your hero grid, click "Add section", and select "Hero Grid" from the available sections.

Set Section Width

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

• Full width: Create an immersive, edge-to-edge grid 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 add grid items. Each block represents one tile in the hero grid and can include an image, headline, supporting text, and optional call-to-action link.

You can mix and match content sizes, reorder tiles easily using Shopify’s drag-and-drop editor, and create dynamic layouts that guide users visually through your most important content.

Customize & Style

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

• Control the number of columns and grid layout behavior
• Adjust spacing, alignment, and image aspect ratios
• Customize overlays, typography, and color contrast
• Fine-tune mobile stacking and responsive behavior

Works Seamlessly with Dawn & Horizon

Flexi sections are built for Shopify’s modern theme architecture, which means the Hero Grid 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 Grid section follows the same responsive grid principles, spacing conventions, and accessibility standards used throughout Dawn.

This ensures your hero grid inherits your theme’s typography and button styles by default, while still giving you precise control over layout and presentation.

Horizon & Modern Framework Support

Horizon represents Shopify’s next-generation theme framework. The Hero Grid 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 grids 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 grid layouts without editing theme code
• Preview design changes safely before publishing
• Reuse the same hero grid across pages and themes
• Switch themes without rebuilding visual layouts

Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi’s Hero Grid section adapts automatically — helping you create bold, modern layouts that capture attention and guide customers through your store.