> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout

> Configure page width, section spacing, and overall layout structure for your store.

Layout settings control the fundamental structure and spacing of your store pages. These settings determine how content spreads across the screen, how much whitespace appears between sections, and the overall visual rhythm of your site.

## What these settings control

* Maximum page width
* Section vertical spacing
* Content distribution across screen sizes
* Overall site proportions
* Whitespace and breathing room

## How to access

<Steps>
  <Step title="Open the Theme Customizer">
    From your Shopify admin, go to **Online Store** → **Themes** → **Customize**.
  </Step>

  <Step title="Navigate to layout settings">
    In the theme editor sidebar, select **Theme settings** → **Layout**.
  </Step>

  <Step title="Adjust width and spacing">
    Configure page width and section spacing using the controls.
  </Step>

  <Step title="Save changes">
    Click **Save** to apply layout changes to your entire store.
  </Step>
</Steps>

## Settings

<Tabs>
  <Tab title="Page Width">
    **Page width**: Sets the maximum width for your site's content container.

    **1200px - 1400px**: Standard width (recommended for most stores)\
    **1400px - 1600px**: Wide layout (requires high-quality images)\
    **1000px - 1200px**: Narrow layout (better for text-heavy content)

    <Tip>Match your page width to your image quality. Wider layouts require higher resolution images.</Tip>
  </Tab>

  <Tab title="Spacing">
    **Section vertical spacing**: Controls the gap between page sections.

    **Small (40-60px)**: Compact spacing, more content visible\
    **Medium (60-80px)**: Balanced spacing (recommended default)\
    **Large (80-120px)**: Generous spacing, luxury feel\
    **Extra Large (120-160px)**: Maximum breathing room, ultra-premium positioning

    <Note>Mobile devices automatically use reduced spacing to maximize screen real estate.</Note>
  </Tab>
</Tabs>

## Best practices

* Match page width to your image quality and content type
* Use Medium spacing as default, adjust based on brand positioning
* Test layout on actual devices at different screen sizes
* Match section spacing to your section count (more sections need tighter spacing)
* Consider mobile experience when choosing wide layouts

<Warning>Changing page width after launch requires reviewing all sections, banners, and images to ensure they still look good at the new width.</Warning>

## Related guides

* [Colors](/themes/release/theme-settings/colors) - Configure color schemes for sections
* [Typography](/themes/release/theme-settings/typography) - Set font sizes that work with your layout
* [Performance](/themes/release/theme-settings/performance) - Optimize large layouts for loading speed