Flex columns section
The Flex columns section of Local is a multicolumn section built from theme blocks, with one column block per column.
Applies to: Local 4.2.1 and later. Added in: Local 4.0.0. Last checked: 2026-10-13 against Local 4.2.1.
The Flex columns section shows columns side by side, as a grid or a slider, and each column holds theme blocks you arrange freely: an icon, a heading, text, a button. Use it for features, store values or steps. It was added in Local 4.0.0.
Where to find it: Online Store → Themes → Customize → Add section → Flex columns
Content
- Layout shows the columns as a Slider (default; customers swipe or use the arrows) or a Grid.
- Desktop layout sets 3, 4 (default) or 5 columns per row on desktop. The layout adapts on smaller screens.
- Mobile layout sets 1 (default) or 2 columns on phones.
- Text alignment aligns the blocks inside every column: Left or Center.
Custom card design
- Inherit card design properties turns every column into a card, with the card background, border, corner radius and shadow from Theme settings. When it is off, the columns are plain text on the section background.
- With it on, Background, Text, Accent, Border, Shadow, Hide border and Hide shadow override the card colors for this section.
Section design
Besides the standard settings (see General section styling), Flex columns has Text color: the color of the section heading and, when the columns are not cards, of the column text.
Column block
Each Column block is one column. It has no settings of its own: select Add block inside it to add theme blocks or app blocks, and drag them into order. See Blocks.
Setting up Flex columns
Add the section
Select Add section and choose Flex columns.
Choose the layout
In Content, choose Layout (Slider or Grid), Desktop layout and Mobile layout.
Add the columns
Select Add block in the section and choose Column, once per column.
Fill each column
Select a Column, select Add block inside it and add the blocks you need, for example an Image (icon), a Heading and a Text block.
Choose the style
Turn on Inherit card design properties to show the columns as cards, or leave it off for plain columns.
What is the difference between Flex columns and Text columns?
Text columns has fixed fields in every column (heading, text, button). Flex columns has empty columns that take any theme block, so each column can have different content in any order.
All Flex columns settings
Every setting, with its type and default.
Accepts these blocks: Column.
Flex columns section: Heading
Where to find it: Flex columns → Heading
The Flex columns section uses the standard Heading settings, listed in General section styling. In this section the group has only Heading, Subheading and Text alignment.
Heading (text field).
Subheading (rich text).
Text alignment (dropdown, default: Left). Options: Left, Center.
These settings differ from the standard ones or exist only here:
Heading (text field).
Subheading (rich text).
Flex columns section: Content
Where to find it: Flex columns → Content
Layout (dropdown, default: Slider): Shows the columns as a slider customers swipe, or as a grid. Options: Slider, Grid.
Desktop layout (dropdown, default: 4 columns): The layout adapts itself for mobile devices. Options: 3 columns, 4 columns, 5 columns.
Mobile layout (dropdown, default: 1 column). Options: 1 column, 2 columns.
Text alignment (dropdown, default: Left). Options: Left, Center.
Flex columns section: Custom card design
Where to find it: Flex columns → Custom card design
The Flex columns section uses the standard Custom card design settings, listed in General section styling.
Inherit card design properties (checkbox, default: off): Turns every column into a card with the card style from Theme settings, and shows the color settings below. Off shows plain columns.
Background (color, default: transparent). Shown only when Inherit card design properties is on.
Text (color, default: transparent). Shown only when Inherit card design properties is on.
Accent (color, default: transparent). Shown only when Inherit card design properties is on.
Border (color, default: transparent). Shown only when Inherit card design properties is on.
Shadow (color, default: transparent). Shown only when Inherit card design properties is on.
Hide border (checkbox, default: off). Shown only when Inherit card design properties is on.
Hide shadow (checkbox, default: off). Shown only when Inherit card design properties is on.
These settings differ from the standard ones or exist only here:
Inherit card design properties (checkbox, default: off): Turns every column into a card with the card style from Theme settings, and shows the color settings below. Off shows plain columns.
Accent (color, default: transparent). Shown only when Inherit card design properties is on.
Flex columns section: Section design
Where to find it: Flex columns → Section design
The Flex columns section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Text color (color, default: transparent): Sets the color of the heading and, when the columns are not cards, of the column text.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is off.
These settings differ from the standard ones or exist only here:
Text color (color, default: transparent): Sets the color of the heading and, when the columns are not cards, of the column text.
Flex columns section: SEO
Where to find it: Flex columns → SEO
The Flex columns section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.
Flex columns section: Visibility
Where to find it: Flex columns → Visibility
The Flex columns section uses the standard Visibility settings, listed in General section styling.
Section visibility (dropdown, default: Show always): Shows the section on every screen, only below 768 px (mobile) or only from 768 px (desktop, tablets included). A hidden section is still in the page. Options: Show always, Show only on mobile, Show only on desktop.
Where to find it: Flex columns → Column. It is also available in: Table.
Accepts these blocks: any theme block and app blocks.
The Column block has no settings of its own in Local 4.2.1.