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.

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

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

Setting
Description

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

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

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

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.

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.

Click Multi-column section to find settings

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.

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.

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.

Click Multi-column section to find settings

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

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.

Section header


Add a heading as the section title and change the heading size and alignment.

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.

Click Multi-column section to find settings

Setting
Description

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

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.


Related links

Gallery carousel Grid Image with text

Last updated

Was this helpful?