Skip to main content
The Spacing section creates an empty block with customizable vertical spacing and optional background color. Use it to add visual breathing room between sections or create subtle visual separators. Spacing section overview

​
What this section controls

  • Vertical spacing above and below
  • Optional background color
  • Full-width spacing divider

​
Getting started

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer.
2

Add Spacing section

Add the section between other sections where you need spacing.
3

Configure spacing

Set spacing top and bottom values and optionally choose a color scheme.

​
Section settings

​
Color scheme

Background color for the spacing section.
  • Shopify color scheme selector
  • Default: Scheme 3
Use a matching or contrasting color scheme to create subtle visual separation.

​
Spacing top

Controls space above the section. Available options: No, S, M, L, XL Default: M

​
Spacing bottom

Controls space below the section. Available options: No, S, M, L, XL Default: M
Combine spacing top and bottom to create larger gaps between sections.
Spacing settings

​
Best practices

  • Use spacing sections to create visual breathing room between dense content
  • Match color scheme with adjacent sections for seamless spacing
  • Use contrasting color schemes to create subtle visual dividers
  • Combine M or L spacing values for standard section separation
  • Use XL spacing for major content breaks (e.g., between homepage sections)
  • Use No spacing with different color scheme to create a colored divider line

​
Common use cases

  • Section separation - Add space between homepage sections
  • Visual dividers - Create colored separators with contrasting schemes
  • Content breathing room - Improve readability by spacing dense content
  • Layout balance - Adjust vertical rhythm of page layouts
  • Mobile optimization - Add extra space for better mobile experience

Common Settings

Learn about common settings shared across sections