User Guide

Search limit to:






Flexible area

by Admin on Aug 18, 2025

1. What is Flexible area? 

The Flexible Area is a powerful new design feature that gives merchants complete freedom to arrange content without being limited by rigid section structures. Instead of being locked into fixed section layouts, you can mix and match blocks—like text, images, products, or videos—and place them with more flexibility.

Even more, Flexible area supports nested item groups, allowing you to combine multiple elements (e.g., Image + Heading + Button) into a reusable mini-block.

2. Section Components

Section Flexible area Add a section with customizable, flexible layouts.
Available blocks Button Used to add a call-to-action button.
Collection Used to showcase a product collection.
HTML Used to insert custom HTML code.
Heading Used to add a heading.
Icon Used to place an icon for visual emphasis.
Image Used to upload and display an image.
Rich text Used to insert styled text content.
Video Used to embed a video.
Media with text Used to combine media with supporting text.
Item group Used to group multiple elements (e.g., Image + Heading + Button) into a reusable mini-block.

3. Location & Setup

To add and set up the Flexible area section:

  • Open the Shopify Theme Editor (Online store > Themes > Customize)
  • Decide where you want to place the new section.
  • Click "Add section".
  • Select "Flexible area".

4. Highlight Features

  • AI integration: Use AI-powered content blocks directly inside the section.
  • Rich in blocks: Mix product, image, text, and video blocks freely.
  • Nested item groups: Group multiple blocks (e.g., Image + Heading + Button) into reusable mini-blocks for more structured design control.
  • Section in section: Add Media with text section right into Flexible area section.

5. Common Use Cases

🤔 How to group multiple elements (e.g., Image + Heading + Button) into a reusable mini-block?

The Item group block is used to group multiple elements (e.g., Image + Heading + Button + Icon) into a reusable mini-block. This block feature is new and easy to follow in just a few steps:

STEP 1: Add the Item group block

Under Flexible area section, add an Item group block.

STEP 2: Add the sub-level blocks

Under Item group block, add any blocks that you want to 'nest' in, even another Item group block! Not only can you add, but you can also drag and drop blocks to nest.

STEP 3: Click "Save" to apply changes.

🤔 How to adjust the width of the blocks in the section?

Each block in the Flexible area section (except for the HTML block) can adjust its width. This lets you control how much horizontal space a block takes up, so you can create layouts to your preference.

To customize the width of the blocks:

STEP 1: Inside the Flexible area section, click on the block you want to customize to open its settings panel.

STEP 2: Adjust its Desktop width and Mobile width.

📊 Suggested block width options:

Width Option Column Layout Equivalent Best Use Case / Recommendation
Full Width (100%) 1 column Large images, banners, hero sections, or anything that should span the entire row.
50% 2 columns Pairing an image with text, side-by-side content blocks, or evenly split layouts.
30% 3 columns Creating a three-column layout (e.g., feature highlights, service cards).
25% 4 columns Four equally sized blocks (e.g., product categories, quick links).
20% 5 columns Narrow blocks, good for icon grids or small visual elements.
16% 6 columns Very small blocks, useful for multi-item icon or stat displays.
66% 2:1 split Pair with a 33% block for a layout with a dominant content area and a sidebar.

STEP 3: Click "Save" to apply changes.

🤔 How to generate a block using AI in the Flexible area section?

To generate a block utilizing AI, follow this, it's super easy:

STEP 1: Add Generate block

Under Flexible area section, click Add block and choose Generate.

STEP 2: Enter the prompt

At Generate block, enter a prompt in the box, describing the block you want to build.

For example: An interactive vertical timeline that highlights as the user scrolls.

STEP 3: Wait for the block to be generated and customize it as you need

STEP 4: Click "Save" to apply changes.

⚠️ Limitations when generating a block with AI

  • Prompt quality matters: You need to provide a clear and detailed prompt to get results close to what you expect.
  • Possible bugs from Shopify: This AI generation is an early version of the Shopify Summer Edition 2025 release that might create some glitches or unexpected outputs.

🤔 Suggested layouts and how to set up?

Here's an appealing layout you can create by using Flexible area section. This use case will guide you through how to recreate it:

STEP 1: Add the section

Add the Flexible area section (as guided in 3. Location & Setup)

STEP 2: Enter the heading for the section

Click on Flexible area section to open its settings panel:

  • At Heading, enter "Wet food is the healthy choice"
  • Choose Heading alignment - Center and adjust its size.

STEP 3: Add the blocks

Under Flexible area section, add blocks following this layer order:

  • Item Group (for left column features)
  • Image (for the center image)
  • Item Group (for right column features)

STEP 4: Adjust the layout

To make the blocks under Flexible area section look balanced, set the Desktop width for each block:

Column Block name Width
Left Item group 25%
Center Image 50%
Right Item group 25%

STEP 5: Customize the blocks

👉 With each Item group nested block:

  • Click on Icon block: Upload Custom icon image, adjust Alignment, and Icon size.
  • Click on Heading block: Enter Heading, choose size, and Alignment.
  • Click on Rich text block: Enter Text, choose size, and Alignment.

👉 With the Image block: Upload Image, choose Image style - Rounded and Image ratio - Square (1:1).

STEP 6: Click "Save" when done.

6. Support Information

Need help? Contact support@omnithemes.com or visit omnithemes.com.