Flexible section
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
General settings
Section width
3 options for container
Stretch width: span the section width regardless of screen size.
Fix width: depends on your page content width in Theme settings -> Layout.
Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.
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
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 Horizontal AND Carousel is OFF.
Forces horizontal blocks to stack vertically on mobile for better readability.
Content Wrap
Only visible when Layout Direction is Horizontal.
Check this box to allow content blocks to wrap onto a new line if their combined width exceeds the section's available space.
Section 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 Section 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
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 is ON.
Sets the number of slides visible simultaneously, including support for partial slides (e.g., 1.5 slides). (Range: 1 to 2).
Column gap
Mobile Carousel
Only visible when Carousel is ON.
Sets the space between the slides in the mobile carousel, measured in pixels (px) (Range: 0px to 50px).
Alignment Settings
These settings control the positioning of content blocks within the section, based on the chosen Layout Direction.
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.
Background Media
Choose the type of media to use as the section's background:
None (Default)
Image
Video.
Image
Only visible when Background Media is Image.
Allows you to select or upload an image to use as the background for the entire section.
Local Video
Only visible when Background Media is Video.
Allows you to upload a video file to use as the background media.
Block Padding
Only visible when Background Media is not None.
Sets the amount of inner spacing (padding) around the content blocks within the section, measured in pixels (px) (Range: 0px to 100px).
Corner Radius
Controls the rounding of the section's corners:
None (No rounding)
Custom (Allows you to set a specific radius).
Custom Radius
Only visible when Corner Radius is Custom.
Use the slider to set a specific corner radius for the section, measured in pixels (px) (Range: 0px to 100px).
Enable Background Overlay
Check this box to activate an overlay layer that sits above the background media (image/video) but beneath the section content. This is useful for improving text contrast.
Overlay Color
Only visible when Enable Background Overlay is checked.
Allows you to select the color for the overlay, including support for alpha/transparency (Opacity).
Overlay Style
Only visible when Enable Background Overlay is checked.
Defines the look of the overlay:
Solid (A single uniform color)
Gradient (A smooth transition between colors).
Gradient Direction
Only visible when Overlay Style is Gradient and Enable Background Overlay is checked.
Sets the direction of the color transition for the gradient overlay:
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.
Top
Customize the top margin of the section
Bottom
Customize the bottom margin of the 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:
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
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.
Links Blocks
Last updated