Layout
Page margins and width, spacing between and inside sections, hairlines, panels and fields.
Online Store › Themes › Customize › Theme settings › Layout
Spacing on desktop
The space inside sections and blocks, and the height of buttons, fields and list rows. Balanced is a step (14%) tighter than Generous. The header, page margins and type keep their sizes.
Spacing on phones
The space inside sections and blocks, and the height of buttons, fields and list rows. Balanced is a step (14%) tighter than Generous. The header, page margins and type keep their sizes.
Section spacing
The space above and below a section at Medium. Space above sections and Space below sections pick a step of it.
Space between sections on product and bag pages
For the sections under a product or the bag, which have no spacing settings of their own.
Space above sections
Every section that has spacing settings follows these, unless its Follow Theme settings for the section frame is off.
Space below sections
Width
Full width runs as far as Layout's reach lets full-width images and grids; Page width keeps the section inside the page margins.
Show a hairline above
Show a hairline below
Page margins
The space between the page's content and the screen's edges. Narrow: 16px on phones up to 48px on wide screens; Standard: 24px to 64px; Wide: 32px to 96px.
Maximum page width
On screens wider than this, the page's content sits centered. None runs it to the screen's edges, as designed.
Product grids and tiles reach on desktop
How far product grids, collection tiles and carousels run with a maximum page width. The maximum page width is the screen's edges when there is none.
Product grids and tiles reach on phones
Full-width images reach
The Hero, full-width images, look pictures and product photos. The page margins keep them inside the margins.
Space between menus
In the navigation drawer, between the menus stacked under Header › Menu 2 to Menu 5.
Stack full-width images
Where one section ends on a full-width image and the next begins with one, they meet without space, whatever their own spacing.
Image indicators
Show where you are in a set of images. Pills: one pill per image, the current one longer and filled. Line: a hairline track whose thicker thumb follows the scroll.
On product images
The product page's photos and their full-screen view. On phones the photos always take the line under them (Pills applies from 768px). None leaves the images alone.
On product cards
Shown while a card's other images are in view.
On carousels
Product rows set to Carousel.
Panels
Background
Color scheme
Add inner space
Off lets a picture run to the panel's edges.
Content
Turn into a collapsible on phones
On phones the card is a collapsible of its own: its title and a plus, opening within the card. From 768px it stays open.
Space between panels
Hairlines
Where the theme draws hairlines. Off, the spacing stays.
Show hairlines around page parts
Under the announcement bar, above the footer and pagination, around the collection toolbar, product tabs, help bar and discount code, under drawer and pop-up headings, and on drawer, pop-up and hotspot card edges. Off, space and shadow separate them. Dropdowns keep their border.
Show hairlines in product information
The options, quantity, details, specifications and pickup rows, on the product page and in Quick buy.
Show hairlines in questions
The FAQ section and the Questions block.
Show hairlines in the bag
The lines on the bag page and in the bag drawer.
Show hairlines in search and filters
The search panel's results and the filter panel.