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.