Multicolumn
Overview
The Multicolumn section displays a grid of content cards arranged in multiple columns. Each card can include an image and supporting text (title, description, and tagline). You can control column count, spacing, media ratio, container width, alignment, color scheme, and responsive padding. The preset includes a heading area followed by a multicolumn listing with multiple cards.
Section Configuration:
Grid settings
| Setting |
Description |
| Desktop columns |
Sets how many columns are shown on desktop (1–4). |
| Mobile columns |
Sets how many columns are shown on mobile (1 or 2). |
| Gap |
Controls the spacing between columns/cards. |
Layout
| Setting |
Description |
| Media ratio |
Sets the aspect ratio used for card images (Adapt, Square, Portrait, Landscape). |
| Container layout |
Controls how the section is sized on the page: page-width (boxed), contained-content, or container-fluid (full width). |
| Container size (Desktop) |
Sets the maximum section width on desktop as a percentage (50%–100%). |
| Text alignment (Desktop) |
Controls text alignment on desktop (left, center, right). |
| Text alignment (Mobile) |
Controls text alignment on mobile (left, center, right). |
| Color scheme |
Applies a theme color scheme to the section styling. |
Inner padding
| Setting |
Description |
| Top (Desktop) |
Adds space above the section’s inner content on desktop. |
| Bottom (Desktop) |
Adds space below the section’s inner content on desktop. |
| Left (Desktop) |
Adds space to the left of the section’s inner content on desktop. |
| Right (Desktop) |
Adds space to the right of the section’s inner content on desktop. |
| Top (Mobile) |
Adds space above the section’s inner content on mobile. |
| Bottom (Mobile) |
Adds space below the section’s inner content on mobile. |
| Left (Mobile) |
Adds space to the left of the section’s inner content on mobile. |
| Right (Mobile) |
Adds space to the right of the section’s inner content on mobile. |
Outer padding
| Setting |
Description |
| Top (Desktop) |
Adds space above the section (outside the section content) on desktop. |
| Bottom (Desktop) |
Adds space below the section (outside the section content) on desktop. |
| Left (Desktop) |
Adds space on the left side of the section (outside) on desktop. |
| Right (Desktop) |
Adds space on the right side of the section (outside) on desktop. |
| Top (Mobile) |
Adds space above the section (outside) on mobile. |
| Bottom (Mobile) |
Adds space below the section (outside) on mobile. |
| Left (Mobile) |
Adds space on the left side of the section (outside) on mobile. |
| Right (Mobile) |
Adds space on the right side of the section (outside) on mobile. |
Blocks Configuration:
Section-level blocks
| Block type |
Description |
Theme block (@theme ) |
Allows theme-provided blocks to be added to this section (based on what your theme supports). |
App block (@app ) |
Allows compatible Shopify apps to add app blocks to this section. |
Heading
A heading area that introduces the section.
| Block |
Description |
| Tagline |
Displays a short line of text above the main heading. |
| Heading |
Displays the main section title. |
| Description |
Displays supporting text beneath the heading. |
2) Multi-column listing
| Block |
Description |
| Multi-column listing |
Displays a grid of content cards and manages the overall multicolumn layout. |
Column
| Block |
Description |
| Listing column |
Represents one column/group within the multicolumn layout. |
Card structure
Each column contains a Column Listing Card with an image area and a content area.
Column listing card
| Block |
Description |
| Card image |
Displays the card’s image/media area. |
| Card content |
Displays the card’s text content (title, description, tagline). |
Card image
| Block |
Description |
| Image |
Sets the image displayed for the card. |
Card content
| Block |
Description |
| Title |
Displays the card title. |
| Description |
Displays the card’s supporting text. |
| Tagline |
Displays an optional short line of text (often used as a label or highlight). |