Understanding Page Structure in Flexi for Shopify

How Page Structure Works in Flexi (Shopify Tutorial)

When you’re building with Flexi, you’re not just dragging in sections — you’re using a modular system designed for flexibility, consistency, and control.

In this tutorial, we’ll break down how Flexi structures each section using four key layers:

Section → Layout → Group → Blocks

This structure isn’t just semantic — it’s the foundation that makes Flexi scalable for both merchants and developers

1. Section: The Outer Container

At the top level, everything in Flexi starts with a section. This is the block of content you add through the Shopify theme editor.

The section is responsible for:

• Managing page width (e.g., full-width vs fixed)
• Applying global spacing and backgrounds
• Providing custom classes for developers

You can think of it as the shell that wraps everything else.

2. Layout: Structure & Positioning

Inside the section, Flexi uses a layout container. This defines how your content is positioned and spaced.

Layouts handle:
 • Padding and margins
 • Flex or grid logic
 • Content alignment on desktop vs mobile

This is where you set how elements behave on different screen sizes — and it’s usually controlled by settings like spacing, alignment, or gap.

3. Group: Nesting & Group Logic

Groups are optional but powerful. They allow you to group multiple blocks together, giving you control over arranging blocks in cards or containers.

 

4. Blocks: The Actual Content

 

Finally, you have the blocks — the core content elements. These can be:

• Text blocks
• Buttons
• Images
• Videos
• Icons, 
• Etc...

Each block has its own settings, but thanks to the structure above, it inherits layout and spacing rules automatically. This keeps everything visually aligned, even when blocks change.

Why This Structure Matters

 

By breaking things down into section → layout → group → blocks, Flexi gives you:

• Clean separation of concerns
• Reusable patterns that scale
• Faster editing with less duplication
• More control for developers, without complexity for merchants

It’s a system that feels simple on the surface but powerful under the hood — whether you’re building fast in the editor or maintaining a large store with dozens of custom sections.

Pro Tip: Use Groups for Repeating Patterns

When designing a section with multiple cards, features, or steps — use the Group layer to control columns and responsiveness. It keeps your design consistent and adapts across screen sizes effortlessly.

Final Thoughts

Flexi isn’t just a section library — it’s a layout system.

By understanding how each layer works — from the outer section to the inner blocks — you can build smarter, cleaner, and faster.

Whether you’re a merchant using the editor or a developer working with custom styles, this structure gives you the flexibility to scale without chaos.