Theme compatibility

NivoSync does not rely on your theme for layout. It ships its own templates, its own stylesheets and its own page container — which is why the catalogue, the Ring Builder and single diamond pages look the same across themes.

Understanding how NivoSync puts content on the page explains everything about theme compatibility, so it is worth two minutes.

Two ways NivoSync renders#

1. Plugin pages (the default) — independent of your theme's layout#

When a visitor opens the diamond catalogue, a single diamond page or the Ring Builder, NivoSync serves them from its own routes:

/diamonds/                  the catalogue
/diamond/{slug}/            a single diamond
/ring-builder/              the Ring Builder flow
/setting/{slug}/            a single ring setting

These are rendered by NivoSync's own full-width template. It calls your theme for the header and footer — so your navigation, logo and footer stay exactly as they are — but the content itself lives in NivoSync's own container, outside your theme's content wrapper.

The practical consequence: full-width sections really are full width, in any theme. Nothing your theme does to page width affects these pages.

2. Shortcodes — rendered inside your theme's page#

You can also drop a shortcode such as [nivosync_diamonds] into a page you build yourself:

[nivosync_diamonds]
[nivosync_search]
[nivosync_compare]
[nivosync_wishlist]

That content renders inside your theme's page template, in whatever content wrapper your theme provides. Everything works — filters, AJAX, the catalogue, add-to-cart — but the layout now inherits your theme's rules, including its maximum content width.

The caveat, precisely#

Only when embedding via shortcode, in the Elegant skin, the shapes header (the dark band with the diamond shape filters) stops at your theme's content width instead of spanning the viewport. Most themes constrain content to roughly 1140–1280px.

To be clear about the scope:

• Plugin pages (/diamonds/, /ring-builder/): not affected in any theme
• Shortcode embeds in the Default, Modern and Custom skins: not affected
• Shortcode embeds in the Elegant skin: the shapes header is not edge-to-edge
• Nothing functional breaks in any case — it is purely cosmetic

Three ways to resolve it#

Option 1 — use the plugin pages. Point your menu at /diamonds/ instead of embedding a shortcode. No CSS, nothing to maintain.

Option 2 — use your theme's full-width page template. Every mainstream theme ships one (look for "Full width", "Canvas" or "No sidebar" in the page's template dropdown). Assign it to the page holding the shortcode.

Option 3 — one CSS snippet. Paste into Appearance → Customise → Additional CSS:

/* Let the Elegant shapes header span the full viewport width when the
   catalogue is embedded via shortcode inside a constrained theme container. */
.ns-diamonds-wrapper .ns-shapes-header.ns-shapes-fullwidth,
.ns-rb-wrapper .ns-shapes-header.ns-shapes-fullwidth {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

Page builders#

Shortcodes work inside Elementor, Divi, Beaver Builder, Bricks and the block editor — with the same rule as above: the builder's own container governs width.

For a deeper integration than shortcodes allow, NivoSync for Elementor is in development: native Elementor widgets that let you compose your own Ring Builder, catalogue, single diamond and card templates, with full control over containers and layout. See Addons. Support for other builders is being evaluated after that.

Theme status#

Reporting a theme issue#

If a theme misbehaves in a way not described here, email support@nivosync.com with the theme name and version, the page URL, whether you are using a plugin page or a shortcode, and a screenshot. Theme conflicts are usually a short CSS fix on our side.