Multicolumn
A row of columns with an icon, image or number, a heading and text each, as a grid or a carousel.
munich-demo.myshopify.com
What it does
A section header and a row of columns. Each column shows an icon from the theme’s set, your own icon image, or a large number, followed by a heading and a short text. The columns sit in a grid with two to five per row, or in a carousel with arrows. On a phone they stack, sit two per row, or swipe as a row.
When to use it
Benefits, reasons to buy, a “what you get” list, a row of three facts with big numbers. It follows the hero promise on the home page and sits above the FAQ on the product page. For columns that each need a picture and a full paragraph, Image with text per chapter or How it works with images is the better fit.
Blocks
- Column: what to show at the top (nothing, icon, image or number), the icon or image or figure, a heading and a text.
Setting it up
- Write the Heading of the section, or clear it to show the columns alone.
- Add three or four Column blocks. Pick Show → Icon and an icon, or Number and type the figure as it should read.
- Set Columns on desktop to the number of blocks, Columns on mobile to 2 for short columns or 1 for longer text, or turn on Swipe on mobile.
- Choose Layout, Icon position and whether to Show columns as cards.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Layout | Select | Grid lays the columns out in rows. Carousel puts them in one scrollable row with arrows.Options: Grid, Carousel · Default: Grid |
| Icon position | Select | Whether the icon, image or number sits above the heading or to the left of it.Options: Icon above the text, Icon beside the text · Default: Icon above the text |
| Show columns as cards | Checkbox | Gives every column its own card surface instead of showing it on the section background.Default: off |
| Swipe on mobile | Checkbox | On a phone, lays the items out in one row that the visitor swipes through, instead of stacking them.Default: off |
| Header | ||
| Heading | Text | The column title, two to five words.Default: What you get |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Medium |
| Heading level | Select | Page heading is the one heading that names what the whole page is about; use it once per page, usually on the first section. Everything else is a section heading.Options: Page heading, Section heading · Default: Section heading |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Link label | Text | Text of the link at the end of the section header, such as View all. Leave empty for no link. |
| Link | Link | Where the header link leads. |
| Grid | ||
| Columns on desktop | Select | How many items sit in one row on a desktop screen.Options: 2, 3, 4, 5 · Default: 4 |
| Columns on mobile | Select | How many items sit in one row on a phone.Options: 1, 2 · Default: 2 |
| Gap | Select | The space between items in the grid.Options: Small, Medium, Large · Default: Medium |
| Content | ||
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center · Default: Center |
| Icon size | Range | Size of the icon or icon image at the top of each column.20 to 64 px · Default: 26 |
| Number size | Range | Size of the figure in columns that show a number.24 to 72 px · Default: 44 |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 90 |
Column block
| Setting | Type | What it does |
|---|---|---|
| Show | Select | What sits at the top of this column: nothing, an icon from the theme set, your own image, or a large number.Options: None, Icon, Image, Number · Default: Icon |
| Icon | Select | The icon shown when Show is set to Icon.Options: None, Shipping, Returns, Guarantee, Delivery time, Natural, Gift, Secure payment, Check, Star · Default: Check |
| Icon image | Image | Your own icon or a small picture, shown instead of the icon. A square file works best. |
| Number | Text | The figure shown when Show is set to Number, typed exactly as it should read.Default: 70% |
| Heading | Text | The column title, two to five words.Default: Name one reason to buy |
| Text | Rich text | One or two sentences under the title. |
This section also accepts app blocks, so apps that provide one can add content here.
Tips
- Keep every column the same shape: all with an icon, or all with a number, or all with an image. Mixed columns read as an accident.
- Three or four columns is the sweet spot. Five works only with very short text.
- Show columns as cards gives each column its own surface. Use it on a photo heavy page; leave it off on a calm one.
- Number columns are for real figures. The theme does not invent statistics, and the Theme Store does not allow invented ones.