Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

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.

Multi-column with logos and store info
Multi-column with logos and store info
Multi-column with text and images
Multi-column with text and images
Multi-column as schedule sign-up
Multi-column as schedule sign-up

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

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

  2. In the side panel, click (+) Add section and select Multi-column.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add column blocks

There are 3 different types of column blocks: Columns, Columns with images, and Columns with icons.

Add up to 8 Columns with a featured image, headings, and a call-to-action button.

Steps

In your theme editor (Customize):

  1. Click on a Column block to open the block 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 recommended 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.

Column content alignment

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

  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.

Section headings and button

Add section headings and an optional button that can link to another page.

Steps

  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 bold, italic, or linked text.

  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 layout and 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 section settings.

  2. Set up the Desktop and mobile layout for the rows of column blocks.

    Number of columns: Display 1 - 6 columns for Desktop and 1 - 2 for Mobile.

    Column spacing: Set the maximum pixel width (4 - 48 px) between the left and right edges of columns.

    Row spacing: Set the maximum pixel width (4 - 48 px) between the bottom and top of columns.

  3. Select colors for the section Background, Text, Buttons, and Solid Button color.

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

    Learn more about Section animations in Stiletto.

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

    The Top divider uses the Lines and borders color selected in the Theme Settings.

  6. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

  7. Click Save.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.