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

STEPS

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   Learn how to use templates in our Templates guide.

2. Under Template, click (+) Add section and select Multi-column.

3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

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.

STEPS

In your theme editor (Customize):

1. Click on a Column block to open the settings.

   Click (+) Add block to add a new Column, Column with image, or Column with icon.

   Click Remove block or the eye icon to delete or hide a block.

2. Under Image, click Select image to upload an image or icon to display at the top of the column.

3. Adjust the Max width of text of the Column text using the slider.

   The width will need to be adjusted when there are two columns per row on desktop.

   Experiment with this setting to find a clean visual shape for your text.

4. Enter text for the column Heading.

   we recommend a short title of one or two words.

   Set the Heading size to Small, Medium, or Large.

5. Enter Text as the main column content below the Heading.

   We recommend one or a few short sentences.

   We also recommend trying to keep the text for all Columns around the same length.

6. Select or paste a URL for the Button Link.

7. Change the Button label.

   Leave this field blank to remove the button.

   The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

8. Select a Button style: either Solid, Outline, or Text.

   Click on the Multi-column section to find the color options for buttons.

9. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

   

   Click Remove block in the block settings to delete a block.

   Click the Eye icon to hide or unhide a block.

10. Click Save.

Change column alignment

Adjust the alignment and position of the headings and text within all columns.

STEPS

In your theme editor (Customize):

1. Click on the Multi-column section to open the section settings.

2. Set the Content vertical alignment and Column alignment.

3. Set the Content background padding: Applies to blocks when "Show background behind columns" is enabled.

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.

STEPS

In your theme editor (Customize):

1. Click on the Multi-column section to open the settings.

2. Change the Number of columns to display 1 - 6 columns for Desktop and 1 - 2 for Mobile.

3. Change the Column spacing to set the maximum pixel width (4 - 48 px) between the left and right edges of columns.

4. Change the row spacing to set the maximum pixel width (4 - 48 px) between the bottom and top of columns.

5. Click Save.

Section content

Add section headings to display above the columns and adjust the style and layout of the whole section.

STEPS

In your theme editor (Customize):

1. Click on the Multi-column section to open the section settings.

2. Change the Heading text as a title for your section.

   Delete the text in this field to remove the heading.

3. Enter Subheading text to display one or a few sentences below the Heading.

   Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide ↗.

4. Select the Alignment for the Heading and Subheading. Either Heading and text left, Heading and text center, or Heading center, text left.

5. Set the Heading size to Small, Medium, or Large.

6. Click Save.

Section style

Change the section colors, padding, animation settings, and add a section top divider.

STEPS

In your theme editor (Customize):

1. Click on the Multi-column section to open the settings.

2. Select colors for the section Background, Text, Buttons, and Solid button text.

3. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

   Learn more about Section animations.

4. Choose to display a Top divider that separates sections with a Solid line.

   The Top divider uses the color of Lines and borders set in the Theme settings.

5. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

6. Click Save.

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.

Columns with images

The Column with images block has the following additional settings.

Setting	Description
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.

Columns with icons

The Column with icons block has the following additional settings.

Setting	Description
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.

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
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.

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

Gallery carousel Grid Image with text