Multicolumn
Multicolumn lays out a grid of small cards, each with its own icon or photo, a title, a short text, and an optional link. The classic use is a “why shop with us” strip under the hero: three or four reasons to trust your store, each in its own card.
What it does
Section titled “What it does”Use this section when you want several short points to sit side by side with equal weight:
- service promises (fast shipping, easy returns, warranty);
- brand values (natural materials, vetted ingredients, local production);
- a mini FAQ or “good to know” list;
- links to collections or guides, each with a photo.
Each card can hold an image or an icon (not both — a photo replaces the icon), a title, a paragraph, and a link. You can color each card individually, or let the theme cycle soft pastel card backgrounds for you.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section (for example, the home page).
- Click Add section and choose Multicolumn.
- The section starts with three example columns — Fast delivery, Natural first, and Easy returns. Replace their text with your own.
- Click Add block → Column for each extra card. There is no fixed limit, but three or four keep the cards readable.
Choose a style
Section titled “Choose a style”The Background setting switches the overall look:
| Look | What you get |
|---|---|
| None | Cards sit directly on the page background. With Use soft tinted card backgrounds on, each card gets one of the theme’s soft pastel backgrounds in turn |
| Color | The whole section becomes a rounded band of one solid color. Text lightens or darkens automatically to stay readable, and card tints are switched off |
| Image | A photo fills the band behind the section, softened by a darkening overlay so text stays readable. Card tints are switched off |
You can switch the look any time in the sidebar.
Set it up: quick start
Section titled “Set it up: quick start”- Add the section (see above).
- Type your Subheading (the small line above the title) and Heading.
- Set Columns on desktop — how many cards sit in one row on wide screens.
- Click each Column block in the sidebar: pick an Icon or upload an Image, then edit the Heading and Text.
- To give a card a link, fill in both Link label and Link in that column.
- Optionally set a section Background (see Choose a style above).
- Save and preview.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Subheading | “Why shop with us” | Text | Small line above the heading; leave empty for no subheading |
| Heading | “The good stuff, guaranteed” | Text | Section title; leave empty for no title |
| Columns on desktop | 3 | 2–4, step 1 | How many cards sit in one row on wide screens. Tablets always show 3 columns, phones 2 (1 on very narrow screens) |
| Use soft tinted card backgrounds | On | On / Off | Gives each card a soft pastel background, cycling cream → lilac → mint → apricot. Turned off automatically when you set a Background band |
Background
| Setting | Default | Options | What it does |
|---|---|---|---|
| Background | None | None / Color / Image | Switches the overall look (see Choose a style). A background band replaces the tinted cards |
| Background color | #14121A | Color picker | Color background only. Text color adapts automatically |
| Background image | Empty | Image picker | The photo behind the band, shown when Background is Image |
| Image overlay opacity | 35 % | 0–70 %, step 5 | Image background only. Darkens the photo so the text on top stays readable |
Blocks
Section titled “Blocks”Click Add block → Column for each card.
| Block | Limit | What it adds |
|---|---|---|
| Column | No limit | One card: image or icon, title, text, link, and its own card color |
Column settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Card background color | Empty | Color picker | Gives this one card its own color; text adapts automatically. Leave empty to follow the section tint setting |
| Image | Empty | Image picker | Photo at the top of the card, cropped to a square. Replaces the icon when set |
| Icon | Truck | None / Truck / Leaf / Shield / Heart / Paw / Refresh / Gift | Theme icon at the top of the card, shown when no image is set |
| Heading | “Fast delivery” | Text | Card title; leave empty for no title |
| Text | “Orders ship within 24 hours, because nobody should wait for treats.” | Text with formatting | The card paragraph; keep it to one or two lines |
| Link label | Empty | Text | Text of the card link, e.g. “Learn more” |
| Link | Empty | URL | Where the link leads. The link shows only when both label and link are filled |
Images and content tips
Section titled “Images and content tips”- Column images are cropped to a square, so center your subject. Upload images around 800 × 800 px or larger so they stay crisp.
- Background image fills the band behind the whole section — a wide photo at least 2000 px wide works best. The section grows to fit your text, so pick a photo that survives cropping and check that text remains readable on top.
- On a photo or color band, raise Image overlay opacity or use a darker color if headings are hard to read.
- Keep card text to one or two short lines. Long paragraphs make cards uneven and push the link out of sight.
Good to know
Section titled “Good to know”- Tints cycle in a fixed order. With Use soft tinted card backgrounds on, cards get cream, lilac, mint, apricot, then cream again. To control colors yourself, set Card background color on each column.
- A background band replaces the tints. When Background is Color or Image, cards without their own color turn transparent, and text adapts to the band.
- Image beats icon. A column with both an image and an icon shows only the image.
- Links need both fields. A card link appears only when Link label and Link are both filled.
- Column counts by device. Wide screens use Columns on desktop (2–4); tablets show 3 columns; phones show 2, dropping to 1 on very narrow screens.
- Changing the section affects every page using that template. For different content on one page, create a separate template.
Example setups
Section titled “Example setups”“Why shop with us” strip. Background None, Use soft tinted card backgrounds on, 3 columns with the Truck, Leaf, and Refresh icons. One short promise per card, no links. Use near the top of the home page to answer first-time visitors’ doubts.
Dark benefits band. Background Color, Background color #14121A, Columns on desktop 4, one column each for shipping, returns, rewards, and support — each with a Link label and Link to the matching page. Text turns light automatically; no extra styling needed. Use above the footer as a service summary.
Common questions
Section titled “Common questions”My cards lost their pastel colors after I set a background. A color or image band replaces the tinted cards. To keep card colors on a band, open each Column and set its Card background color.
The link under a card doesn’t show. Fill in both Link label and Link in that column — the link appears only when both are set.
I uploaded an image but still see the icon. The image replaces the icon. Remove the image if you want the icon back, or keep the image and ignore the icon setting.
The cards don’t fill the row the way I expected on desktop. Columns on desktop accepts 2–4. With fewer cards than columns, the last row is left short — add cards or reduce the column count for an even grid.
Can I make one card stand out? Yes — set a Card background color on that column. Pick a color that contrasts with the neighboring cards; the text color adjusts automatically.