Spacing

Add empty space between options to create visual separation and organize your option layout.

Overview

Spacing is a static option type that inserts blank vertical space between options on your product page. It's a non-interactive element that helps create visual breathing room and organize options into distinct sections.

Use Spacing for:

• Creating clear separation between two options
• Dividing options into separate sections
• Making clear visual differences between option groups
• Improving readability by adding breathing room
• Organizing complex option sets with strategic gaps

Key characteristics:

• No customer input required
• Cannot be marked as required
• Label cannot be shown on storefront (admin only)
• Single setting: Height (in pixels)
• Purely visual element with no functionality
• Creates invisible vertical space

Configuration

Basic Settings

Setting	Description
Label	Option name (shown in admin only, cannot be displayed on storefront)

Advanced Settings

Setting	Description
Internal Label	Admin-only identifier (replaces label in options list)
Help Text	Additional context (appears based on display mode setting)

Spacing Settings

Setting	Description
Height	Vertical spacing height in pixels (e.g., 10px, 20px, 30px, 40px)

How to Add Spacing

1. Navigate to Option Sets and open your option set
2. Click Add Option
3. Select Spacing from the Option Type dropdown
4. Enter a Label (admin only - cannot be shown on storefront)
5. Set Height in pixels (e.g., 20px for moderate spacing, 40px for larger gaps)
6. (Optional) Click Advanced Settings to add Internal Label or Help Text
7. Click Save in the contextual save bar

Use Cases

Subtle Separation Between Options

Label: (Hidden) Height: 10px

Result: A small gap creates subtle separation between two related options without creating a major visual break

Standard Section Break

Label: (Hidden) Height: 20px

Result: Moderate spacing creates clear visual separation between option groups, making sections more distinct

Major Section Division

Label: (Hidden) Height: 40px

Result: Larger spacing creates a significant visual break, clearly dividing major sections (e.g., personalization options from shipping options)

Minimal Breathing Room

Label: (Hidden) Height: 5px

Result: Very small spacing adds just enough space to prevent options from feeling cramped without creating obvious separation

Clear Visual Difference

Label: (Hidden) Height: 30px

Result: Substantial spacing makes a clear visual difference between options, helping customers distinguish between different option groups

Maximum Separation

Label: (Hidden) Height: 60px

Result: Large spacing creates maximum separation for major section breaks, ideal for separating completely different types of options

Styling

Spacing appearance is controlled entirely through its Height setting:

• Height: Set via Height in pixels
• Appearance: Invisible space - no color, border, or visual element
• Spacing: Adds vertical space between options

The spacing element itself is invisible and only affects the vertical distance between options. It inherits no styling from your theme - it's pure empty space.

Best Practices

Choose appropriate height:

• Use 5-10px for subtle separation between related options
• Use 15-25px for standard section breaks
• Use 30-40px for major divisions between option groups
• Use 50px+ sparingly for maximum separation
• Consider your overall design and option density

Match spacing to purpose:

• Small (5-10px): Related options that need slight separation
• Medium (15-25px): Standard section breaks between option groups
• Large (30-50px): Major divisions between different types of options
• Extra Large (50px+): Maximum separation for completely unrelated sections

Strategic placement:

• Place between unrelated option groups
• Use to separate required from optional options
• Add before important sections to create emphasis
• Use after descriptive text to create visual hierarchy
• Don't overuse - too much spacing creates excessive scrolling

Consider mobile experience:

• Smaller spacing (10-20px) works better on mobile screens
• Large spacing (40px+) can create excessive scrolling on mobile
• Test spacing height on mobile devices to ensure good UX
• Balance visual separation with screen real estate

Combine with other static options:

• Use Spacing for invisible separation
• Use Divider for visible line separation
• Use Descriptive Text for labeled section breaks
• Combine Spacing + Descriptive Text for clear section headers
• Use Spacing before Divider for enhanced separation

Maintain consistency:

• Use consistent spacing heights throughout your option set
• Create a spacing hierarchy (small, medium, large)
• Match spacing to your theme's overall spacing patterns
• Test spacing with your theme's option spacing settings

Avoid overuse:

• Don't add spacing between every option
• Use spacing strategically for section breaks
• Too much spacing makes options feel disconnected
• Balance spacing with visual cohesion

Consider content density:

• Dense option sets benefit from more spacing
• Sparse option sets need less spacing
• Match spacing to the amount of content
• Ensure spacing enhances rather than disrupts flow

Related

• Divider - Visible line separator
• Descriptive Text - Text-based section breaks
• Internal Label - Admin-only identification
• Help Text - Additional context display
• Borders & Shapes - Option spacing and border styling