Flexible section
.png)
The Flexible Section is a multi-purpose content block that lets you design rich layouts without needing to edit any code.
You can combine images, text, buttons, and other elements in different arrangements to highlight promotions, collections, or brand stories anywhere on your store.
This section is designed to help you:
- Reuse one section for many use cases – hero banners, promo strips, feature highlights, storytelling blocks, and more.
- Control layout and alignment – adjust content width, spacing, and position so the section fits naturally into any page.
- Stay on brand – inherit global theme settings (colors, typography, rounded corners) while still allowing per-section overrides when needed.
- Stay responsive – the layout automatically adapts to different screen sizes so your content looks good on desktop, tablet, and mobile.
Use the Flexible Section when you want a highly customizable block that can adapt to different campaigns and page layouts, instead of adding multiple single-purpose sections.
Section settings
.png)
General settings
| Setting | Description |
|---|---|
| Section width | 3 options for container: |
| Color scheme | Choose colors from the predefined palette in Colors to ensure consistency with your store’s overall design scheme. |
Layout
These settings control how content inside the Flexible Section is arranged and how much space it occupies on the page.
Layout & Dimension Settings
| Setting | Description |
|---|---|
| Direction | Controls the fundamental arrangement of the content blocks within the section: • Vertical (Default — stacked one on top of the other) • Horizontal (placed side-by-side) |
| Vertical on Mobile | Only visible when Direction is set to Horizontal and Carousel is OFF. Forces horizontal blocks to stack vertically on mobile for better readability. |
| Content Wrap | Only visible when Direction is set to Horizontal. Allows content blocks to wrap onto a new line if their combined width exceeds the available section width. |
| Height | Defines the minimum height of the entire section on the page: • Auto (Default — height determined by content) • Full Screen (fills the entire viewport height) • Small / Medium / Large (preset minimum height values) • Custom (allows setting a specific height via the slider) |
| Custom Height | Only visible when Height is set to Custom. Use the slider to set a specific minimum height for the section, ranging from 100px to 1000px. |
| Gap | Sets the spacing (gutter) between the content blocks within the section, measured in pixels (px). |
Mobile settings
| Setting | Applies To | Description |
|---|---|---|
| Carousel on Mobile | Both | A checkbox that, when enabled, converts the content layout into a swiper/carousel on mobile devices, allowing horizontal scrolling of blocks. |
| Items per row | Mobile Carousel | Only visible when Carousel on Mobile is enabled. Sets the number of slides visible simultaneously, including support for partial slides (e.g. 1.5 slides). Range: 1 → 2 |
| Column gap | Mobile Carousel | Only visible when Carousel on Mobile is enabled. Sets the spacing between slides in the mobile carousel, measured in pixels (px). Range: 0px → 50px |
Alignment Settings
These settings control the positioning of content blocks within the section, based on the chosen Layout Direction.
| Setting | Applies To | Description |
|---|---|---|
| Vertical Position | Vertical Layout | Controls the vertical arrangement of blocks (main axis alignment): • Top • Center (Default) • Bottom • Space Between (distributes space evenly between blocks) |
| Vertical Alignment | Vertical Layout | Controls the horizontal alignment of blocks (cross-axis alignment): • Start (Left) • Center (Default) • End (Right) |
| Horizontal Position | Horizontal Layout | Controls the vertical alignment of blocks (cross-axis alignment): • Top • Center (Default) • Bottom |
| Horizontal Alignment | Horizontal Layout | Controls the horizontal arrangement of blocks (main axis alignment): • Start (Left) • Center (Default) • End (Right) • Space Between (distributes space evenly between blocks) |
Appearance Settings
These settings control the visual styling, background media, and container shape of the section.
| Setting | Description |
|---|---|
| Background Media | Choose the type of media to use as the section background: • None (Default) • Image • Video |
| Image | Only visible when Background Media is set to Image. Allows you to select or upload an image to use as the section background. |
| Local Video | Only visible when Background Media is set to Video. Allows you to upload a video file to use as the section background media. |
| Block Padding | Only visible when Background Media is not set to None. Sets the inner spacing (padding) around the content blocks within the section, measured in pixels (px). Range: 0px → 100px |
| Corner Radius | Controls the rounding of the section corners: • None (no rounding) • Custom (allows setting a specific radius) |
| Custom Radius | Only visible when Corner Radius is set to Custom. Use the slider to set a specific corner radius, measured in pixels (px). Range: 0px → 100px |
| Enable Background Overlay | Adds an overlay layer above the background media (image/video) and below the section content. Useful for improving text readability and contrast. |
| Overlay Color | Only visible when Enable Background Overlay is enabled. Allows you to select the overlay color, including opacity/transparency support. |
| Overlay Style | Only visible when Enable Background Overlay is enabled. Defines the appearance of the overlay: • Solid (single uniform color) • Gradient (smooth transition between colors) |
| Gradient Direction | Only visible when Overlay Style is set to Gradient and Enable Background Overlay is enabled. Controls the direction of the gradient transition: • To Top • To Bottom |
Section spacing and Padding
These settings control the outer spacing (padding) applied directly to the top and bottom of the entire section container.
| Setting | Description |
|---|---|
| Top | Customize the top margin of the section. |
| Bottom | Customize the bottom margin of the section. |
Section divider
| Setting | Description |
|---|---|
| Show divider | Displays a divider line to visually separate the section from the previous section. |
Content Blocks
The Flexible Section allows you to add and arrange various types of content blocks to create rich, customized layouts. Here is a breakdown of the available blocks:
.png)
Basic Content Blocks
These blocks form the fundamental building blocks of almost any content section.
Custom Blocks
- Custom Liquid : Provides a flexible space to input raw Liquid, HTML, CSS, or JavaScript code. This is for advanced users to implement custom design elements or complex features.
- App block: A special block type reserved for Shopify Apps to inject dynamic content or functionality directly into the section via app extensions.
Decorative Blocks
Forms Blocks
Layout Blocks
- Accordion
- Group : acts as a flexible container that allows you to nest multiple other blocks inside it. This is essential for applying layout rules (Horizontal/Vertical) and dedicated styling (Color Scheme, Background Image, Padding) to a specific cluster of content.
- Spacer
- Tab
No comments yet