Flex columns section
The Flex columns section of Borders is a multicolumn layout built from Column blocks that hold theme blocks such as text, button and badge.
Applies to: Borders 3.1.0 and later. Added in: Borders 3.0.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Flex columns section shows columns side by side, in a grid or a slider. Each column is built from small blocks you stack freely: text, buttons, badges, spacing, your own code or app blocks. Use it for shipping and returns notes, services or short features.
Where to find it: Online Store → Themes → Customize → Add section → Flex columns
Layout
- Heading, Heading tag and Hide heading border set the optional section heading. See General section styling.
- Desktop layout sets 3, 4 or 5 columns. On smaller screens the grid shows fewer columns, down to 2.
- Mobile layout sets 1 or 2 columns on phones.
- Layout: Slider shows the columns in one row that customers swipe or scroll; Grid wraps them into as many rows as needed.
- Text alignment aligns the content of every column: left, center or right.
The section is hidden on the storefront when it has no Column block.
Columns and their blocks
- Add a column with Add block → Column. The Column block has no settings of its own.
- Inside a column, select Add block to add theme blocks: Text, Button, Badge, Content group, Custom Liquid and Empty space. App blocks from your installed apps can be added too.
- Drag the blocks to reorder them inside a column, or drag a whole column to move it.
- A new Column comes with sample Text blocks you can change or delete.
Inner content design
By default, the columns sit directly on the section background, separated by the grid lines. Inherit card design properties turns each column into a card with its own background and padding, like the cards of other Borders sections. With it on, more settings appear:
- Color scheme sets the colors of the column cards.
- Hide borders removes the lines between the cards.
- Remove border radius makes the card corners square.
- Remove inner padding & border radius removes the padding and the rounded corners, so the content touches the card edges.
Setting up flex columns
Add the section
Select Add section → Flex columns. The section comes with four columns.
Choose the layout
Set Desktop layout, Mobile layout and Layout (Slider or Grid).
Fill the columns
In each Column, change the Text and Button blocks, or add Badge, Content group, Empty space and app blocks with Add block.
Style the columns as cards
To give the columns a background, turn on Inherit card design properties and choose the Color scheme.
Why are the Inner content design settings missing?
They show only when Inherit card design properties is on. Turn it on to give the columns a background, and the color scheme, border and padding settings appear under it.
How do I put a button next to a badge in a column?
Add a Content group block to the column and put the Button and Badge blocks inside it. A content group places its blocks side by side instead of one under the other.
All Flex columns settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Column.
Flex columns section: Section heading
Where to find it: Flex columns → Section heading
Heading (text box).
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
Flex columns section: Layout
Where to find it: Flex columns → Layout
Desktop layout (dropdown, default: 4 columns): Sets 3, 4 or 5 columns on desktop. Smaller screens show fewer columns, down to 2. Options: 3 columns, 4 columns, 5 columns.
Mobile layout (dropdown, default: 1 column): Sets 1 or 2 columns on phones. Options: 1 column, 2 columns.
Layout (dropdown, default: Slider): Shows the columns in one row that customers swipe (Slider) or wraps them into rows (Grid). Options: Slider, Grid.
Text alignment (dropdown, default: Left): Aligns the content of every column. Options: Left, Center, Right.
Flex columns section: Section design
Where to find it: Flex columns → Section design
Color scheme (color scheme, default: Scheme 1).
Hide section bottom border (checkbox, default: off).
Flex columns section: Inner content design
Where to find it: Flex columns → Inner content design
Inherit card design properties (checkbox, default: off): Turns each column into a card with its own background and padding. Turn it on to see the color scheme, border and padding settings below.
Color scheme (color scheme, default: Scheme 2): Sets the colors of the column cards. Shown only when Inherit card design properties is on.
Hide borders (checkbox, default: off): Removes the lines between the columns. Shown only when Inherit card design properties is on.
Remove border radius (checkbox, default: off): Makes the card corners square. Shown only when Inherit card design properties is on.
Remove inner padding & border radius (checkbox, default: off): Removes the padding and rounded corners of the column cards. Shown only when Inherit card design properties is on.
Where to find it: Flex columns → Column.
Accepts these blocks: any theme block and app blocks.
The Column block has no settings of its own in Borders 3.1.0.
Related pages
- Borders blocks: the theme blocks you can put in a column.
- Flex grid section: text and media cards that span columns and rows.
- General section styling: the section heading and design settings.
- Layout theme settings: the grid padding and radius of cards.