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 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 nest the blocks into a reusable mini-block?
The nested block feature is new and easy to follow in just some 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! More than adding, 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 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.
For example, you can:
- Set a block to Full width to make it span the entire row (ideal for big images or banners).
- Set a block to 50% width so two blocks sit side by side (great for pairing an image with text).
To customize the width of the blocks:
STEP 1: Click on the block you want to customize to open its settings panel.
STEP 2: Adjust its Desktop width and Mobile width.
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
STEP 4: Click "Save" to apply changes.
- Prompt quality matters: You need to provide a clear and detailed prompt to get results close to what you expect.
- Possible bugs: Some glitches or unexpected outputs may occur when using AI-generated blocks.
6. Support Information
Need help? Contact our support team at Omni Themes Support.
