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

Setting	Description
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

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 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.
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	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 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.

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'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.

Setting	Description
Top	Customize the top margin of the section
Bottom	Customize the bottom margin of the section

Section divider

Setting	Description
Show divider	Display a dividing line to separate 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:

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

Links Blocks

Popup link

Shopify Variant Images As Swatches Add To Cart Not Working Add Custom Javascript Shopify Multi Currency Preview Shopify Theme Shopify Theme Demo Import Shopify Product Media Videos And 3d Shopify Video Autoplay Not Working

Comments

No comments yet

Looking for Help?
Get support from our team

If you can't find the answer you're looking for, our support team is here to help.

Contact Support Submit a Ticket

Purity