Theme settings
Layout
Page width, margins, density, and grid gutter.
Open Theme settingsLayout. These settings define the edge of the page and the rhythm of spacing across the whole store.
| Setting | Values | What it does |
|---|---|---|
| Page widthFR: Largeur de page |
| — |
| Page marginFR: Marge de page | From 10 to 100pxDefault: 28px | — |
| DensityFR: Densité |
| How much air the whole storefront is given. Scales every space at once, so the rhythm stays even. |
| Product grid gutterFR: Gouttière des grilles de produits |
| The space between columns of product grids. Rows keep their own, larger spacing. |
Page width and margin
Page width limits how wide content gets on large screens: Narrow (90rem, about 1,440px) or Wide (110rem, about 1,760px). Full-width images (hero, image behind text) always run to the edge of the screen.
Page margin is the space between the edge of the screen and the content. The value you choose applies as is from 750px wide; on phones, it's capped at a share of the screen width so no setting can crush the layout.
Density
Density multiplies every spacing value in the theme at once, which keeps the rhythm even:
| Density | Effect | Space between two sections |
|---|---|---|
| Compact | × 0.8 | about 77px on desktop |
| Standard | × 1 | 96px on desktop, 64px on phones |
| Generous | × 1.25 | 120px on desktop |
Two consecutive sections that use the same color scheme share a single space instead of adding their margins together.
Product grid gutter
Product grid gutter sets the space between the columns of product grids (collection, search, featured collection, recommendations):
| Gutter | Phone | Desktop |
|---|---|---|
| Hairline | 2px | 2px |
| Tight | 8px | 12px |
| Airy | 16px | 40px |
The space between rows stays larger than the space between columns, so each row reads like a shelf.
Breakpoints
The whole layout reorganizes at three screen widths, the same for every section: 750px (phone → tablet), 990px (tablet → desktop), and 1,400px (large screen). When this documentation says "phone," it means screens narrower than 750px; "desktop" means 990px and wider.
Maison 1.0.0