Multi column
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
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
In the editor side panel, click (+) Add section and select Multi-column. Click and hold the drag handles ⋮⋮ to re-order sections.
Click the section to edit the general section styles: Padding | Top divider | Animation
Add column blocks
Add up to 8 Columns with a featured image, headings, and button. There are 3 different types of column blocks: Columns, Columns with images, and Columns with icons.
Click (+) Add block to add new columns blocks, and use the drag-and-drop handles ⋮⋮ to change their order.
Add headings and button
For all column block types, add headings, text, and buttons. You can change the text size, max width of text, and button style.
Click Column block to find settings
Accent
Add text to show a small heading above the main heading.
Heading tag
Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.
Heading
Add text for the column block heading. We recommend using a short title.
Heading size
Change the font size of the heading: Small, Medium, Large, or Extra large.
Text
Add text to show beneath the heading.
Text width
Set the maximum width of heading text as a percentage of the window width on a desktop.
Text size
Change the font size of the text: Small, Regular, Large, or Extra large.
Button link
Select or paste a URL for the button.
Button label
Enter text to display a button label. Leave this field blank to remove the button.
Button style
Change the button style to Solid, Outline, or Text.
Add image
Upload an image to display a the top of the column.
Click Image with text column block to find settings
Image
Select or upload an image. There are no required dimensions. We recommend using the same shape and size of images for multiple columns with images.
Image width
Set the width of the image between 50 and 100 percent of the column width.
Image aspect ratio
Crop the shape of your image to Square (1:1), Landscape (3:2), or Portrait (2:3). Choose Natural to display the original image shape.
Apply circle crop to image
Choose to crop all images to appear as circles. This setting applies only when the Image aspect ratio is set to Square.
Image focal point
Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.
Image position
Display the image Above text or Below text
Image link
Enter a URL or page to turn the image into a clickable link.
Small caption
Enter text to show below the image.
Add icon
Select an icon to display a the top of the column.
Click Image with icon column block to find settings
Icon name
Select from 30+ icons to show in the column.
Icon width
Increase or decrease the width of the icon for desktop: between 50 to 100 percent of the width of the column. screens.
Mobile icon width
Increase or decrease the width of the icon for mobile: between 50 to 100 percent of the width of the column. screens.
Custom icon image
Upload your own icon to show in the column. We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px.
Change column alignment
Adjust the alignment and position of the headings and text within all columns.
Click Multi-column section to find settings
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.
Change section layout
You can customize the Desktop and mobile layout of the column blocks, including the number of columns, column spacing, and row spacing.
Click Multi-column section to find settings
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
Enable slider on mobile
Display columns in a single row that can be swiped through.
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.
Section header
Add a heading as the section title and change the heading size and alignment.
Click Multi-column section to find settings
Heading
Change or remove the title of the section.
Heading tag
Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. This option doesn't change the heading's appearance.
Heading size
Set the heading text to Small, Medium, or Large.
Subheading
Add multiple lines of rich text below the heading.
Subheading size
Set the subheading text to Small, Medium, or Large.
Heading alignment
Position heading text to the Left or Center above row list.
Section colors
Select colors for the section Background, Text, Buttons, and Solid button text.
Click Multi-column section to find settings
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.
Related links
Last updated
Was this helpful?