Layout and spacing settings

Layout and spacing decide how your store breathes. They are the settings that make a page feel calm and considered, or tight and busy, before a visitor reads a single word. You will find both groups in the theme editor under Theme settings (the gear icon at the bottom of the sidebar), then Layout and Spacing. Everything here applies store-wide; options that affect only one section live on that section.

Set your page width and margin

Open Theme settings → Layout.

• Page width sets the widest your content will ever run on a large screen. Narrow keeps text at a comfortable reading length and images at a moderate size, which suits stores with fewer products and more storytelling. Wide gives grids and photography more room to spread out, which suits image-led catalogs. Defaults to Narrow. You will only see the difference on a large desktop window, so resize your preview before you judge it.
• Page margin is the minimum space kept between your content and the edge of the screen. It does its most visible work on phones and small tablets, where the screen is narrower than your page width and content would otherwise sit close to the edge. Ranges from 10px to 100px and defaults to 20px. Raise it for an airier, gallery-like feel, lower it when you want images to run closer to the edge.

Give your sections room

Open Theme settings → Spacing.

• Section side margin controls how far section content pulls in from the page edges on wider screens. Ranges from 16px to 96px and defaults to 80px. A smaller value lets banners and media stretch closer to full width for a bolder look. A larger value frames your content and reads as more considered. Check the change on your homepage, where several section types sit one after another.

Tune your grids

• Product grid gap is the space between products and collection tiles in a grid. Ranges from 0px to 48px and defaults to 48px. Set it to 0 for cells that touch, which gives collection pages a dense, edge-to-edge look. Keep it generous when each product deserves its own space, which usually flatters higher-priced items. View this one on a collection page rather than the homepage.
• Column gap is the space between columns in content sections such as multicolumn, icon lists, logo lists, and testimonials. Ranges from 8px to 48px and defaults to 48px. A small gap always remains so that column dividers stay clean.

Size your buttons and inputs

• Button and input height sets the height of buttons and form fields across the store. Ranges from 44px to 64px and defaults to 48px. It always stays at or above the 44px touch target, so your buttons remain easy to tap however you set it. Go taller when the add to cart button is the star of the page and you want it to feel substantial. Stay near the default when you have long forms, where compact fields are easier to scan.

Tip

These settings stack. Page margin, section side margin, and product grid gap all add up around a collection grid, so a small change to each can add up to a big shift. Move one at a time, then look at the homepage and a collection page before touching the next.

Once the geometry feels right, Colors and Typography are what finish the look.

Note

Every theme style ships with these values already tuned to it, so the starting point is a considered one. Nothing here can push text or buttons below a comfortable, tappable size, which means you are free to experiment and preview until it looks like your store.