Layout and spacing
Change the default width, margins, and padding of sections and elements.
In the theme editor, click the Layout and spacing block under Global styles to find settings.
Max page width
1000 - 1600px
Applies to "page width" option in section settings. The effect of this option will be noticeable only when the window is wider than the max page width.
Outer margins
8 - 200px
Adds space on the left and right sides of sections. Outer margins appear only when the browser window with is smaller than the Max page width. Outer margins can help ensure section content is not cut off or overcrowded.
Mobile outer margins
8 - 24px
Adds space on the left and right sides of sections on mobile devices. Switch your theme editor preview to "mobile" to view changes.
Base padding
4 - 16px
Sets the basic unit of padding used when spacing elements in sections. Larger levels of padding will be multiplied by the base padding.
Does not apply to content area padding, grid spacing, card padding, button padding, or outer margins.
Content area padding
4 - 80px
Adds space around section content within its container
Grid spacing
0 - 40px
Adds space between items that appear in rows or columns. Grid items may include images, cards, or column content blocks.
Card padding
4 - 40px
Adds space around content inside a card. Cards may include product cards, images, grid items, blog post cards, etc.
Padding scale ratio
100 - 200%
Controls the amount elements are spaced out. This is calculated in combination with the base padding. Try adjusting both to see how space is adjust.
Does not apply to content area padding, grid spacing, card padding, button padding, or outer margins.
Mobile padding scale
50 - 100%
Controls the amount that padding reduces when viewed on mobile devices. Mobile padding is calculated by dividing the desktop padding by the selected percentage.