Success
Layout settings
Control your store’s global widths and corner style for a cleaner, more consistent layout.
These settings control the overall structure of your storefront, including how wide content areas can grow, how far section backgrounds extend, and how rounded many interface elements appear. Because they affect the theme globally, they are best used to set a clear design direction before you fine-tune individual sections in the theme editor
All sections can still offer their own width settings, so think of this group as your default layout foundation. You can also see the related Layout reference for more guidance.
Core layout controls
Section titled “Core layout controls”Border radius
Section titled “Border radius”Border radius adds rounded corners to most frontend elements. Lower values create a sharper, cleaner look, while higher values make the storefront feel softer and more expressive.
Use this setting as part of your overall brand style, not just as a decorative tweak. The best result usually comes from choosing a radius that feels natural across buttons, cards, inputs, and media frames.
Content width
Section titled “Content width”Content width sets the main maximum width for theme content on larger screens. This is the primary layout setting, and it has the biggest impact on how spacious or focused your pages feel.
A narrower width can improve readability and create a more editorial look. A wider width gives product grids, image sections, and promotional content more room, but very wide layouts can make text-heavy areas harder to scan.
The editor can make width changes look more constrained than they appear on the actual storefront. Check the live preview after making layout changes, especially on desktop.
Section width
Section titled “Section width”Section width mainly affects sections that use a background. It controls whether those backgrounds stay aligned to the main content width or extend wider for a more immersive presentation.
Keeping section backgrounds aligned with content creates a tidy, consistent frame. Wider background treatments can help featured promotions or image-led sections stand out, but using them too often can make the page feel less structured. When you leave a background at its default or transparent style, it usually keeps the surrounding fallback styling; adding a solid color, gradient, or media-based background makes that area feel more independent from the rest of the page.
How these settings work together
Section titled “How these settings work together”These controls work best as one system. Content width defines the main frame for reading and browsing, section width shapes how background areas relate to that frame, and border radius sets the tone of the interface. For a broader overview of how theme areas are organized, see Shopify documentation on sections and blocks
A contained content width paired with occasional wider backgrounds often creates a balanced layout that still feels dynamic. If you prefer a more expansive look, make sure your imagery, spacing, and text length can support that extra scale.
Usage notes
Section titled “Usage notes”- Set the global frame first. Choose your overall width direction before adjusting individual sections so the theme stays visually consistent.
- Preview on the storefront. Review layout changes outside the editor to judge spacing and width more accurately.
- Protect readability. Avoid very wide content layouts if your pages rely heavily on long headings, rich text, or detailed product information.
- Use wide backgrounds with intent. Reserve broader section treatments for areas that benefit from extra visual emphasis. Keep default or transparent backgrounds when you want the section to blend into the surrounding layout.
- Keep styling cohesive. Pick a border radius that matches your brand so common interface elements feel unified.