Multicolumn sets up to six short pieces of content side by side, each with an optional image, a heading, some text and a link. Use it for what customers ask about most: materials, shipping, returns and care.
Where to find it
In the theme editor, click Add section and choose Multicolumn. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Columns on desktop sets how many columns sit in a row, from 1 to 6. On mobile the columns stack, or swipe sideways with Enable swipe on mobile on. A column without an image shows a number in its place, 01, 02, 03, when Number columns that have no image is on.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Columns on desktop | 1 to 6. Default: 3. | How many columns sit in a row on desktop. |
| Image ratio | Portrait (4:5), Square (1:1) or Landscape (3:2). Default: Square (1:1). | The shape column images are cropped to. |
| Number columns that have no image | On or off. Default: on. | Numbers each column that has no image, in order. |
| Text alignment | Left or Center. Default: Left. | Aligns each column's content to the left or the center. |
| Enable swipe on mobile | On or off. Default: off. | Lets customers swipe through the columns on mobile. When off, the columns stack. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 6 blocks.
Column
One column.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | Optional. An image at the top of the column. |
| Heading | Text. | The column's heading. |
| Text | Formatted text. | A few lines of text. |
| Link label | Text. | The text of the link under the column. Leave empty for no link. |
| Link | Link. | Where the link goes. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Column image | 1200 x 1200 px (square) | Cropped to the Image ratio you choose, around its focal point. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Use images in every column or in none. A mix looks unfinished.
- Three columns with two lines of text each is the easiest version to read.