Layout

Overview

The Layout theme settings group forms the foundation for your storefront’s visual experience and content structure. These controls determine how elements are spaced and sized across every page. This ensures a cohesive, branded appearance that is both accessible and easy to navigate. Layout adjustments apply globally, while still allowing for individual customization at the section or block level if needed.

⚠️ Important: The Layout settings act as your store's structural baseline, providing a consistent customer experience and reinforcing your brand identity. Revisiting these options regularly will help maintain design harmony as your site evolves.

Layout

The Layout settings group brings together essential controls for border radius, content width, and section width. Adjusting these dimensions promotes a visually harmonious and responsive store across all devices. These settings are the backbone of your storefront and lay the groundwork for a pleasant browsing experience.

📝 Note: Changes made in the Layout settings impact the appearance of your storefront everywhere — helping you maintain design consistency across desktop, tablet, and mobile views.

Content gap

The Content gap setting controls the spacing between stacked elements throughout your store — such as sections, product grids, and banners. Adjusting this value helps you fine-tune vertical rhythm and balance across your storefront.

Try increasing or decreasing the value to preview how much visual “breathing room” exists between different content blocks.

💡 Tip: Small content gaps create a compact, editorial feel. Larger gaps improve scannability and give your pages a more open, premium look.

Content width

Content width establishes the maximum size that your main content can occupy on larger screens. Setting the optimal content width ensures a balance between readability and visual impact.

1. Available options:

   1. 768 px — A focused, editorial-style layout for maximum readability.

   2. 1024 px — Balanced width, ideal for most user flows.

   3. 1240 px — Wider presentation supporting more content or larger product displays.

   4. 1440 px — Spacious and immersive, suitable for visually-driven stores.

   5. 1600 px — The default option, providing an open, premium look.

   6. No maximum — Content spans the full browser width.

      1. This setting is best for dramatic, edge-to-edge layouts, but keep in mind it may impact readability on ultra-wide monitors.

2. The default content width is 1600 px.

📝 Note: Widening your content can create a modern and luxurious feel, while tighter widths strengthen focus and readability.

Padding settings

The Padding settings define the default top and bottom space above and below all sections across your site. These global values help maintain consistent vertical spacing and a comfortable reading experience.

You can adjust padding separately for desktop and mobile to optimize visual proportions on every screen size.

📝 Note: Section-level settings can override these global defaults. If a section uses “Custom padding,” its spacing will no longer follow the Layout settings.

Disclaimer on width settings

It is important to be aware that both section and block layouts may have specialized settings which can override the Layout defaults. Always preview your site on desktops and mobile devices before finalizing layout choices. Responsive design, performance, and accessibility are critical for the best user experience.

💡 Tip: Review all layout adjustments on several screen sizes to guarantee a consistent and excellent experience for every visitor.

Usage notes

1. Increasing content width or using 'no maximum' can be dramatic and immersive, but test thoroughly for readability and load performance.

2. Use full width or full bleed options strategically — limiting overuse helps maintain visual clarity and avoids clutter.

3. Always validate your choices at major screen breakpoints (desktop, tablet, and mobile) to ensure fast loading and universal accessibility.

By making thoughtful adjustments within the Layout settings, you will establish a strong, adaptable framework for your storefront. This supports both reliable design patterns and creative customization, playing a central role in shaping customers’ first impressions and ongoing experiences.

Resources