Ring Builder composer
The one widget that renders the whole three-step builder — how route awareness works, every control it offers, and when to leave it for individual widgets.
The Ring Builder widget renders the entire builder. Not a step of it — all three, from one instance on one template.
How route awareness works
Assign the same template to the three Ring Builder surfaces. On each request the widget looks at which route the visitor is on and renders the matching step:
| Route | What renders |
|---|---|
| Diamond listing | Stepper, the filter row, and the diamond grid wired to choose-for-ring. |
| Settings step | Stepper, the setting filters, the chosen-diamond banner, and the compatible settings grid. |
| Complete step | Stepper and the Ring Builder summary, with the booking and cart buttons. |
You maintain one template. Change the skin once and all three steps change.
Content controls
Builder
- Mode — Native composes the addon's own widgets, which is what everything below describes. Core shortcode embeds the core's Ring Builder instead, rendered by the active NivoSync theme; use it when you want exact parity with the theme rather than your own design.
- Skin — Default, Sofia, Dayana, Maya or Alexandra. One control, every part.
- Preview step (editor only) — which step the Elementor preview shows. The live site always decides by URL; this only saves you from publishing to see step 2.
Stepper
Turn it off entirely, or rename the three steps. Styling lives in the Style tab.
Diamond filters
A repeater. Each row is one filter, and the row order is the on-page order.
Per row you get:
- Filter — Shapes, Carat, Price, Colour, Clarity, Cut, Certificate lab, Origin, Search or Sort.
- Input type — how that filter is drawn. A grade filter can be chips or a dual-handle slider; carat and price can be a slider or min/max dropdowns.
- Width — a percentage. The width includes the gutter, so percentages that sum to 100 stay on one row instead of wrapping.
On phones every filter goes full width regardless of the percentages.
Diamond cards
- Diamonds per page.
- Card button action — View diamond opens the stone's page; Select for the ring stores it in the Ring Builder session and moves the shopper on. Selecting needs the Ring Builder enabled in NivoSync; with it off, the button keeps opening the diamond page.
- Card button text.
- Toolbar — the count, grid/list toggle and sort control above the grid.
Settings step
- Chosen-diamond banner — the summary card showing the stone the shopper picked, with a link back.
- Only compatible settings — restrict the grid to settings that fit the chosen diamond's shape. This is the core Ring Builder rule and is on by default.
- Metal / Style / Shape filter — three switches.
- Settings per page.
Complete step
Switches for the booking and add to cart buttons. Both still obey the NivoSync dashboard gates — see Dashboard gates.
Style controls
- Layout — spacing between sections, and the horizontal and vertical gaps between filters.
- Canvas — background (colour or gradient), text colour, padding, radius, border and shadow. Each skin fills these with its own design; leave them empty to keep it.
- Section titles — colour, typography and the space below the labels above each filter.
- Stepper — circle size, label typography, and text / circle / icon colour for each of the three states: upcoming, active and completed.
What the composer does not do
It lays the page out for you, in a fixed order: stepper, filters, then content. It will not interleave your own sections between those parts, give you a two-column layout, or let you put a hero between the filters and the grid.
When you need any of that, build the step from individual widgets — the Stepper, the filter atoms and the Diamond Loop are the same engines the composer uses, arranged by you instead.