Layout and page width
Every section chooses one of four widths in its Section layout setting: Page, Content, Narrow or Custom. The widths themselves are set here, so you can widen or narrow the whole store in one place.
How to set it up
Step 1: Set the widths
- Go to Theme settings > Layout.
- For Page layout (1), set the Max width or turn on Full width, and set the Page gutter for desktop and mobile.
- Set the Content, Narrow and Custom layouts the same way. Each has its own column and row gap.
Step 2: Show breadcrumbs
- Turn on Show breadcrumbs to show the trail above product and collection pages, and Show collections page in breadcrumbs to add the collections list to it.
Settings reference
Layout
| Page layout | |
|---|---|
| Full width | Turns this on or off. |
| Max width | Slider. |
| Page gutter desktop | Slider. |
| Page gutter mobile | Slider. |
| Column gap | Slider. |
| Row gap | Slider. |
| Content layout | |
| Full width | Turns this on or off. |
| Max width | Slider. |
| Column gap | Slider. |
| Row gap | Slider. |
| Narrow layout | |
| Full width | Turns this on or off. |
| Max width | Slider. |
| Column gap | Slider. |
| Row gap | Slider. |
| Custom layout | |
| Full width | Turns this on or off. |
| Max width | Slider. |
| Column gap | Slider. |
| Row gap | Slider. |
| Show breadcrumbs | Turns this on or off. |
| Show collections page in breadcrumbs | Turns this on or off. |
How it works
- Page suits wide sections like slideshows; Content suits product grids; Narrow suits text and articles; Custom is free for your own use.
- The gutter is the space between the content and the edge of the screen.