Add SVG separators between your sections with 14 shapes, adjustable sizes, and flip options.
SVG Separators
SVG separators are decorative shapes placed between sections to create smooth visual transitions. Each section can have a top and bottom separator, configured independently.
How to Configure Them
Separators are configured in the global settings of each section, in the "Top separator" and "Bottom separator" groups:
- Open the Shopify theme editor
- Select a section
- Scroll down to the Top separator and/or Bottom separator settings
- Choose a shape, a size, and the desired options
{{GLOBAL_SETTINGS}}. They are rendered via the separator.liquid snippet.14 Available Shapes
The shapes are organized into 4 groups:
Organic
| Shape | Description | Look |
|---|---|---|
| Wave | Smooth, flowing wave | Natural transition, universal |
| Curve | Simple, elegant curve | Soft transition, minimalist |
| Blob | Irregular organic shape | Creative, modern style |
| Scallop | Repeating rounded scallops | Decorative, retro style |
Geometric
| Shape | Description | Look |
|---|---|---|
| Arrow | Arrow pointing down | Directive, guides the eye |
| Tilt | Simple angled line | Dynamic, angular |
| Slant | Pronounced diagonal | Energetic, bold |
| Zigzag | Zigzag line | Graphic, geometric |
Creative
| Shape | Description | Look |
|---|---|---|
| Brush | Irregular brushstroke | Artistic, handmade |
| Torn | Torn paper effect | Textured, organic |
| Drip | Dripping effect | Playful, creative |
Effects
| Shape | Description | Look |
|---|---|---|
| Fade | Transparent gradient | Subtle transition, nearly invisible |
| Line | Simple horizontal line | Minimalist, clean separation |
Settings per Separator
Each separator (top and bottom) has its own independent settings:
| Setting | Type | Options | Default | Condition |
|---|---|---|---|---|
| Shape | Select | 14 shapes + None | None | - |
| Size | Select | Small / Medium / Large / Extra Large | Medium | Shape != None and != Line |
| Flip | Checkbox | On/Off | Off | Shape != None, Fade, Line |
| Overlap | Range | 0-100% | 0 | Shape != None and != Line |
| Color | Text (CSS) | - | - | Shape != None |
Size
Size controls the height of the SVG separator:
| Size | Code | Description |
|---|---|---|
| Small | sm | Discreet separator, reduced height |
| Medium | medium | Standard size |
| Large | lg | Pronounced separator |
| Extra Large | xl | Dramatic separator, maximum height |
Flip
The Flip option horizontally mirrors the separator shape. This allows you to:
- Vary transitions between sections
- Create symmetries (top separator flipped + bottom normal)
- Reverse the direction of a directional shape (arrow, tilt)
Overlap
Overlap makes the separator overflow onto the adjacent section, creating a layering effect. A value of 0 places the separator right at the section boundary.
Color
By default, the separator takes the background color of its section. The color option allows defining a custom CSS color via the --shape-target variable.
color-{{ palette }}). This guarantees a smooth transition between two sections with different palettes.Best Practices
Consistency
Use a family of shapes for your store rather than mixing all shapes:
| Store Style | Recommended Shapes |
|---|---|
| Luxury / Minimalist | Curve, Fade, Line |
| Organic / Nature | Wave, Blob, Curve |
| Geometric / Tech | Arrow, Tilt, Slant, Zigzag |
| Creative / Artisanal | Brush, Torn, Drip |
| Standard e-commerce | Wave, Arrow, Fade |
Top / Bottom Alternation
When using separators, think about the transition in both directions:
Section 1 (Light)
└── Bottom separator: Wave, Medium size
Section 2 (Dark)
├── Top separator: (none - the bottom wave is enough)
└── Bottom separator: Wave flip, Medium size
Section 3 (Light)
└── Top separator: (none)With Color Palettes
Separators are particularly effective between sections with different palettes. They soften the transition between two contrasting background colors:
Light Section (white background)
└── Wave Separator (dark color)
Dark Section (dark background)