Skip to main content

​
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

1

Add the Section

Add the Spacing section between other sections where you want additional vertical space
2

Choose Desktop Spacing

Select your desired spacing amount for desktop screens (Default, Medium, Compact, or None)
3

Choose Mobile Spacing

Select your mobile spacing (typically kept at Compact to reduce scrolling on small screens)
4

Preview and Adjust

Preview your page and adjust spacing values until you achieve the desired visual separation

​
Settings

Type: Select dropdown
Options: Default, Medium, Compact, None
Default: DefaultControls 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: CompactControls 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

Use Sparingly

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.

Match Spacing to Context

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.

Keep Mobile Compact

Default mobile spacing to Compact unless you have specific reason for more space. Excessive vertical spacing on mobile creates scrolling fatigue.

Consider Cumulative Impact

Multiple Spacing sections with Medium spacing can create excessively long pages. Balance generous spacing in key areas with tighter spacing elsewhere.

Preview Before Publishing

Always preview spacing changes on both desktop and mobile. What feels “right” on desktop may feel excessive on mobile, and vice versa.

Use for Visual Hierarchy

Strategic spacing creates page rhythm. More space = stronger separation. Use Medium spacing before/after key sections to draw attention.

Coordinate with Section Settings

Many sections have their own spacing settings. Check adjacent sections—they may have spacing controls that eliminate need for separate Spacing section.

Document Your Spacing Strategy

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 <div> 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.
  • 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 <section> element with CSS classes that apply padding: 
<section class="spacing spacing--desktop-default spacing--mobile-compact">
  <!-- Empty content -->
</section>
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 
.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)