Appearance

Spacer Block ​

An invisible layout utility that creates vertical spacing between content elements for improved visual hierarchy and breathing room.

Business Impact ​

Strategic spacing improves readability and user experience by:

  • Visual Hierarchy: Guide customer attention through content flow
  • Reading Comfort: Reduce cognitive load with proper content separation
  • Professional Appearance: Create polished, well-designed layouts
  • Mobile Optimization: Ensure proper spacing across all devices

Key Features ​

  • Preset Sizes: Six standardized spacing options for consistency
  • Custom Height: Set precise pixel values for specific needs
  • Responsive Design: Maintains proportional spacing on all devices
  • Layout Category: Organized as a layout utility for easy access

Settings Overview ​

Spacing Control ​

  • Size: Choose from 6 preset spacing levels (Extra Small to Extra Large)
  • Full Height: Option for full viewport height spacing
  • Custom Height: Enable precise pixel-based control
  • Height Slider: Set exact spacing when using custom height (0-1000px)

Best Practices ​

Layout Strategy ​

  • Use consistent spacing patterns throughout your site
  • Start with preset sizes before considering custom heights
  • Test spacing on mobile devices to ensure proper proportions
  • Consider the content above and below when adding spacers

Visual Design ​

  • Less is often more - avoid excessive spacing
  • Maintain rhythm with consistent spacing intervals
  • Use larger spacing to separate distinct content sections
  • Ensure spacing supports your overall design hierarchy

Performance Considerations ​

  • Spacers have minimal performance impact
  • Invisible elements that don't affect page load speed
  • Responsive behavior maintains performance across devices

Common Use Cases ​

  1. Section Separation: Create clear breaks between different content areas
  2. Content Breathing Room: Add space around important elements like CTAs
  3. Mobile Optimization: Compensate for tighter mobile layouts
  4. Design Polish: Fine-tune spacing for professional appearance

Merchant Guidance ​

Spacers are invisible helpers that improve your store's visual appeal without customers noticing them directly. Use them strategically to create comfortable reading experiences and guide customers naturally through your content.

The preset sizes work well for most situations and maintain consistency across your site. Only use custom heights when you need specific spacing that the presets don't provide.