Elegant theme

NivoSync ships with three frontend themes for the diamond catalogue. Elegant is the one we recommend for any production jewellery store: it has the most polished filter UX, the cleanest detail page, and the only fully built-out Ring Builder integration. The other two — Default (clean, fast, minimal) and Modern (bold, contemporary, full AJAX filtering) — are equally production-ready; pick whichever matches your brand.

This page covers what Elegant looks like, how to switch to it, and which settings tune its appearance. If you want a quick visual, the Features → Themes page on the marketing site has live previews.

What "Elegant" gives you#

Compared to the Default theme, Elegant changes:

• Side-panel filters with multi-select pills for shape, colour, clarity, cut, lab, fluorescence, polish, symmetry — sticky on scroll, collapsible per group.
• Larger detail cards (3 columns on desktop, 1 on mobile) with hover preview of the 360° viewer when one is available.
• Inline expand panel — clicking a card slides it open in place instead of navigating away, preserving filter state.
• Title hover thumbnails — Queensmith-style gallery peek on the catalogue card itself.
• Sticky filter bar with the current result count.
• Premium typography — Playfair Display serif for titles, IBM Plex Sans for body, configurable via the customisation panel.
• CSS isolation — the theme scopes its reset to .ns-rbl--elegant and hides the page title / breadcrumbs / comments so the catalogue takes the full viewport.

Enabling Elegant on a fresh install#

1. In WP admin, go to NivoSync → Settings → Display.
2. In the Theme dropdown, choose Elegant.
3. Click Save changes.
4. Visit your catalogue page in the frontend (or run the Catalogue page setup if you have not created it yet).

That's it for the default look. The next sections cover the customisation that 80% of stores actually use.

Customisation panel#

Under NivoSync → Settings → Display → Theme customisation you will find a panel that exposes the most-changed knobs without writing CSS. Save changes after each adjustment.

Colours#

• Primary — used for active filter pills, the sticky bar accent, button hover states. Default #1a1a1a (near-black).
• Accent — used for "FROM" price prefixes and selected metal dots. Default #4f46e5 (indigo).
• Text — body text and titles. Default #111111.
• Background — page and card surface. Default #ffffff.
• Filter sidebar background — Default #fafafa.

Typography#

• Title font — choose from Playfair Display, Cormorant, Libre Caslon, or Custom (paste a Google Fonts URL).
• Body font — choose from IBM Plex Sans, Inter, system-ui, or Custom.
• Title size scale — small (28px h1), medium (34px h1, default), or large (40px h1).

Layout#

• Container mode — Contained (max-width, centred) or Widescreen (full bleed).
• Container width — only applies in Contained mode. Slider from 960px to 1920px. Default 1440px.
• Grid columns — 2, 3 (default), or 4 on desktop. Mobile is always 1.
• Cards per page — 12, 24 (default), 48, or 96. Anything above 48 hurts perceived performance on slow connections.

Page header#

The Elegant theme renders a hero header above the catalogue. Toggle it off if you prefer the catalogue to start immediately.

• Enabled — toggle.
• Title — defaults to "Diamonds" but customers usually swap to e.g. "Lab-grown diamonds" or "Engagement collection".
• Subtitle — optional short tagline.
• Description — supports HTML; renders below the subtitle.
• Per-field typography — each of the three fields (title, subtitle, description) has its own font family, size and colour selector.
• Alignment — horizontal (left / centre / right) and vertical (top / centre / bottom of the header band).
• Background — solid colour or image upload, with optional dark overlay (opacity 0-100%).

Frontend behaviour worth knowing#

• Filter persistence in URL — every selection is reflected in the URL as a query string (e.g. ?shape=round&color=D-F&carat=1.0-2.0). Customers can share or bookmark a filtered view.
• AJAX-only filter updates — no full page reload; filters debounce at 300ms.
• Sticky filter bar uses IntersectionObserver; it slides in with a subtle shadow once you scroll past the original header.
• Mobile drawer — under 768px the filter sidebar becomes a bottom-sheet drawer with backdrop and ESC-to-close.
• Image lazy-loading — all card images use native loading="lazy". Combined with next/image-style sizes, the catalogue First Contentful Paint stays under 1.5s on mid-range mobile even with 10k+ diamonds in cache.

Customising further with CSS#

If the customisation panel does not cover what you need, paste custom CSS into NivoSync → Settings → Display → Custom CSS. The Elegant theme uses BEM-style class names scoped under .ns-rbl--elegant:

/* Make the price slightly bolder than the default 500 weight */
.ns-rbl--elegant .ns-rbl-card__price {
  font-weight: 600;
}
 
/* Hide the certification badge on cards (keep on the detail page) */
.ns-rbl--elegant .ns-rbl-card__cert-badge {
  display: none;
}
 
/* Override the active filter pill colour without touching the customisation panel */
.ns-rbl--elegant .ns-rbl-filter-pill--active {
  background-color: #2563eb;
  color: white;
}

Custom CSS is sanitised through wp_strip_all_tags and wp_kses to block <script> injection but otherwise passes through unchanged. There is no "compile step" — the CSS is loaded inline in the catalogue page <head>.

Known limitations of Elegant in v1.0#

• The Ring Builder Elegant integration is production-ready. The Modern Ring Builder is not — if you switch to Modern, the Ring Builder reverts to the Default look.
• Elegant assumes English-language number formatting (1,234.56). For European formatting (1.234,56) you currently need a custom CSS class or a small JS override; native support ships in v1.1.

What to do next#

Once the theme is dialled in, the natural next step is placing the catalogue on a page. Continue to Diamond catalogue page setup.