Layout width settings

Featured links

1. Company XYZ documentation on layout widths settings
2. Shopify documentation on sections and blocks
3. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings to control how wide an area appears overall and how wide its content can stretch inside that space. They are useful when you want one part of the page to feel more readable, more spacious, or more visually distinct without changing the broader design.

Width settings

This group includes one control for the inner content area and one for the outer section wrapper. Together, they shape how text, images, and backgrounds occupy the page.

You can also review Company XYZ documentation on layout widths for more examples of how these width choices work in practice.

For a broader overview of how these settings fit into your storefront layout, see Shopify documentation on sections and blocks

Content width

Content width sets the maximum width of the material inside the area. This is usually the most important setting because it directly affects reading comfort, media sizing, and how dense or open the layout feels.

Narrower widths are often best for text-heavy content because shorter line lengths are easier to scan. Wider widths tend to suit image-led layouts, product grids, and multi-column content that needs more horizontal space.

If you keep the shared theme setting, the area stays aligned with the rest of the site. If you choose a custom width, you can make that area feel intentionally tighter or more expansive.

Tip

Adjust content width first. In many cases, it gives you the result you want without needing to change the outer wrapper.

Content width still adapts for smaller screens, so this choice mainly affects how the layout feels on larger viewports.

Section width

Section width controls the outer wrapper around the content. This matters most when the area uses a background color, image, or another visual treatment that extends beyond the content itself.

A wrapper that follows the content width creates a contained look. Wider wrapper choices make the area feel broader and can give background treatments more presence.

Blank, transparent, or default-style background values usually keep the surrounding theme styling intact. Explicit colors, gradients, or media-based backgrounds make the area feel more independent and can visually separate it from adjacent sections.

Full-width and full-bleed options are most useful when you want the outer area to stretch farther across the page. In practice, this is usually a visual decision rather than a reading-layout decision.

Review content width and section width together when using strong background treatments. A very wide outer area with narrow inner content can look intentional, but it can also feel unbalanced if the spacing is too tight or too loose.

Choosing shared or custom widths

Use the shared theme setting when you want a consistent page rhythm across different areas. This is usually the safest choice for maintaining clean alignment from one area to the next.

Use custom widths when a specific area needs a different presentation. Common reasons include improving readability for longer text, giving media more room, or making a featured area stand out.

Previewing changes accurately

Width changes can look different in the editor than they do on the live page, especially with wider layouts and edge-to-edge designs. Check the storefront view before deciding whether spacing and balance feel right.

For details on working in the editor, see Shopify documentation on the theme editor

Usage notes

1. Prioritize readability. Use narrower content widths for long text so line lengths stay comfortable to read.
2. Give media room when needed. Choose wider content widths for image-heavy or multi-column layouts that need more horizontal space.
3. Use outer width for visual impact. Change section width when backgrounds or edge-to-edge styling should carry more weight on the page.
4. Keep background styling consistent. Leave background values blank or at the default when you want the surrounding theme styling to continue; use explicit colors, gradients, or media when you want the area to stand apart.
5. Keep alignment intentional. Use the shared theme setting when you want areas to line up consistently across the site.
6. Preview outside the editor. Check the live page view before finalizing wide, full-width, or full-bleed layouts.