Setting filters
Metal, style and shape filters for ring settings, plus the composite Settings Filter Bar and how its widths and mobile collapse work.
Three filter atoms for ring settings, and one composite that holds them together. They talk to the Setting Loop on the page automatically.
The atoms
Setting Metal Filter
The metals your settings are available in — rose gold, white gold, yellow gold, platinum, and whatever else your products define.
Renders as chips, as coloured dots, or as dots with labels. The dot colours are real metal gradients, not flat swatches, so white gold and platinum read as the different-but-similar metals they are.
Setting Style Filter
Solitaire, halo, three stone, vintage, and any other style your products use.
Setting Shape Filter
The centre-stone shape a setting is cut for. This is the one that matters inside the Ring Builder, because it is what compatibility is judged on.
All three share the addon's filter conventions: the five skins, an optional title, and a multi-select switch.
Settings Filter Bar
The composite. One widget holding all three filters, with a repeater for order, placement, alignment and width — the same pattern as Diamond Filters.
Worth repeating here because it is the control people misread: a width percentage includes the gutter that follows it, so three filters at 33% each stay on one row. You do not subtract the gap yourself.
On phones
The bar can collapse behind a single Filters button on mobile, with sort and the view toggle staying visible beside it. On a phone, three filter rows above the grid is three screens of scrolling before the shopper sees a ring; the collapse is usually the right default.
Where these filters sit in the journey
Inside the Ring Builder's settings step, the shopper has already chosen a diamond, and with Only compatible settings on the grid is already restricted to settings that fit it. The filters then narrow within that — metal and style being the useful axes at that point, since shape has effectively been decided by the stone.
Outside the builder, on a standalone "our ring settings" page, all three filters do the obvious thing on the full catalogue.