Use the versatile Multicolumn section to highlight key details, products, or collections, pairing images with text to help your customers learn more about your brand.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Multicolumn.
Customize section settings
Click the Multicolumn section to customize general settings for the section.
The Multicolumn section allows you to showcase content in multiple columns with adjustable typography, layout, and alignment options. Follow the steps below to customize this section effectively.
Desktop layout
Section heading
This serves as the title of each block and you can adjust its size through the available Heading size and Mobile heading size sliders
Desktop heading position
Offers option to display your heading Center or Inline.
Desktop image aspect ratio
Select an aspect ratio for your images to ensure that their height remain consistent on each column. You can choose between the following options:
- Adapt to image
- Portrait (2:3)
- Square (1:1)
- Landscape (3:2)
Number of columns on desktop
This setting allows you to choose the number of columns that will be displayed in desktop view. You can display up to 6 columns at a time.
Desktop content alignment
This setting helps control the position your content (text) will take. The options are Left, Center, or Right alignment.
Block typography
Make adjustments to the text through the settings available:
Mobile layout
You can choose between the following aspect ratio:
- Adapt to image
- Portrait (2:3)
- Square (1:1)
- Landscape (3:2)
Number of columns
The number of columns that can be displayed in mobile is limited. An option to choose between 1 or 2 columns is available in the settings.
Mobile content alignment
Controls your content block's text alignment. You can choose between Left, Right, and Center.
Select colors
Choose colors for the section's Text color, Background color, and Background gradient.
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Configuring individual columns
You can add up to 50 columns per section
Each column in the Multicolumn section can be customized to include unique content. Here are the settings available for each column:
Image
Upload an image or select one from your media library.
Heading
Enter a heading for the column to provide a title or key message.
Text
You can display a short description on each block by adding your text here. Within this field, you can style the text based on the available formatting tools.
Button
Display a button on each block by adjusting the available settings.
Add the button label on the Label field and paste the link you'd like the customers to be routed to in the Link field.
Button style
Available styles include Fill and Outline. Fill would add a solid background color for the button, while Outline has a transparent background.
Button color
Adjust the button's Background color and Text color. Background color only applies to the Fill style, but it works as the color setting for the button borders in Outline style.
Changelog
December 3rd, 2024
- Multicolumn added to Theme Sections.