Spacing and layout in Emerge

Spacing works in two steps: In Edit theme → Theme settings → Layout, Desktop spacing and Mobile spacing define what Small through Extra large mean storewide. On each section, Spacing above and Spacing below pick from that scale: None, Small, Medium, Large, or Extra large. Changing a size in Layout updates every section that uses it.

Theme settings → Layout

Small through Extra large

Desktop spacing and Mobile spacing each set Small, Medium, Large, and Extra large.

Those settings are the pixel values behind the Spacing above and Spacing below dropdowns on most sections. Extra large is for heroes, stories, and pauses, not for every block on a collection page.

Desktop and mobile

Mobile Extra large is easy to overdo. Preview the phone layout after you raise Extra large in Mobile spacing.

Reuse the same Spacing above / Spacing below dropdown on adjacent sections: Medium throughout the shop, or Large on a hero and Medium on what follows. Use None when two sections should sit flush. Add a Divider when you need a gap with no content. Keep mobile spacing smaller than desktop, and preview both after you change the scale in Layout.

Shapes add height on their own, pair with Medium spacing, not double Extra large on both edges.

Shapes use space too

A top or bottom shape is extra geometry between sections. If two sections both use Extra large and both use a tall wave, you will get a valley of empty color. Prefer a shape on one edge of a pair, or Medium spacing when both edges have shapes.

On each section

Choose None through Extra large from the section dropdowns. Use None when a shape should sit flush against the next background. A Divider section is still the right tool for a simple gap with no shape.

Tune Layout, not one-off pixels

If everything feels tight, raise Large and Extra large in Theme settings. Changing twenty sections by hand is how stores drift out of rhythm.

Ask Sidekick

Open Sidekick from the theme editor toolbar (top right, next to the device preview icon), or press ⌘. (Ctrl+. on Windows). If your pages feel cramped or overly loose and you can't tell which setting is responsible, describe the problem.

"My homepage sections feel too tight on mobile, what Desktop spacing and Mobile spacing values should I use for Small through Extra large?"

It can point you toward the relevant spacing settings and suggest values, rather than you adjusting sliders section by section to find the right combination.

Troubleshooting

• A tall empty band between sections: both edges have a shape, or Extra large is stacked. Put a shape on one edge only, and drop spacing to Medium.
• One section didn't move: change Spacing above / Spacing below on that section.
• Mobile feels endless: lower Mobile spacing Extra large. Shapes add height on phones too.