> ## 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, 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.
## What this controls
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.
## How it works
Sahara's layout system has four main components:
1. **Page Width:** Maximum content width (never exceeds this)
2. **Spacing System:** Vertical space between sections (uses multiplier system)
3. **Grid Spacing:** Space between items in product/collection grids
4. **Media Overlays:** Gradient overlays on images to improve text readability
These work together to create a cohesive, well-proportioned design.
Section spacing uses a multiplier system: unit size × section level. Example: 1.6rem unit × level 4 = 6.4rem total spacing.
## Getting started
From Shopify admin → **Online Store** → **Themes** → **Customize**
Click **Theme settings** (gear icon in sidebar) → Select **Layout**
Start with 1440px (default) - works for most modern screens
Keep section spacing unit at 1.6rem unless specific design needs
0.8rem works well for 3-4 column product grids
## Location
**Path:** Theme settings → Layout
## Settings
### Page Width
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
**Standard Widths:**
* **1200-1320px:** Compact, text-focused (blogs, documentation)
* **1440px:** Default, balanced for most stores (recommended)
* **1560-1680px:** Wide, visual-heavy (fashion, photography)
* **1800-1920px:** Ultra-wide, requires excellent images
**Consider:**
* **Monitor sizes:** 1440px matches 1440p monitors (increasingly common)
* **Image quality:** Wider widths need higher resolution images (2000px+ product photos)
* **Content type:** Text-heavy sites benefit from narrower widths (easier reading)
* **Product photography:** If you have stunning large images, go wider
**Testing:**
* Preview on actual large monitors (27"+)
* Check if images look sharp at chosen width
* Verify text line length remains comfortable (60-80 characters)
**1200px Page Width:**
* Product images: 1600px minimum (1.33× page width)
* Hero images: 2000px minimum
* Grid thumbnails: 800px
**1440px Page Width (Default):**
* Product images: 2000px minimum (1.4× page width)
* Hero images: 2400px minimum
* Grid thumbnails: 1000px
**1680px Page Width:**
* Product images: 2400px minimum (1.43× page width)
* Hero images: 2800px minimum
* Grid thumbnails: 1200px
**1920px Page Width:**
* Product images: 2800px minimum (1.46× page width)
* Hero images: 3200px minimum
* Grid thumbnails: 1400px
**Retina Displays:** Multiply by 2× for perfect sharpness on retina/4K screens.
### Page Gutter
Horizontal spacing on left and right edges of the page. Creates breathing room at screen edges.
**Range:** 0 – 4.8rem\
**Step:** 0.4rem\
**Default:** 1.6rem (≈26px)
Page gutter ensures content doesn't touch screen edges. 1.6-2.4rem provides comfortable spacing without wasting screen space.
**Increase to 2.4-3.2rem:**
* Luxury/premium brands (creates exclusivity)
* Text-heavy content (improves reading comfort)
* Ultra-wide layouts (balances large width)
* Minimal design aesthetic
**Keep at 1.6-2.0rem (Recommended):**
* Standard e-commerce
* Balanced design
* Most use cases
**Decrease to 0.8-1.2rem:**
* Maximize product grid space
* Mobile-first design priority
* Dense information displays
**Set to 0rem:**
* Full-bleed hero images
* Edge-to-edge design
* **Caution:** Can cause text to touch edges on mobile
### Section Spacing Unit Size
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.
**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 × level
**Example 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
* **Visual rhythm:** Spacing levels create predictable patterns
**Compact (1.0-1.2rem):**
* Dense information displays
* Many short sections
* News/blog sites
* More content visible per screen
**Standard (1.4-1.8rem) - Recommended:**
* Balanced spacing
* Most e-commerce stores
* Clear section separation
* Default 1.6rem works for 90% of stores
**Spacious (2.0-2.4rem):**
* Luxury/premium positioning
* Fewer, larger sections
* Minimal design aesthetic
* Photography-focused stores
**Testing:** Change unit size and preview homepage - all section spacing adjusts proportionally.
### Spacing Desktop
Additional spacing control for desktop devices. Works together with section spacing unit.
**Range:** 0 – 4.0rem\
**Default:** 1.6rem
### Spacing Mobile
Additional spacing control for mobile devices. Can be reduced to show more content on small screens.
**Range:** 0 – 4.0rem\
**Default:** 1.6rem
Most stores keep desktop and mobile spacing the same (1.6rem). Reduce mobile spacing only if you need more content visible on phones.
**Same Spacing (Recommended):**
* Desktop: 1.6rem
* Mobile: 1.6rem
* **Why:** Consistency, simpler management, good user experience
**Reduced Mobile Spacing:**
* Desktop: 1.6rem
* Mobile: 1.2rem
* **Why:** More content visible on phones, tighter vertical space
* **Use for:** Content-heavy stores, long homepages
**Increased Desktop Spacing:**
* Desktop: 2.0rem
* Mobile: 1.6rem
* **Why:** Luxury feel on large screens, standard comfort on mobile
* **Use for:** Premium brands, photography stores
**Caution:** Large differences (desktop 2.4rem, mobile 0.8rem) create inconsistent experience.
### Grid Horizontal Space
Space between columns in product grids, collection grids, and multi-column layouts.
**Range:** 0.4rem – 4.0rem\
**Step:** 0.2rem\
**Default:** 0.8rem (≈13px)
### Grid Vertical Space
Space between rows in product grids, collection grids, and multi-column layouts.
**Range:** 0.4rem – 4.0rem\
**Step:** 0.2rem\
**Default:** 0.8rem (≈13px)
Grid spacing is independent from section spacing. This only affects space between items within grids, not between sections.
**2 Columns (Large Product Cards):**
* Horizontal: 1.2-1.6rem (more breathing room)
* Vertical: 1.6-2.0rem (generous vertical space)
* **Use for:** Featured products, large images
**3 Columns (Standard Layout):**
* Horizontal: 0.8-1.2rem (balanced)
* Vertical: 0.8-1.2rem (proportional)
* **Use for:** Most collection pages (default)
**4 Columns (Compact Grid):**
* Horizontal: 0.6-0.8rem (tighter)
* Vertical: 0.8-1.0rem (readable)
* **Use for:** Large catalogs, many products
**5+ Columns (Dense Display):**
* Horizontal: 0.4-0.6rem (minimal)
* Vertical: 0.6-0.8rem (compact)
* **Use for:** Swatch displays, small thumbnails
**Tight Grid (0.4-0.6rem):**
* Modern, magazine-like
* Maximizes products visible
* Works for small cards
* Can feel crowded if overdone
**Standard Grid (0.8-1.0rem) - Default:**
* Balanced, professional
* Clear product separation
* Works for most stores
* Recommended starting point
**Loose Grid (1.2-1.6rem):**
* Spacious, premium feel
* Fewer products per screen
* Each product gets more focus
* Good for luxury brands
**Very Loose (2.0+rem):**
* Ultra-minimal aesthetic
* Very few products visible
* Maximum focus per item
* Use sparingly
**Equal Spacing (Recommended):**
* Horizontal: 0.8rem
* Vertical: 0.8rem
* **Effect:** Square grid cells, balanced
* **Use:** Most stores
**Taller Spacing:**
* Horizontal: 0.8rem
* Vertical: 1.6rem
* **Effect:** Rows clearly separated
* **Use:** Products with text-heavy cards
**Wider Spacing:**
* Horizontal: 1.6rem
* Vertical: 0.8rem
* **Effect:** Columns clearly separated
* **Use:** Distinct product categories in columns
**Why adjust:** Can improve readability based on card content and layout.
### Media Overlay Desktop
Gradient overlay applied to images and videos on desktop devices. Darkens bottom of media to improve text readability.
**Options:**
* **No overlay:** No gradient (0% opacity)
* **Normal:** Subtle darkening (25% opacity at bottom) - Default
* **Semi dark:** Medium darkening (50% opacity)
* **Dark:** Strong darkening (75% opacity)
* **Full dark:** Complete darkening (100% opacity)
**Default:** Normal (25%)
### Media Overlay Mobile
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.
**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)
**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.
**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).
## Best practices
1. **Start with 1440px page width**\
Works for 95% of modern monitors. Only adjust if you have specific needs (wider for photography, narrower for text).
2. **Keep page gutter at 1.6-2.4rem**\
Provides comfortable edge spacing without wasting screen space. 1.6rem (default) works for most stores.
3. **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.
4. **Match desktop and mobile spacing**\
Keep both at 1.6rem unless you have specific mobile optimization needs.
5. **0.8rem grid spacing is safe default**\
Works well for 3-4 column product grids. Adjust based on card size and column count.
6. **Use Normal (25%) media overlay**\
Improves text readability while preserving image visibility. Increase only if text is hard to read.
7. **Test on actual large monitors**\
If using wide page widths (1680px+), preview on 27"+ monitors to verify image quality.
8. **Ensure image quality matches width**\
Wider page widths require higher resolution images. See "Image requirements by page width" accordion.
9. **Maintain consistent spacing rhythm**\
Don't mix spacing strategies - choose compact, standard, or spacious and stick with it.
10. **Preview across entire store**\
Layout changes affect every page. Check homepage, collection pages, product pages, and cart before saving.
## Common use cases
**Goal:** Balanced, professional layout that works for most products
**Settings:**
* Page width: 1440px (default)
* Page gutter: 1.6rem
* Section spacing unit: 1.6rem
* Desktop spacing: 1.6rem
* Mobile spacing: 1.6rem
* Grid horizontal: 0.8rem
* Grid vertical: 0.8rem
* Media overlay desktop: Normal (25%)
* Media overlay mobile: Normal (25%)
**Image Requirements:**
* Product photos: 2000px minimum
* Hero images: 2400px minimum
**Why it works:** Balanced proportions, comfortable spacing, works on all screens, minimal image requirements.
**Goal:** Showcase large, high-quality images with generous spacing
**Settings:**
* Page width: 1680px (wide)
* Page gutter: 2.4rem (generous edges)
* Section spacing unit: 2.0rem (spacious)
* Desktop spacing: 2.0rem
* Mobile spacing: 1.6rem (reduced for phones)
* Grid horizontal: 1.2rem (room between products)
* Grid vertical: 1.2rem
* Media overlay desktop: No overlay (0%) - show full images
* Media overlay mobile: Normal (25%)
**Image Requirements:**
* Product photos: 2400px minimum
* Hero images: 2800px minimum
**Why it works:** Images take center stage, spacious feel matches premium positioning, mobile optimized separately.
**Goal:** Maximum readability for text-heavy content
**Settings:**
* Page width: 1200px (narrow for comfortable reading)
* Page gutter: 2.4rem (focus content)
* Section spacing unit: 2.0rem (clear article separation)
* Desktop spacing: 2.0rem
* Mobile spacing: 1.6rem
* Grid horizontal: 1.6rem (generous for featured posts)
* Grid vertical: 2.0rem (vertical hierarchy)
* Media overlay desktop: Semi dark (50%) - text always readable
* Media overlay mobile: Semi dark (50%)
**Image Requirements:**
* Article images: 1600px sufficient
* Hero images: 2000px
**Why it works:** Narrow width keeps line length comfortable (60-80 characters), generous spacing aids scanning, overlays ensure text readability.
**Goal:** Show maximum products per screen while maintaining usability
**Settings:**
* Page width: 1560px (wide but not extreme)
* Page gutter: 1.2rem (minimize edge waste)
* Section spacing unit: 1.2rem (compact sections)
* Desktop spacing: 1.2rem
* Mobile spacing: 1.2rem
* Grid horizontal: 0.6rem (tight grid)
* Grid vertical: 0.8rem (slightly more vertical space)
* Media overlay desktop: Normal (25%)
* Media overlay mobile: Normal (25%)
**Image Requirements:**
* Product photos: 1200px (smaller cards)
* Hero images: 2400px
**Why it works:** Compact spacing shows more products, tight grid maximizes catalog visibility, still maintains readability.
## Related settings
* [Colors](/themes/sahara/theme-settings/colors) - Layout works with color schemes for visual consistency
* [Typography](/themes/sahara/theme-settings/typography) - Text sizing should match page width choices
* [Common Settings](/themes/sahara/common-settings) - Section widths and spacing levels apply within layout structure
* [Products](/themes/sahara/theme-settings/products) - Product grid settings work with grid spacing
***
**Need help?** See [Shopify's theme customization guide](https://help.shopify.com/manual/online-store/themes/customize) or test layout changes in preview mode before publishing.