Multicolumn

You can use the multicolumn section to display content in a column layout, and add a button below the columns to take the customer to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or provide a review.

⬇️ On this page:

  1. Add the multicolumn section
  2. Edit the multicolumn section
  3. Add and edit column blocks

Add the multicolumn section


Steps to add the section:

  1. In your Shopify admin dashboard, go to Online Store > Themes.
  2. Choose the theme you want to edit and click on the Customize button.
  3. Click on the arrow down next to Home page↓and select a template you want your Multicolumn section to add to. 
  4. Click on + Add section which can be found in your left sidebar or directly in the live editor. 
  5. Scroll down, or search for Multicolumn, then click on Multicolumn. 
  6. Click and hold the drag-and-drop handles ⋮⋮  to re-order your sections.

Congrats! 👏 You just added your Multicolumn section.


Shopify's resources:

  1. Multicolumn in Online store features ↗

Edit the multicolumn section

After you've successfully added the multicolumn section following the steps above you can customize the section by adjusting your Section controls. If you don't see the customization options, click on your Multicolumn section.

Multicolumn section

  1. Heading - The title of the section. Leave blank if you don't want to display a header.
  2. Heading size - Change the size of the heading text. Choose between small, medium, or large.
  3. Heading alignment - The alignment of the heading can be Left, Center, or Right.
  4. Background image - Optionally add a background image by clicking Select image from your media library or Explore free images. Alternatively, connect to a dynamic source by clicking on the icon in the top right.
  5. Background color is set to transparent by default. Optionally, you can choose a color or connect to a dynamic source.
  6. Button label - The text that displays on the button. Leave blank to hide the button.
  7. Button link - The URL that you want the button to link to. Click the source button to add a dynamic source as a URL.
  8. Button style - Choose a style for your button.

Alt column layout

  1. Padding - If checked, this will make every second slide have extra padding at the top for an uneven section look.
  2. Content floating - If checked, this option makes the text float on top of the image.

Mobile

  1. Mobile layout - Choose a section layout for mobile screens. You can choose between Grid and Free scroll.

Section padding

  1. You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
  2. Read more about Custom CSS ↗.

Add and edit column blocks

Once you have added the section, you can now configure the blocks within your section. A multicolumn section has a rich text email signup section with a column block that you can use as many times as needed.

Steps

  1. Find the Slideshow section you added and customized following the steps above.
  2. Click + Add column underneath.
  3. Once you add a column, click on it to see additional block customization options.
  4. (Optional) Click and hold the drag-and-drop handles ⋮⋮    to re-order your blocks.

Column controls

  1. Image - Choose a static or dynamic image. Click Select Image to view your media library, or click the source button to connect a dynamic source. After an image has been selected, clicking the Change button allows you to remove, change, or delete the image. 
  2. Heading - The title of the column. 
  3. Collection - Optionally elect collection to display product count next to the Heading.
  4. Description - Optionally use this field to put in a description. Alternatively, you can connect it to a dynamic source by clicking on Connect dynamic source.

Button

  1. Button label - The text of a button added below the column block. Leave blank if you don't have a button added.
  2. Button link - The URL that you want the button to link to. Click the source button to add a dynamic source as a URL.
  3. Button style - Choose a style for your button.
  4. Color scheme - It controls the background color of your column, the text color, etc. Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one ↗ in Theme settings.
  5. Enable gradient - If marked, this will bring the text to the bottom and add a gradient to the image.

Still need help? Contact Us Contact Us