Multi-column
Equal columns, each with an image, heading and text. Use it for categories, steps in a process, or a set of related ideas.
At a glance: Add it to any page with Add section.
Good for
- Three or four steps explaining how your product or service works
- Linking to categories, each with an image, a line of text and a button
- A row of benefits shown with small uploaded icons instead of photos
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Multi column and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default, H1, H2 (default), H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Center. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary, Secondary or Tertiary (default). |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Layout
| Card layout | Vertical stacks the image above the text; Horizontal places the image beside the text. The choice changes which Desktop columns options are available.
Choose Vertical (default) or Horizontal. |
| Desktop columns | How many columns sit side by side on desktop with horizontal cards. Wider cards need fewer columns.
Choose 2 (default) or 3. Only appears when Card layout is Horizontal. |
| Desktop columns | How many columns sit side by side on desktop with vertical cards.
Adjustable from 2 to 5 (default 3). Only appears when Card layout is Vertical. |
| Enable carousel on desktop | Turns the row into a swipeable carousel on desktop instead of wrapping items onto a second line.
Off by default. |
| Enable carousel on mobile | Turns the row into a swipeable carousel on mobile.
Off by default. |
| Card padding | Space between a card's border and its content.
Choose Default (default) or None. |
| Content alignment | Aligns the text content within its column.
Default: Left. |
| Media type | Image shows a photo at the top of each column; Icon shows a small icon you upload in each column's Icon image setting.
Choose Image (default) or Icon. |
| Image ratio | Applies to image columns only.
Choose Portrait (3:4) (default), Landscape (16:9) or Square (1:1). Only appears when Media type is Image. |
| Desktop icon size | Displayed size of the icon.
Adjustable from 20px to 120px (default 48px). Only appears when Media type is Icon. |
| Mobile icon size | How large the column icons appear on phones.
Adjustable from 16px to 120px (default 48px). Only appears when Media type is Icon. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme for cards inside the section, so they can sit apart from the section background. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Image column block
Inside each Image column you can add these nested blocks: Badge group, Heading, Text and Button. Click the block in the sidebar, then Add block beneath it.
Image
| Image | The image for this block.
Upload a square or portrait image for best results. Only appears when Media type is Image. |
| Icon image | Upload your own icon image.
Use a transparent .svg or .png. Only appears when Media type is Icon. |
Tips
- Use images of the same shape. Set Image ratio so columns line up even when your uploads don't match.
- Match the column count to the number of blocks. Four blocks in four columns reads as a set; five blocks in four columns leaves one hanging.
- Turn on the mobile carousel for more than three columns. It keeps the section short on phones.
- Keep headings to a few words. Long headings wrap unevenly across columns.
Troubleshooting
My columns show a placeholder instead of an icon
With Media type set to Icon, each column uses its own Icon image. Open each Image column block and upload an icon there.
Changing Desktop columns has no effect
There are two Desktop columns settings, one for each Card layout. Only the one for the current layout applies, so check which layout is selected first.