Spacing & section padding

Every section on the page has vertical padding — the empty space at the top and bottom. Getting this right is one of the most impactful design choices you can make: too tight and the store feels crowded, too loose and the page becomes long and disconnected.

Section-level padding

Click a section

Any section — hero, featured collection, etc.

Scroll the right panel to the bottom

Find the Section padding settings.

Adjust Top and Bottom padding

Each is a slider. Common presets:

0px — flush against the section above/below (rare, useful for stacked bands)
40px — tight, dense feel (dashboards, compact promos)
80px — default, works for most sections
120px — spacious, editorial feel

Save

Match padding on adjacent sections

If Section A has Bottom padding: 80px and Section B has Top padding: 40px, the visual gap is 120px. This is usually not what you want.

Rule of thumb: set the same value on the bottom of one section and the top of the next.

Compact mobile. Padding automatically scales down on mobile — a section with 120px on desktop shows about 60px on phones — so you don’t have to design mobile separately.

Removing padding entirely

For a section that should touch the top of the browser (like the hero on a homepage) or the section above/below it:

Set Top padding: 0
Set Bottom padding: 0

The section then flushes to whatever’s next.

Full-width vs contained

Some sections have a Full width or Container width toggle:

Full width — the section fills the browser edge-to-edge
Contained — the section respects the theme’s max content width (defined in Theme settings → Layout)

Use full width for hero images and full-bleed banners. Use contained for text and grids so lines don’t get uncomfortably long on wide monitors.