Stepper, Summary and Mini
The three Ring Builder widgets you place yourself — the progress stepper, the final summary, and the compact ring-in-progress for headers and sidebars.
The composer renders these for you. Place them individually when you are building the steps yourself, or when you want one of them somewhere the composer does not reach — a header, a sidebar, a setting page.
Ring Builder Stepper
The three-step progress indicator.
Each skin has its own anatomy, taken from the design set rather than being one shape recoloured five times: Sofia draws cards, Dayana plaques, Maya a stepped arc rail, and Alexandra dark orbs on a connector line.
Which step is active
By default the stepper works it out from the page it is on: diamond pages are step 1, setting pages step 2, the complete route step 3. When there is no route to read, it falls back to how far the session has got.
Active step overrides that. Set it to a fixed step when the automatic answer is not the one you want — the usual case is a single-setting template whose buy panel is the end of the journey, where forcing step 3 reads better than step 2.
Other controls
- Show step labels and per-step labels and descriptions.
- Clickable completed steps — completed steps link backwards so a shopper can change their diamond. Upcoming steps are never clickable; the core would reject a forward jump anyway.
- Circles show — numbers, or icons (diamond, ring, check). With icons, the active step shows its icon while upcoming steps keep their number and completed ones show the check.
- Progress bar — inline, as a bar under the steps, or stacked as the connector line through the circles.
Style controls cover circle size, label typography, and text / circle / icon colour for each of the three states.
Ring Builder Summary
The final step's content: what the shopper chose and what it costs.
It renders the diamond and the setting with their images and prices, the ring size selector, the price breakdown, and the action buttons — all following the NivoSync dashboard gates, so the cart button does not appear on a store with the cart switched off.
Controls let you show or hide each block (diamond, setting, ring size, breakdown), rename the labels, and set the button text. If the certificate option is enabled in your Ring Builder settings, its checkbox appears here automatically.
Ring Builder Mini
A compact "ring in progress" for places that are not the builder: a header, a sticky sidebar, a promotional section.
It shows the pieces chosen so far, what is still pending, the running total, and a single continue button that points at whichever step comes next. It is a nudge, not a control panel — one call to action, no editing.
Two modes:
- Ring in progress (session summary) — the native version described above.
- Core mini configurator (shortcode) — the core's own fixed-product widget, rendered by the active NivoSync theme.
Placing them yourself
If you are building a Ring Builder step from individual widgets rather than the composer:
- Assign your template to the relevant Ring Builder surface.
- Put the Stepper at the top.
- Add the filter widgets and the Diamond Loop (diamonds step) or the setting filters and Setting Loop (settings step).
- On the complete step, use the Summary.
Give every widget the same skin, or the page will not read as one design.