> ## 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.
# Spacing
> Utility section for adding customizable vertical spacing between sections
## What It Does
The **Spacing** section provides a simple, customizable way to add vertical whitespace between sections on your pages. Perfect for creating visual breathing room, separating distinct content areas, or adjusting page rhythm without custom CSS.
## Getting Started
Add the Spacing section between other sections where you want additional vertical space
Select your desired spacing amount for desktop screens (Default, Medium, Compact, or None)
Select your mobile spacing (typically kept at Compact to reduce scrolling on small screens)
Preview your page and adjust spacing values until you achieve the desired visual separation
## Settings
**Type:** Select dropdown\
**Options:** Default, Medium, Compact, None\
**Default:** Default
Controls the amount of vertical spacing (height) on desktop screens (typically 1200px and wider).
### Spacing Options
**None (0px spacing)**
* No additional spacing added
* Adjacent sections directly touch
* **Use when:** You want completely continuous visual flow or you're using this section as a placeholder for future content
**Compact (\~20-30px spacing)**
* Minimal vertical space
* Subtle separation between sections
* **Use when:** You need slight breathing room but want to maintain a tight, content-dense layout
* **Best for:** Long pages with many sections where cumulative spacing would create excessive scrolling
**Default (\~40-60px spacing)** ← **Most Common**
* Standard vertical spacing matching most theme sections
* Balanced separation without feeling empty
* **Use when:** You need standard breathing room between distinct content areas
* **Best for:** General-purpose spacing on most pages (homepage, about, collection pages)
**Medium (\~80-100px spacing)**
* Generous vertical space
* Creates strong visual separation between sections
* **Use when:** You want to emphasize distinct page "chapters" or create a more spacious, luxury aesthetic
* **Best for:** Minimalist designs, high-end brands, pages with fewer sections that benefit from breathing room
### Choosing the Right Desktop Spacing
**Consider Page Context:**
* **Homepage:** Default or Medium (establish visual hierarchy)
* **About page:** Default (balanced storytelling flow)
* **Collection pages:** Compact (keep products visible)
* **Single-section pages:** Medium (add prominence to limited content)
**Consider Adjacent Sections:**
* Between hero and product grid: Default or Medium
* Between similar content sections: Compact or Default
* Between drastically different sections: Default or Medium
* After full-width imagery: Medium (let image breathe)
**Type:** Select dropdown\
**Options:** Default, Compact, None\
**Default:** Compact
Controls the amount of vertical spacing on mobile devices (typically under 768px). Note that mobile has **fewer options** than desktop (no Medium option) to prevent excessive scrolling.
### Mobile Spacing Options
**None (0px spacing)**
* No additional spacing
* Sections directly touch
* **Use when:** Continuous visual flow desired or placeholder for future content
**Compact (\~15-20px spacing)** ← **Default & Recommended**
* Minimal vertical space optimized for mobile
* Reduces scrolling while maintaining visual separation
* **Use when:** Standard use case—provides breathing room without excessive scrolling
* **Best for:** Most mobile layouts (homepage, product pages, about pages)
**Default (\~30-40px spacing)**
* Standard spacing similar to desktop Default
* More generous breathing room
* **Use when:** Page has few sections and you can afford extra space
* **Best for:** Minimalist designs, luxury brands, or pages where scrolling isn't a concern
### Mobile Spacing Best Practices
**Why Compact is Default:**
Mobile screens are vertically constrained. Excessive spacing forces more scrolling, which creates friction. The theme defaults to **Compact** on mobile to optimize for mobile UX while still providing visual separation.
**When to Increase Mobile Spacing:**
* Single-section pages (minimal scrolling impact)
* Luxury/minimalist brands (spacious aesthetic)
* After visually dense sections (let content breathe)
* When desktop uses Medium (maintain relative proportions)
**When to Use None:**
* Rarely appropriate on mobile
* Only when sections are intentionally designed to be continuous
* Testing page designs (temporary placeholder)
## Best practices
Don't add Spacing sections between every section. Most theme sections already have built-in spacing. Add Spacing only where you need *additional* separation beyond theme defaults.
Use Medium spacing to separate major page areas (e.g., hero from content). Use Default between related sections. Use Compact for content-dense pages with many sections.
Default mobile spacing to Compact unless you have specific reason for more space. Excessive vertical spacing on mobile creates scrolling fatigue.
Multiple Spacing sections with Medium spacing can create excessively long pages. Balance generous spacing in key areas with tighter spacing elsewhere.
Always preview spacing changes on both desktop and mobile. What feels "right" on desktop may feel excessive on mobile, and vice versa.
Strategic spacing creates page rhythm. More space = stronger separation. Use Medium spacing before/after key sections to draw attention.
Many sections have their own spacing settings. Check adjacent sections—they may have spacing controls that eliminate need for separate Spacing section.
For complex pages, note why you added each Spacing section (e.g., "Separates hero from products"). Makes future editing easier for you or team members.
## Common Use Cases
### Homepage Visual Hierarchy
**Scenario:** Create breathing room between major homepage sections
```
[Hero Section]
→ Spacing: Medium desktop, Default mobile
[Featured Collection]
→ Spacing: Default desktop, Compact mobile
[Newsletter Signup]
```
**Result:** Hero gets strong emphasis, featured collection has standard separation, newsletter feels naturally integrated
### Content-Dense Collection Page
**Scenario:** Separate collection banner from filter/product grid without excessive space
```
[Collection Banner]
→ Spacing: Compact desktop, Compact mobile
[Collection Product Grid with Filters]
```
**Result:** Minimal but visible separation maintains tight layout, keeps products above the fold
### About Page Chapter Breaks
**Scenario:** Divide about page into distinct "chapters" (story, values, team)
```
[About: Our Story]
→ Spacing: Medium desktop, Default mobile
[About: Our Values]
→ Spacing: Medium desktop, Default mobile
[About: Meet the Team]
```
**Result:** Each section feels like distinct chapter, creating natural reading rhythm
### Single Landing Page with Hero
**Scenario:** Emphasize spacious, high-end aesthetic for product landing page
```
[Hero: Full-width product imagery]
→ Spacing: Medium desktop, Default mobile
[Rich Text: Product story]
→ Spacing: Default desktop, Compact mobile
[Featured Products]
```
**Result:** Luxury feel, hero image breathes, content has balanced spacing
### Contact Page Separation
**Scenario:** Separate contact form from supplementary information
```
[Contact Form Section]
→ Spacing: Default desktop, Compact mobile
[Rich Text: Additional Contact Info / FAQ]
```
**Result:** Form and supplementary content are distinct but not overly separated
### Temporary Content Placeholder
**Scenario:** Reserve space for upcoming section (holiday banner, announcement)
```
[Existing Section]
→ Spacing: Medium desktop, Default mobile (placeholder for Black Friday banner)
[Next Section]
```
**Result:** Space is reserved; when ready, replace Spacing section with actual banner (maintains layout consistency)
## Layout Behavior
### Desktop Behavior
The Spacing section renders as a `` with vertical padding (top and bottom) determined by the **Spacing - Desktop** setting:
* **None:** No height, section essentially invisible
* **Compact:** \~20-30px total height (minimal visual gap)
* **Default:** \~40-60px total height (standard breathing room)
* **Medium:** \~80-100px total height (generous separation)
**Note:** Exact pixel values may vary slightly based on theme styling and may be updated in theme versions.
### Mobile Behavior
On mobile devices (typically under 768px), the Spacing section uses the **Spacing - Mobile** setting:
* **None:** No height
* **Compact:** \~15-20px total height (mobile-optimized minimal space)
* **Default:** \~30-40px total height (standard space, tighter than desktop Default)
**Mobile Optimization:** Mobile spacing values are generally **tighter than desktop equivalents** to optimize for vertical scrolling constraints.
### Responsive Breakpoints
The theme switches from desktop to mobile spacing at the **tablet/mobile breakpoint** (typically 768px). Between desktop and mobile breakpoints (tablet range), spacing may use intermediate values for smooth responsive transitions.
### Empty Content Section
The Spacing section contains **no visible content**—it's purely a structural element. It doesn't render text, images, or other visual elements, only vertical space via CSS padding.
## Related Sections
* **Any Content Section** - Use Spacing between any sections to create custom vertical separation
* **Hero** - Add Spacing after hero sections to create strong visual breaks before content
* **Rich Text** - Use Spacing before/after rich text to emphasize text content
* **Banner Fullwidth** - Add Spacing around fullwidth banners for dramatic effect
* **Newsletter** - Add Spacing before newsletter to create clear call-to-action separation
## Technical Notes
### Implementation Method
The Spacing section is implemented as a semantic `` element with CSS classes that apply padding:
```html theme={null}
```
The padding is applied via CSS variables and classes based on the selected spacing options. Since there's no content, the section height is entirely determined by padding values.
### Accessibility Considerations
The empty Spacing section is **semantically neutral**:
* No ARIA landmarks (it's decorative spacing, not content)
* Not announced by screen readers (no content to read)
* Doesn't interfere with keyboard navigation (no focusable elements)
* Doesn't affect semantic page structure (treated as whitespace)
**Best practice:** Use Spacing sections purely for visual design. Don't try to use them for functional purposes.
### Performance Impact
The Spacing section has **negligible performance impact**:
* No images or external resources to load
* Minimal HTML (one empty element)
* Simple CSS (padding values only)
* No JavaScript
You can safely add multiple Spacing sections to a page without measurable performance degradation.
### CSS Specificity and Customization
If you need custom spacing values beyond the four provided options:
**Option 1: Use Custom CSS**
```css theme={null}
.spacing.custom-spacing {
padding-top: 150px !important;
padding-bottom: 150px !important;
}
```
Add a custom CSS class to the Spacing section (requires theme code editing).
**Option 2: Use Custom Liquid Section**
For highly specific spacing needs, create a custom Liquid section with range sliders for precise pixel control.
**Option 3: Adjust Global Spacing Variables**
Edit theme CSS variables to change default spacing values theme-wide (advanced, affects all spacing instances).
### Comparison with Section Spacing Settings
Many theme sections have **built-in spacing settings** (e.g., "Spacing - Desktop", "Padding Top", "Padding Bottom"). These settings control spacing *around that specific section*.
**When to use Section Spacing Settings:**
* Adjusting space around a single section
* Section has built-in spacing controls
**When to use Spacing Section:**
* Need spacing that's independent of adjacent sections
* Neither adjacent section has suitable spacing controls
* Want to separate two sections that both have "None" spacing
### Multiple Spacing Sections
You can add **multiple Spacing sections consecutively**, but spacing doesn't stack additively in expected ways:
**Two Default Spacing sections in a row:**
* Expected: 2x spacing (120px total)
* Actual: \~1.5-1.8x spacing (CSS margin collapse may reduce cumulative effect)
**Best practice:** Use one Spacing section with appropriate size (Medium, Default, etc.) rather than stacking multiple Spacing sections.
### Spacing vs Padding vs Margin
The Spacing section uses **CSS padding** (not margin):
* **Padding** creates space *inside* the section element
* **Margin** would create space *outside* the section element
This technical choice prevents CSS margin collapse issues and ensures consistent spacing regardless of adjacent section styling.
## Troubleshooting
**Spacing section not creating any space:**
* Check that spacing isn't set to **None** on both desktop and mobile
* Verify adjacent sections aren't using negative margins that collapse the space
* Preview changes are saved (click Save in Theme Customizer)
* Browser cache: Hard refresh (Cmd/Ctrl + Shift + R) to see changes
**Too much space between sections:**
* Check if **both adjacent sections have spacing settings** creating cumulative space
* Verify you didn't accidentally add multiple Spacing sections consecutively
* Reduce Spacing section from Medium → Default or Default → Compact
* Review mobile spacing separately (may need tighter mobile values)
**Spacing looks different on mobile vs desktop:**
* This is expected behavior—mobile uses different spacing scale
* Check that Mobile spacing is set appropriately (typically Compact)
* Preview on actual mobile device or browser DevTools mobile emulation
* Consider if you've set custom mobile spacing that's too large
**Can't see Spacing section in Theme Customizer:**
* Spacing section appears in section list with no visual preview (empty section)
* Look for "Spacing" by name in the section list
* Click on it to reveal the two spacing dropdown settings
**Spacing doesn't match other sections:**
* Verify you're using consistent spacing values (e.g., all Default or all Medium)
* Check that adjacent sections' built-in spacing settings aren't set to None
* Some sections have different default spacing—adjust Spacing section to compensate
**Page feels too long on mobile:**
* Reduce all Spacing sections to Compact on mobile
* Consider removing Spacing sections that aren't essential
* Check individual section spacing settings (many may be set to Default when Compact would suffice)
* Test on actual mobile device (perceived scrolling distance differs from desktop preview)