Section: Multicolumn

Everything you'll need to know on how to setup your Multicolumn section.

The Multicolumn section displays a responsive grid of feature cards — each with an image, title, description, and an optional CTA button. Perfect for highlighting benefits, services, or values across two, three, or four columns. Cards animate in on scroll and gracefully collapse to a stacked layout on mobile.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Multicolumn, then click on it.

3) Done — your Multicolumn section is added.

The general settings contain the heading, layout, and styling of the Multicolumn section. Simply click on the section to open the settings.

Fill in the title of the section. For example: Our Features, Why Shop With Us, or What we offer. Don't want to show a title? Simply leave the field empty.

Fill in a short paragraph below the heading. Supports bold, italic, links, and lists. Leave empty to hide the description entirely.

Choose how many columns appear on desktop: 2 columns, 3 columns, or 4 columns. The default is 3 — a balanced look for most homepages.

Choose how many columns appear on mobile: 1 column or 2 columns. Use 1 column for image-driven cards with longer descriptions; use 2 for compact icon-style cards.

Set the text alignment for the section header and inside each card: Left, Center, or Right. Center works best when cards are symmetric; Left works best for text-heavy cards.

Choose the aspect ratio of column images: Square (1:1), Portrait (3:4), Landscape (4:3), or Adapt to image (uses the image's original ratio). The default Landscape works well for product or lifestyle photos.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Cards inherit background, text, and border colors automatically.

Tick this box to add a 1 px divider line at the bottom of the section. Useful when stacking multiple sections back-to-back to create visual separation.

Space above the section in pixels (0–100). The default 60 px works well on most homepages.

Space below the section in pixels (0–100). The default 60 px works well on most homepages.

Each card is an individual Column block. Click Add block inside the section and choose Column. You can add up to 6 columns per section.

Upload the image for the card. If empty, a placeholder is shown. Recommended size depends on the chosen Image ratio — see the FAQ below for details.

The title shown on the card, rendered as an H3 tag. For example: Free Shipping, Easy Returns, or Premium Quality. Leave empty to hide.

Short paragraph below the title. Keep it brief — 1 or 2 short sentences read best. Bold, italic, links, and lists are supported.

Optional CTA text shown at the bottom of the card. For example: Shop now or Learn more. Leave empty to hide the button.

Where the CTA button links to. Can be a collection, product, page, or any URL.

Choose the visual style of the button: Primary, Secondary, or Outline. Each style maps to your theme's button settings under Theme Settings → Colors.

For Square (1:1) use 800 × 800 px. For Portrait (3:4) use 600 × 800 px. For Landscape (4:3) use 800 × 600 px. For Adapt to image any size works — the section uses the original ratio.

The tablet breakpoint (between 750 px and 1024 px) automatically forces 2 columns to keep cards readable. On screens wider than 1024 px the grid uses your chosen column count.

The section is capped at 6 column blocks. To show more features, simply add a second Multicolumn section directly below the first — they stack seamlessly.

The button is hidden when Button label is empty. Fill in a label to show the button, even if the link URL is set.

Card height is determined by the longest content. To keep all cards the same height, balance the description length across cards. The CTA button always anchors to the bottom of the card regardless.