Multi-column

The section to reach for when a page needs content side by side and no purpose-built section fits. It’s a row of Column blocks, and each column holds whatever you put in it.

It’s deliberately plain: the section itself contributes only the background and the spacing. Everything visible comes from the blocks you nest inside the columns. That’s what makes the same section work for a contact page, a two-up intro, and a three-across list of points.

Columns are sized in twelfths, so a 50/50 split is two columns of 6, and a two-thirds / one-third split is 8 + 4. Mix widths freely in one row — the columns wrap onto a new row on their own once they add up past 12.

Settings

Setting	What it does
Section ID	Optional anchor, so a link elsewhere on the page can jump here. Must be unique on the page and written in handle format.
Text theme	Light background (default) or Dark background. Dark inverts text, buttons and links to their light-on-dark styling. Set this to match the background you chose — it does not change the background itself.
Background	A solid colour or gradient behind the section, using Shopify’s gradient editor. Leave it empty for a transparent background.
Space between rows	Vertical space between columns when they stack on phones and tablets, and between rows when columns wrap on desktop. 0–6rem in 0.5 steps, default 2.5rem.

Section padding

Setting	What it does
Top / Bottom Padding (mobile)	Space above and below the section on phones. 0–10rem in 0.5 steps, default 2.5rem.
Top / Bottom Padding (tablet)	The same for tablet. Default 4.5rem.
Top / Bottom Padding (desktop)	The same for desktop. Default 7rem.

Blocks it accepts

• Column — the main one. Add as many as the row needs.
• App blocks — any app that provides a theme block, including Shopify Forms.

There’s no built-in section heading. If a layout needs one, add a Title block inside a column — usually a full-width column of 12 sitting above the rest.

Columns stack on phones and tablets

The width setting on each column only applies from large screens (1024px) up. Below that every column is full width and they stack in the order you’ve arranged them. A 4-wide column would be unreadable at phone width, so this isn’t adjustable.

Set the text theme yourself when you use a dark background

Choosing a dark Background does not automatically switch the text. If you pick a dark gradient and leave Text theme on Light, the text stays dark and disappears. The two settings are separate on purpose — the background can also come from an image or the section behind this one.

Presets

Three starting points, all the same section with different columns:

• Multi-column — two even columns, each with a heading and copy.
• Multi-column — Contact — a narrower left column for contact details and a wider right column holding a Contact form.
• Multi-column — Three across — three even columns.

Tips

• A heading is just a column. For a heading above the row, add a Column set to width 12 with a Title block in it, then the content columns below. They wrap onto separate rows on their own.
• Chain backgrounds between stacked sections. If a Multi-column sits directly above or below another section that takes a background, match this section’s last gradient colour to that section’s first and the join becomes invisible.
• Columns don’t have to add up to 12. Two columns of 5 leave a gap on the right. That’s occasionally what you want, but if a layout looks lopsided, check the widths add up.
• Use vertical alignment for uneven columns. When one column is much taller than its neighbour, the short one sits at the top by default. Set its Vertical alignment to Center or Bottom if the design calls for it.