Shape Dividers (Wave, Tilt, Triangle…)

You put a shape — a wave, a tilt, a triangle — on the top and bottom edge of a block; the transition between two sections becomes a soft form instead…

Where to find: Theme Editor → select a block → the Dividers tab in the properties panel on the right Who it's for: Anyone tired of sections ending in a straight edge who wants a "designed" feel in their storefront In short: You put a shape — a wave, a tilt, a triangle — on the top and bottom edge of a block; the transition between two sections becomes a soft form instead of a straight line.

What is it for?

By default blocks meet each other with a straight edge. A shape divider adds an SVG shape to that edge: the section ends with a wavy, tilted or triangular border.

The panel describes it too: "Adds an SVG divider such as a wave, tilt or triangle to the top and bottom edge of the block. The divider cuts into the block edge; its color is usually matched to the neighbouring section background."

This is a general setting as well — whichever block you select, the tab is there. (Except the Header block.)

Where do I find it?

Theme Editor → select a block.
Switch to the Dividers tab in the properties panel on the right.
Inside there are two sub-tabs: Top and Bottom. You configure each edge separately.

Shapes

You pick from the Shape box; each option has a small preview drawing next to it.

Shape	Look
None	No divider (default).
Wave	A single, soft wave.
Layered wave	Three overlapping waves at different opacities.
Curve	An asymmetric, flowing curve.
Tilt	A straight diagonal.
Triangle	A single peak in the middle.
Triangles	A zigzag (many small triangles).
Arrow	A thin band with a downward point in the middle.
Mountains	A multi-peak silhouette.
Split	A V-shaped notch in the middle.
Book	A peak with curved edges in the middle.

Settings

Setting	What does it do?
Shape	The divider form from the list above.
Color	The divider's colour. You can pick a theme colour or set a custom one.
Height	How many pixels the divider occupies (10-320 px, default 80). "This is the desktop height; it scales down automatically on tablet and mobile."
Layer	Above content (the shape sits over the block's content) or Behind the block (the shape stays behind).
Flip horizontally	Mirrors the shape left to right.
Flip vertically	Mirrors the shape top to bottom.

The trick with the colour: when the divider matches the neighbouring section's colour, you get the effect of "one section flowing into the other". For example, if a dark hero block sits above a white section, add a bottom divider and set its colour to white — the hero then ends with a white wave.

If you pick the wrong colour the divider looks like a patch. The rule is simple: divider colour = neighbouring section's background colour.

Editor preview = the live site

The preview in the editor uses the same code as the real storefront. So the divider you see on the canvas looks exactly the same once you publish — no surprises.

Step by step: putting a wave under the hero

Theme Editor → home page → select the hero block.
Dividers tab → Bottom sub-tab.
Shape = Wave.
Color = the background colour of the section below (e.g. white).
Height = try a value between 80 and 100 px.
If you do not like it, turn on Flip horizontally and see the wave facing the other way.
Save → Publish.

Frequently asked questions

The divider is invisible. You may have picked the same colour as the block's own background — the shape then disappears. Change the colour to the neighbouring section's colour.

The divider overlaps the content. Set Layer to Behind the block, or increase the block's top/bottom inner spacing (padding).

It looks too big on mobile. The height scales down automatically on mobile; if it is still too big, set a smaller value while in mobile view (device-based setting, see Device-Specific Settings (Desktop / Tablet / Mobile)).

The tab is missing on the Header. Correct — the header is a fixed bar, so dividers are not supported there.

Does it slow the page down? No. Dividers are small drawings embedded in the page; no extra file is downloaded.

Can I have both a top and a bottom divider? Yes. The Top and Bottom sub-tabs are independent; you can give them different shapes, colours and heights.