Appearance

Section Divider ​

What This Section Does ​

Creates decorative visual separations between different sections on your page. Choose from waves, geometric shapes, clouds, and other creative designs to add visual interest and create smooth transitions between content areas with different background colors.

Perfect for: Breaking up long pages with visual interest, creating smooth transitions between sections with different color schemes, adding personality to your page design without overwhelming the content.

How to Add It ​

Step 1: Add the Section

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Click Add section between any two existing sections
  4. Choose Section Divider from the list

Step 2: Match Your Color Schemes

  1. Set the Above Color Scheme to match the section above the divider
  2. Set the Below Color Scheme to match the section below the divider
  3. Choose your preferred Divider Style from 20+ options

Key Settings to Configure ​

Color Matching ​

Above/Below Color Schemes: Must match your adjacent sections for seamless integration

  • When to use: Different color schemes create the divider effect - same schemes make it invisible
  • Pro tip: The divider creates a transition from one color to another, so contrasting schemes work best

Divider Style ​

Style Options: Choose from waves, geometric shapes, clouds, and creative patterns

  • Wave styles: Classic, gentle, deep, or sine waves for organic, flowing transitions
  • Geometric styles: Diagonal, triangle, zigzag, or steps for modern, structured looks
  • Creative styles: Clouds, mountains, comic burst, or puzzle pieces for unique personality

Size and Orientation ​

Height Size: Controls how prominent the divider appears (XS to 2XL)

  • Best practice: Larger dividers work better with bold styles, smaller ones for subtle separation
  • Flip/Reverse: Change the direction and orientation of the divider pattern

Pro Tips for Success ​

Best Practices

  • Use dividers sparingly - one or two per page is usually enough
  • Match the divider style to your brand personality (waves for organic brands, geometric for tech)
  • Ensure good color contrast between the "above" and "below" sections
  • Test on mobile - some intricate patterns work better on larger screens

Common Mistakes

  • Don't use the same color scheme for both above and below - the divider won't be visible
  • Avoid using dividers between every section - it can make pages feel choppy
  • Don't choose overly complex patterns for small divider heights