Configure page width, spacing, and structural settings that define your store layout
Layout settings establish the foundational structure of your store, controlling how wide content displays, vertical space between sections, spacing in product grids, and overlay effects on images. These global settings create the overall visual rhythm and proportions of your site, affecting every page and section. Configure layout settings at the start of theme setup to establish consistent spacing and proportions that cascade throughout your entire storefront.
Layout settings establish the foundational structure of your store - how wide content displays, how much space appears between sections, spacing in product grids, and overlay effects on images. These settings create the overall visual rhythm and proportions of your site.
Layout settings are global and affect your entire store. Changes here cascade to all pages and sections.
Sets the maximum width for your site’s content container. Content never exceeds this width even on ultra-wide screens.Range: 720px – 1920px Step: 120px Default: 1440px
Base unit for vertical spacing between sections. This value is multiplied by section-level spacing settings (0, 1, 2, 4, 6) to calculate final spacing.Range: 0.2rem – 2.4rem Step: 0.2rem Default: 1.6rem
This is a unit setting, not the actual spacing. Actual spacing = unit × section level from individual section settings.
Understanding the spacing multiplier system
How it Works:Step 1: Set unit size here (e.g., 1.6rem) Step 2: Each section chooses spacing level (0, 1, 2, 4, 6) Step 3: Final spacing = unit × levelExample with 1.6rem unit:
Level 0: 1.6rem × 0 = 0rem (no spacing)
Level 1: 1.6rem × 1 = 1.6rem (26px)
Level 2: 1.6rem × 2 = 3.2rem (51px)
Level 4: 1.6rem × 4 = 6.4rem (102px)
Level 6: 1.6rem × 6 = 9.6rem (154px)
Example with 2.0rem unit:
Level 0: 0rem
Level 1: 2.0rem (32px)
Level 2: 4.0rem (64px)
Level 4: 8.0rem (128px)
Level 6: 12.0rem (192px)
Benefits:
Consistency: All sections use same spacing scale
Flexibility: Change unit to adjust all spacing proportionally
Gradient overlay applied to images and videos on mobile devices. Often set darker than desktop due to smaller screens.Options: Same as desktop Default: Normal (25%)
Media overlays improve text readability when text appears over images. Use Normal (25%) as starting point, increase if text is hard to read.
When to use each overlay intensity
No Overlay (0%):
No text over images
Dark text on light images
Image quality priority over readability
Background images without content
Normal (25%) - Default:
Light text over mixed images
Hero sections with CTAs
Balanced readability and image visibility
Recommended starting point
Semi Dark (50%):
Light text over bright images
Important text content over media
Outdoor/high-contrast photography
Dark (75%):
Light text always clear
Small text over images
Critical information (prices, CTAs)
Very bright photography
Full Dark (100%):
Complete text priority
Image serves as texture only
Maximum readability required
Rarely needed (often too dark)
Desktop vs mobile overlay strategies
Same Overlay (Most Common):
Desktop: Normal (25%)
Mobile: Normal (25%)
Why: Consistency, similar readability needs
Darker Mobile:
Desktop: Normal (25%)
Mobile: Semi dark (50%)
Why: Smaller screens, outdoor mobile usage
Use: If mobile users report readability issues
Lighter Desktop:
Desktop: No overlay (0%)
Mobile: Normal (25%)
Why: Large screens show images better
Use: Image-focused stores, art/photography
Testing: View hero sections on actual phones outdoors - mobile often needs darker overlays.
Overlay technical details
How Overlays Work:
CSS linear-gradient from transparent to black
Direction: Top to bottom (180deg)
Applied as pseudo-element over media
Doesn’t affect actual image file
Gradient Values:
Normal: rgba(0, 0, 0, 0) → rgba(0, 0, 0, 0.25)
Semi: rgba(0, 0, 0, 0) → rgba(0, 0, 0, 0.5)
Dark: rgba(0, 0, 0, 0) → rgba(0, 0, 0, 0.75)
Full: rgba(0, 0, 0, 0) → rgba(0, 0, 0, 1)
Performance: Minimal impact - CSS gradients are hardware-accelerated.Accessibility: Improves contrast for screen readability (WCAG benefit).
Start with 1440px page width
Works for 95% of modern monitors. Only adjust if you have specific needs (wider for photography, narrower for text).
Keep page gutter at 1.6-2.4rem
Provides comfortable edge spacing without wasting screen space. 1.6rem (default) works for most stores.
Use 1.6rem section spacing unit
Balanced spacing that works with all section levels (0, 1, 2, 4, 6). Only adjust if going for compact or spacious aesthetic.
Match desktop and mobile spacing
Keep both at 1.6rem unless you have specific mobile optimization needs.
0.8rem grid spacing is safe default
Works well for 3-4 column product grids. Adjust based on card size and column count.
Use Normal (25%) media overlay
Improves text readability while preserving image visibility. Increase only if text is hard to read.
Test on actual large monitors
If using wide page widths (1680px+), preview on 27”+ monitors to verify image quality.
Ensure image quality matches width
Wider page widths require higher resolution images. See “Image requirements by page width” accordion.
Maintain consistent spacing rhythm
Don’t mix spacing strategies - choose compact, standard, or spacious and stick with it.
Preview across entire store
Layout changes affect every page. Check homepage, collection pages, product pages, and cart before saving.
