Multi column
Theme section
The Multi-column section displays a row of text blocks with optional images and icons, great for highlighting your values, how your company works, or explaining key elements of your product.
Set up section
Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields
Add column blocks
Add up to 8 Columns with a featured image, headings, and a call-to-action button.There are 3 different types of column blocks: Columns, Columns with images, and Columns with icons.
Change column alignment
Adjust the alignment and position of the headings and text within all columns.
Change column layout
You can customize the Desktop and mobile layout of the column blocks, including the number of columns, column spacing, and row spacing.
Section content
Add section headings to display above the columns and adjust the style and layout of the whole section.
Section style
Change the section colors, padding, animation settings, and add a section top divider.
Settings reference
Click a Column block to find the following settings. Click (+) Add block to add new blocks, and use the drag-and-drop handles ⋮⋮
to change their order.
Column blocks
Setting | Description |
---|---|
Accent | Add text to show a small heading above the main heading. |
Heading | Add text for the column block heading. We recommend using a short title. |
Heading size | Change the font size of the heading to Small, Medium, Large, or Extra large. |
Text | Add text to show beneath the heading. |
Text size | Change the font size of the text to Small, Medium, Large, or Extra large. |
Max width of text | Set the maximum width of heading text as a percentage of the window width on a desktop. |
Button link | Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank. |
Button label | Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). |
Button style | Choose a style for the button. Select Solid, Outline, or Text. |
Click the Multi-column section to find the following settings.
Section content
Setting | Description |
---|---|
Heading | Enter text to show a heading above the section. |
Subheading | Enter text to show a subheading below the heading. |
Heading size | Change the font size of the heading to Small, Medium, or Large. |
Heading alignment | Align the headings to the Left, Center, or Right of the section. |
Column content layout
Setting | Description |
---|---|
Content vertical alignment | Position content within all column blocks towards the Top, Center, or Bottom. |
Content background padding | Change the amount of space around the content within column blocks. Select either Small, Medium, or Large. This option applies to blocks when Show background behind columns is enabled in the Color settings. |
Desktop layout
Setting | Description |
---|---|
Number of columns | Display 1 to 6 columns per row on desktop screens. |
Column spacing | Change the maximum amount of horizontal space between columns (4 to 48 pixels). |
Row spacing | Change the maximum amount of vertical space between columns (4 to 48 pixels). |
Column alignment | Align the columns to the Left, Center, or Right of the section. |
Mobile layout
Select the Mobile view in the theme editor top bar to preview these settings.
Setting | Description |
---|---|
Number of columns | Display 1 or 2 columns per row on mobile screens. |
Column spacing | Change the maximum amount of horizontal space between columns (4 to 48 pixels). |
Row spacing | Change the maximum amount of vertical space between columns (4 to 48 pixels). |
Column alignment | Align the columns to the Left, Center, or Right of the section. |
Color
Setting | Description |
---|---|
Background | Select the color of the section background. |
Text | Enter multiple lines of text. |
Button | Select the color of the button background. |
Solid button text | If the Solid button style is selected in the button block settings, select the color for the button text. |
Section style
Setting | Description |
---|---|
Enable animation | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more. |
Top divider | Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings. |
Padding | Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None. |
Related links
Last updated