Diamond Loop
The catalogue grid — card sources, toolbar, pagination modes, AJAX filtering and the choose-for-ring action.
The Diamond Loop is the widget you will use most. It queries the synced catalogue and renders the results, and almost everything about how it looks is a control.
Card source
The first decision, under Content → Cards → Card source:
| Source | Use it when |
|---|---|
| Pre-designed cards (addon skins) | You want one of the five skins. The fastest good-looking result, and what the rest of this page assumes. |
| NivoSync theme card (active skin) | You want the card identical to the core's theme, inside a layout you built. |
| Elementor template (loop item) | You want to design the card yourself. See Loop item templates. |
Toolbar
Above the grid: the results count, the grid/list toggle and the sort dropdown. Turn it off if you would rather place those as separate widgets — Results Count, Sort Filter and the view toggle all exist as atoms.
The visitor's grid/list choice persists, so someone who prefers list view keeps it as they browse.
Pagination
Three modes:
- Page numbers (AJAX) — numbered links, no page reload.
- Load more — a button that appends the next page.
- Infinite scroll — loads as the visitor reaches the end.
All three keep the grid in place and swap only the cards.
AJAX filtering
With AJAX filtering on, the loop listens to every NivoSync filter widget on the page and updates without a reload. This is what makes a page built from separate filter atoms behave as one catalogue.
Show filters in the address bar puts the active filters into the URL, so a filtered view can be shared or bookmarked. Off keeps the address bar clean. Read filters from URL does the reverse — the loop applies ?shapes=…, ?color=…, ?carat_min=… from the page URL on load, which is what makes a "shop round diamonds" link from your navigation work.
The card button
Card button action decides what the call to action does:
- Go to the diamond page — the normal catalogue behaviour.
- Choose this diamond for the ring — stores the stone in the Ring Builder session and moves the shopper on. Needs the Ring Builder enabled in NivoSync; with it off, the button opens the diamond page instead.
For a loop embedded on a setting page there is an After choosing option: stay on this page, which reloads the setting page with the diamond attached instead of navigating away.
What each card shows
Toggle each spec independently: colour, clarity, cut, polish, symmetry, report number, dimensions. Colour and clarity and cut are on by default; polish and symmetry off.
Also available: the origin badge (HPHT / CVD / Natural), the lab logo where one exists, the wishlist heart, the compare control and a "from" price prefix.
Card Text gives you per-part alignment — title, carat, spec labels, spec values, dimensions, report and price can each be left, centred or right. Note that carat, spec labels and values share one row in every design so they align together, and in Sofia the price shares its row with a stretched button, so it stays put by design.
Empty states
- No results shows your own text, which defaults to a suggestion to adjust the filters.
- A diamond with no image falls back to the image you set, or the core's placeholder.
- In the editor with an empty catalogue, the loop shows sample diamonds so you can design against something. They are editor-only and never appear on the published page.