Layout
How wide your content can stretch on large screens, and how much space is kept at the screen edges. Also sets up the back-to-top button.
Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Layout.
Good for
- Keeping lines of text and product grids at a comfortable width on very wide monitors
- Giving the store more breathing room at the screen edges on phones
Settings
Page
| Width | The widest your content will stretch on large screens. On wider screens, the content stays centered with empty space on both sides. Full-width sections ignore this limit.
Adjustable from 960px to 1920px (default 1440px). |
| Margin | The space kept between your content and the left and right edges of the screen, most noticeable on phones and tablets.
Adjustable from 10px to 100px (default 20px). |
Back to top
| Show back to top | Adds a small button that scrolls the shopper back to the top of the page after they scroll down.
On by default. |
| Position | Which bottom corner of the screen the back-to-top button sits in.
Choose Left or Right (default). |
Tips
- 1200–1440px suits most stores. Wider layouts spread product grids thin and make long text lines hard to read.
- Full-width sections ignore the page width. Sections with a full-width option stretch edge to edge whatever you set here, so you can mix contained and full-bleed sections.
- Keep the margin at least 16px on phones. Text touching the edge of the screen is hard to read and looks cramped.