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

SettingDescription

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.

SettingDescription

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.

SettingDescription

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

SettingDescription

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

SettingDescription

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

SettingDescription

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.

SettingDescription

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

SettingDescription

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

SettingDescription

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

Last updated