Multi column
Theme section
Last updated
Theme section
Last updated
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.
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 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.
Adjust the alignment and position of the headings and text within all columns.
You can customize the Desktop and mobile layout of the column blocks, including the number of columns, column spacing, and row spacing.
Add section headings to display above the columns and adjust the style and layout of the whole section.
Change the section colors, padding, animation settings, and add a section top divider.
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.
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.
The Column with images block has the following additional 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
Display the image as a circle. Only applies when image aspect ratio is 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. You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our Image settings guide.
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.
The Column with icons block has the following additional 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.
Click the Multi-column section to find the following settings.
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.
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.
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.
Select the Mobile view in the theme editor top bar to preview these settings.
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.
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.
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
