Multicolumn settings
You can add a main heading, subheading, description, and a button for this section. A background color or image can also be added to make it stand out. Grid settings can be easily adjusted for desktop, and three different layouts can be applied for mobile devices.
The Multicolumn section includes column blocks. Each column can contain an image or icon, text, and an image link. Both images and text can be fully customized.
Demo examples:
Section 1
Section 2
How to access the Multicolumn section
Access this section through the theme customizer:
- Navigate to Online Store > Themes
- Select “Customize” on your active theme
- On any theme template, click “Add section”
- Search and select “Multicolumn”
To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.
How to configure the Multicolumn section
Basic Components
The “Multicolumn” section consists of two primary components:
- General settings – These control the overall settings of the section.
- Block – Each block has its own individual settings.
Available block types include:
- Column
General settings
Color scheme
Read Color scheme article to learn more about color schemes.
Subheading, heading, and description
Subheading, heading, and description settings are global settings that apply to the entire theme. They can be found in the Global settings category.
For more details, read this article: Subheading, heading, and description
Button settings
Button settings are global settings. They can be found in the Global settings category.
For more details, read this article: Button block
Background settings
| Setting | Description |
| Background image | You can add a background image for desktop and tablet. For mobile, you can set a different image using the Background image mobile option. The mobile option appears after adding an image on desktop. |
| Background image mobile | The Background image mobile option allows you to set a different background image specifically for mobile devices. This ensures your content looks great on smaller screens. |
Grid (Desktop)
| Setting | Description |
|
Desktop columns
|
You can display 1 to 8 columns per row. |
| Desktop horizontal spacing | Set the space between columns in the same row. |
| Desktop vertical spacing | Set the space between rows of columns on desktop. |
Layout style (Mobile)
Grid
| Setting | Description |
| Grid: | Show columns in a static grid layout. |
|
Mobile columns
|
Choose how many products to show per row on mobile devices. You can display 1 or 3 columns. |
| Mobile horizontal spacing | Set the space between columns in a row for mobile devices. |
| Mobile vertical spacing | Set the space between rows of columns on mobile. |
Carousel
| Setting | Description |
| Carousel | A carousel allows you to display multiple items (images, text, or icons) in a sliding format. Users can scroll or swipe through the items horizontally, making it ideal for mobile screens. |
| Mobile horizontal spacing | On mobile, you’ll see one column per row in a slider. When you scroll, you can see how the image changes to the next one. You can adjust the space between these images using the Mobile horizontal spacing setting. |
Marquee
| Setting | Description |
| Marquee | On mobile, the marquee effect scrolls text or images continuously across the screen, allowing users to see multiple items in a compact, moving display. |
| Marquee speed |
Adjust speed of moving items.
Note: Lower values create faster scrolling animation |
| Pause marquee on hover | Tap on an item to stop it from scrolling. To resume movement, tap on another section or an empty space. |
| Mobile horizontal spacing | Adjust the space between moving items in a row. |
Padding
Padding is the space inside a section that separates the content from the section’s edges.
See this article to set paddings: Section padding