Spacing

The Spacing section is a utility component designed to control vertical spacing and visual separation between other sections. Use it to add breathing room, create visual hierarchy, or insert decorative borders without adding content. This minimal, layout-focused utility helps you perfect the spacing between sections without cluttering your page with unnecessary content blocks.

What this section controls

This section controls vertical spacing with the following capabilities:

Adjustable vertical spacing (None, S, M, L, XL)
Separate top and bottom spacing controls for desktop
Independent mobile spacing settings
Section borders (None, Top, Bottom, Both)
Color scheme selection for background
Full-width or standard width options
No content blocks - purely for layout control

Section Settings

Color & Design

Color Scheme

Setting ID: color_scheme
Type: Color Scheme
Default: scheme-1Choose the color scheme for the spacing section background. This determines the background color of the spacing area.Use Cases:

Match the surrounding sections for seamless transitions
Use contrasting colors to create clear visual breaks
Coordinate with your overall page design theme

Section Border

Setting ID: section_border
Type: Select
Options:

none - No border
top - Border at top
bottom - Border at bottom
both - Borders at top and bottom

Default: noneAdd decorative borders to the top, bottom, or both edges of the spacing section.Use Cases:

Create horizontal dividers between content sections
Add subtle visual separation without additional elements
Frame specific page areas with border pairs

Spacing Controls

Top Spacing

Setting ID: spacing_top
Type: Select
Options:

0 - None
1 - Small (S)
2 - Medium (M) ⭐ Default
4 - Large (L)
6 - Extra Large (XL)

Controls the amount of padding/margin above the section.Spacing Scale Guide:

None (0): No top spacing - section sits flush with content above
Small (1): Minimal breathing room (~20-30px equivalent)
Medium (2): Standard spacing for general use (~40-50px)
Large (4): Significant separation (~80-100px)
Extra Large (6): Maximum spacing for dramatic breaks (~120-150px)

Bottom Spacing

Setting ID: spacing_bottom
Type: Select
Options:

0 - None
1 - Small (S)
2 - Medium (M) ⭐ Default
4 - Large (L)
6 - Extra Large (XL)

Controls the amount of padding/margin below the section.Works identically to Top Spacing but applies to the bottom edge.

Common Use Cases

1. Visual Breaks Between Content

Add breathing room between dense content sections:

[Product Grid Section]
    ↓
[Spacing Section - Medium top/bottom, no border]
    ↓
[Testimonials Section]

Configuration:

Spacing Top: Medium (2)
Spacing Bottom: Medium (2)
Section Border: None
Color Scheme: Same as surrounding sections

2. Page Dividers with Borders

Create clear visual separators between page areas:

[Hero Banner]
    ↓
[Spacing Section - Large spacing, bottom border]
    ↓
[Featured Collections]

Configuration:

Spacing Top: Large (4)
Spacing Bottom: Large (4)
Section Border: Bottom
Color Scheme: Contrasting scheme for visibility

3. Whitespace-Only Separation

Add clean, minimal spacing without any borders:

[Content Section 1]
    ↓
[Spacing Section - XL spacing, no borders]
    ↓
[Content Section 2]

Configuration:

Spacing Top: Extra Large (6)
Spacing Bottom: Extra Large (6)
Section Border: None
Color Scheme: Match background

4. Framed Content Areas

Use dual borders to frame specific sections:

[Spacing Section - Top border]
    ↓
[Important Announcement]
    ↓
[Spacing Section - Bottom border]

Configuration:

Spacing Top: Small (1)
Spacing Bottom: Small (1)
Section Border: Both
Color Scheme: Highlight scheme

Layout & Positioning

Section Class

Class: section-spacing
Tag: <section>

This section uses semantic HTML5 <section> tag and applies the .section-spacing class for styling.

Best practices

Consistent Spacing Scale

Use the same spacing values (S, M, L, XL) consistently throughout your site to create visual rhythm and hierarchy.

Strategic Border Use

Don’t overuse borders - reserve them for major page divisions or important content separators.

Color Coordination

Match spacing section color schemes with adjacent sections for seamless flow, or use contrast for dramatic breaks.

Mobile Consideration

Remember that spacing values may adjust on mobile - test your layouts on multiple screen sizes.

Design Tips

Creating Visual Hierarchy

Light Spacing (S): Use between closely related content sections

Product Description
[Spacing: Small]
Product Specifications

Medium Spacing (M): Standard separation for general content

Featured Products
[Spacing: Medium]
Testimonials

Heavy Spacing (L/XL): Major page divisions or emphasis

Hero Section
[Spacing: Extra Large]
Main Content Area

Border Strategies

Borders inherit styling from your theme’s border settings. They typically use subtle colors that complement your color schemes.

Single Border Usage:

Top border: Starts a new content area
Bottom border: Closes/ends a content area

Dual Border Usage:

Both borders: Frames/isolates important content
Often paired with contrasting color schemes

Technical Details

Schema Structure

{
  "name": "t:sections.spacing.name",
  "tag": "section",
  "class": "section-spacing",
  "settings": [
    // Color scheme setting
    // Spacing top/bottom selects
    // Section border select
  ]
}

Section Limits

No limit: Add as many spacing sections as needed
No blocks: This section contains no child blocks
Pure utility: No content, text, or media settings

Accessibility Considerations

The Spacing section is primarily decorative. Ensure it doesn’t create confusing gaps that disrupt screen reader navigation or keyboard focus flow.

Accessibility Best Practices:

Use sparingly to avoid creating disorienting empty spaces
Don’t rely on spacing alone to convey meaning or structure
Ensure spacing doesn’t break logical content relationships
Test with screen readers to verify smooth navigation flow

Preset Configuration

The section comes with one preset: Default Spacing Preset:

Category: Basic
Spacing Top: Medium (2)
Spacing Bottom: Medium (2)
Section Border: None
Color Scheme: Scheme 1

To Add: Click Add section → Basic → Spacing

Example Implementations

1. Homepage Content Separator

Goal: Separate hero from product grid with clean whitespace

Settings:
- Spacing Top: 4 (Large)
- Spacing Bottom: 4 (Large)
- Section Border: none
- Color Scheme: scheme-1 (match page background)

Result: 80-100px of clean whitespace between sections

2. Bordered Content Divider

Goal: Create visible separation with horizontal line

Settings:
- Spacing Top: 2 (Medium)
- Spacing Bottom: 2 (Medium)
- Section Border: bottom
- Color Scheme: scheme-4 (subtle contrast)

Result: Medium spacing with decorative bottom border

3. Dramatic Section Break

Goal: Maximum visual separation for page transitions

Settings:
- Spacing Top: 6 (Extra Large)
- Spacing Bottom: 6 (Extra Large)
- Section Border: both
- Color Scheme: scheme-3 (contrasting background)

Result: Large gap with dual borders, creates strong visual break

Troubleshooting

Spacing appears too large/small

Problem: The spacing doesn’t match your expectationsSolutions:

Check theme’s CSS custom properties - spacing multipliers may vary
Remember mobile viewports may use different spacing scales
Test on actual devices, not just browser resize
Consider cumulative effect with adjacent section spacing

Borders not visible

Problem: Selected borders don’t appearSolutions:

Verify border color isn’t matching background color
Check theme customizer for global border settings
Ensure color scheme supports visible borders
Try different color scheme combinations

Section creates unwanted gaps

Problem: Spacing section disrupts page flowSolutions:

Reduce spacing values (use S instead of L)
Check if adjacent sections already have spacing
Remove the section and use built-in section spacing settings instead
Verify section is placed in correct position

Color scheme doesn't apply

Problem: Background color not showingSolutions:

Increase spacing values - color only visible when section has height
Check if transparent backgrounds are intended
Verify color scheme is properly configured in theme settings
Test with contrasting color scheme to confirm

All Sections: The Spacing section can be used between any other sections
Works particularly well with content-heavy sections like:
- Featured Products
- Testimonials
- Rich Text
- Full Width Banner
- Featured Collections

Quick Reference

Setting	Purpose	Default
Color Scheme	Section background color	scheme-1
Spacing Top	Padding/margin above	2 (Medium)
Spacing Bottom	Padding/margin below	2 (Medium)
Section Border	Decorative borders	none

Spacing Scale: 0 (none) → 1 (S) → 2 (M) → 4 (L) → 6 (XL) Border Options: none → top → bottom → both

Summary

The Spacing section is a simple but powerful utility for controlling vertical rhythm and visual hierarchy on your pages. Use it strategically to: Add breathing room between content sections
Create visual breaks with optional borders
Control page flow and reader attention
Maintain consistent spacing throughout your site

Pro Tip: Create a consistent spacing rhythm by using the same spacing values (e.g., always use Medium for standard breaks, Large for major sections) throughout your entire site.

Overview

Theme Settings

Header

Footer

Products

Collections

Pages & Templates

Sections

What this section controls

Section Settings

Color & Design

Spacing Controls

Common Use Cases

1. Visual Breaks Between Content

2. Page Dividers with Borders

3. Whitespace-Only Separation

4. Framed Content Areas

Layout & Positioning

Section Class

Best practices

Consistent Spacing Scale

Strategic Border Use

Color Coordination

Mobile Consideration

Design Tips

Creating Visual Hierarchy

Border Strategies

Technical Details

Schema Structure

Section Limits

Accessibility Considerations

Preset Configuration

Example Implementations

1. Homepage Content Separator

2. Bordered Content Divider

3. Dramatic Section Break

Troubleshooting

Quick Reference

Summary

Overview

Theme Settings

Header

Footer

Products

Collections

Pages & Templates

Sections

​What this section controls

​Section Settings

​Color & Design

​Spacing Controls

​Common Use Cases

​1. Visual Breaks Between Content

​2. Page Dividers with Borders

​3. Whitespace-Only Separation

​4. Framed Content Areas

​Layout & Positioning

​Section Class

​Best practices

Consistent Spacing Scale

Strategic Border Use

Color Coordination

Mobile Consideration

​Design Tips

​Creating Visual Hierarchy

​Border Strategies

​Technical Details

​Schema Structure

​Section Limits

​Accessibility Considerations

​Preset Configuration

​Example Implementations

​1. Homepage Content Separator

​2. Bordered Content Divider

​3. Dramatic Section Break

​Troubleshooting

​Related Sections

​Quick Reference

​Summary

What this section controls

Section Settings

Color & Design

Spacing Controls

Common Use Cases

1. Visual Breaks Between Content

2. Page Dividers with Borders

3. Whitespace-Only Separation

4. Framed Content Areas

Layout & Positioning

Section Class

Best practices

Design Tips

Creating Visual Hierarchy

Border Strategies

Technical Details

Schema Structure

Section Limits

Accessibility Considerations

Preset Configuration

Example Implementations

1. Homepage Content Separator

2. Bordered Content Divider

3. Dramatic Section Break

Troubleshooting

Related Sections

Quick Reference

Summary