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. |
|
Used to organize content into expandable tabs, allowing users to reveal or hide details easily. |
||
| Collection | Used to showcase a product collection. | |
| Countdown timer |
Used to show remaining time for the sale with customizable display options. |
|
|
Discount code |
Used to display or highlight a discount code that customers can apply in the cart and at checkout. |
|
| 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. | |
| Text with icon |
Used to add a combination of icon and short text snippets. |
|
| Video | Used to embed a video. | |
| Media with text | Used to combine media with supporting text. | |
| Separator |
Used to add a separator line to distinguish between different sections. |
|
| 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.
