Content width and Gutter
General layout settings to manage spacing between content and edges of the screen.
Content width: This is the maximum width that contained sections will use in pixels. In sections - under Desktop layout settings - you can find the "Full width" setting.
- By enabling Full widththe content width will be ignored and the section will use the full width of the browser window.
- By disabling the Full width, sections will act as contained.
Gutter: The gutter value affects the space between card elements in different parts of the store. However, you can customize the spacing between elements using the section-level grid gap setting. (See for example the Featured Collection section Desktop layout > Grid gap.)
Fixed maximum width
By enabling the fixed maximum width the main content area will notexceed the set content width value. White space is added to the left and right side of the content when the window size is larger than the content width.
Use fixed maximum width if you want to maintain a non fluid look on wider desktop devices. Other benefits are that managing section medias gets easier as there is a threshold width that the images and videos won't exceed.
Settings
General layout settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Content width | Range |
1440 px |
Desktop. Maximum width of contained sections. Between 1000 and 1920 px. |
| Content padding (desktop / mobile) | Range |
48 / 24 px |
Space between the content and the edges of the screen. Between 10 and 80 px on desktop and 10 and 40 px on mobile. |
| Gutter (desktop / mobile) | Range |
24 px |
Space between cards and other elements inside sections. Between 10 and 40 px. |
| Enable fixed maximum width | Toggle | Off | Keeps the main content area within the content width. White space is added on both sides when the window is wider. |
| White space color | Color | Transparent | Color of the white space on both sides. Used only with fixed maximum width. Transparent uses the body color. |
| Main content shadow | Range | 25% |
Shadow around the main content area. Used only with fixed maximum width. Set to 0 to turn it off. |