Embed on your storefront

How images attach to pages (no guessing)

Niorera does not run PHP or Shopify inside our servers. Your store already knows which product each page is. The template (Liquid, PHP, or theme JSON) inserts that product’s image URL into the embed — you are not matching URLs to pages by hand.

• Recommended: one product template + dynamic image (featured image or metafield).
• Easier install: our loader script + data-license + data-img filled by the theme.
• Backup: one query param images with a base64 payload of many URLs (testing / special cases) — builder below.

Themes: will the embed work on WordPress (and others)?

Other platforms use the same idea as WordPress themes, just under different names: Shopify themes (Liquid), Wix templates, Webflow sites, Squarespace templates, etc. They control layout and styling — not whether Niorera’s iframe or script can run.

WordPress + WooCommerce: the embed is not tied to one theme brand (Astra, Divi, Storefront, etc.). You add the same loader in a place your theme allows: child theme template (e.g. single-product.php), a Custom HTML block, a page builder’s HTML widget, or a generic script/footer injector you already use. Per-product images need a dynamic field (builder “product image” tag, Liquid-style PHP in the theme, etc.) — not a separate Niorera plugin.

What can block a theme? Strict sanitization that strips <iframe> or <script>, or hosts that forbid third-party embeds — not “wrong theme,” but where you paste the code or host policy.

Images on another domain (e.g. CDN): the viewer may need your image hostname allowlisted for your license. Contact support with your license key and store URL — we'll help you get set up.

Platforms that support this pattern

You do not need an account on every platform. Niorera does not host fake Shopify/Wix/Webflow sites. The viewer and iframe behave the same everywhere; only the template that prints the image URL changes.

• Test Niorera itself: open /3d-viewer with ?img= / ?license= and use the URL builder below — that is the real embed surface.
• Test “any platform” without signing up: save a local .html file with the same iframe src or loader markup and a static image URL. If the iframe loads and the art appears, the integration is fine; Shopify would only swap that URL for product.featured_image, etc.
• Your WordPress/WooCommerce site is enough for a full end-to-end test (PHP/theme → real product image → viewer).
• Optional — real Shopify: a Shopify Partners development store is free for building themes and does not require you to run a live paid shop; use it only if you specifically need to validate Liquid in a real theme.

Recommended — one iframe URL

Fastest for most stores: paste a single <iframe> and set src to /3d-viewer with your license, product image URL, and device (phone, laptop, bottle, notebook, vase).

<iframe
  title="Niorera 3D"
  src="https://viewer.niorera.com/3d-viewer?embed=1&license=PASTE_YOUR_LICENSE_KEY&img=PASTE_IMAGE_URL&device=phone"
  style="width:100%;min-height:min(70vh,640px);border:0;border-radius:16px;background:#0a0a12"
  loading="lazy"
  allow="fullscreen"
></iframe>

Option A — Script + div (popup button)

Use this when you want a “View in 3D” button that opens a modal instead of an inline frame. Add the script once, then a container with .niorera-3d-root and data-license. On single product pages, use class niorera-3d-modal (or data-modal="1") — WordPress often strips data-modal, so prefer the class. Use data-img-from="gallery" for the main gallery image, or set data-img from PHP.

<script src="https://viewer.niorera.com/niorera-embed.js" defer></script>

<!-- Product summary only — not global footer. class niorera-3d-modal = popup (WP may strip data-modal). -->
<div
  class="niorera-3d-root niorera-3d-modal"
  data-license="PASTE_YOUR_LICENSE_KEY"
  data-device="phone"
  data-button-label="View in 3D"
  data-img-from="auto"
></div>

Inline iframe (no button): omit class niorera-3d-modal and data-modal. Multiple images: data-imgs="url1|url2" or data-images="BASE64…".

Option A2 — One script tag (auto root)

niorera-onecode.js creates the root and loads niorera-embed.js. Handy if you want one paste without a separate div—still a modal-style flow, not the single-iframe shortcut above.

<script
  src="https://viewer.niorera.com/niorera-onecode.js"
  data-license="PASTE_YOUR_LICENSE_KEY"
  data-device="phone"
  data-img-from="auto"
  data-button-label="View in 3D"
  defer
></script>

How to trust cross-platform coverage

No embed can be “100% guaranteed” across every custom theme without testing, but you can reach production-safe confidence with this short checklist.

1. Test on a real product page in your theme — that catches layout and image-field issues early.
2. Test one real product page per platform/theme (or client site) with data-img-from="auto".
3. Confirm only the main product image is used and the button opens the viewer.
4. If images fail to load, confirm your product image URLs are HTTPS and allowed for your plan (contact support if unsure).

WooCommerce: put the div on the product page, not in related products

The .niorera-3d-root block must live in the single product template near the main gallery — e.g. Elementor “Product content” / short description area, a Custom HTML block in the product layout, or a child theme hook such as woocommerce_single_product_summary (priority ~25, after the gallery). If you paste it into a global “related products” or 4-column upsell section, you will get one embed per suggested product; that is a placement issue, not the viewer.

Block editor (Gutenberg): a Custom HTML block above or below the “Product Image Gallery” block is fine — the loader finds images anywhere on the single product page; it does not need to wrap the gallery. Use class niorera-3d-modal if data-modal is stripped.

Featured image in PHP (replaces data-img-from if you want the file URL from the server):

<?php
// Child theme functions.php — enqueue script globally elsewhere, or use a header/footer plugin for niorera-embed.js
add_action( 'woocommerce_single_product_summary', function () {
  if ( ! is_product() ) {
    return;
  }
  $img = wp_get_attachment_image_url( get_post_thumbnail_id(), 'full' );
  if ( ! $img ) {
    return;
  }
  ?>
  <div
    class="niorera-3d-root niorera-3d-modal"
    data-license="PASTE_YOUR_LICENSE_KEY"
    data-device="phone"
    data-button-label="View in 3D"
    data-img="<?php echo esc_url( $img ); ?>"
  ></div>
  <?php
}, 25 );

One static data-img in a global widget repeats the same art on every product — use PHP (above) or your page builder’s dynamic product image so each product page gets its own URL. “Random 20 related” previews are not built into the loader; use Woo’s related-products template and output one embed per related product with that product’s image URL in a loop.

Option B — Shopify (Liquid) iframe

{% assign sticker = product.featured_image | image_url: width: 1200 %}
<iframe
  title="Niorera 3D"
  src="https://viewer.niorera.com/3d-viewer?embed=1&license=PASTE_YOUR_LICENSE_KEY&img={{ sticker | url_encode }}&device=phone"
  style="width:100%;min-height:min(70vh,640px);border:0;border-radius:16px;background:#0a0a12"
  loading="lazy"
  allow="fullscreen"
></iframe>

Option C — WooCommerce (embed only, no Niorera plugin)

Use the same snippet from /addon/redeem (script + .niorera-3d-root div). Put the script in your footer (theme or any “Insert scripts” / footer box). On the single product layout, the data-img value must be that product’s featured image URL — usually via your page builder’s dynamic “product image” field, or a small PHP snippet in your child theme. A static test page with one hard-coded data-img only shows that one image — use dynamic fields for real catalogs.

Option D — WooCommerce (raw PHP iframe in theme)

Runs on your WordPress server — not on Niorera. Optional if you prefer iframe instead of the loader. Place in single-product.php or a snippet hook.

<?php
$img = wp_get_attachment_image_url( get_post_thumbnail_id(), 'full' );
if ( ! $img ) { return; }
$src = 'https://viewer.niorera.com/3d-viewer?embed=1&license=PASTE_YOUR_LICENSE_KEY&device=phone&img=' . rawurlencode( $img );
?>
<iframe title="Niorera 3D" src="<?php echo esc_url( $src ); ?>"
  style="width:100%;min-height:min(70vh,640px);border:0;border-radius:16px;background:#0a0a12"
  loading="lazy" allow="fullscreen"></iframe>

One line for all image URLs

Option 1 — query string: ?imgs=URL1|URL2|URL3 (pipe = delimiter; commas work if URLs have no commas). Option 2 — base64 backup: paste one URL per line below; we encode JSON as base64url into a single images= param (best when URLs contain commas or odd characters). The viewer uses the first URL for the current 3D sticker unless the scene is extended for multi-slot. With a valid ?license= key, the server only keeps the first N URLs for your tier (e.g. Studio = 20); the rest are ignored.

Preview on your computer (optional)

If you are developing the Nior site locally, run your usual dev server (often http://localhost:3000) and use the same iframe pattern as above with that origin. Replace the license and image URL with your own.

<!-- Local preview — replace origin, license, and image -->
<iframe
  title="Niorera 3D preview"
  src="http://localhost:3000/3d-viewer?embed=1&license=PASTE_YOUR_LICENSE_KEY&img=https%3A%2F%2Fcdn.yourstore.com%2Fart.webp&device=phone"
  style="width:100%;min-height:min(70vh,640px);border:0;border-radius:16px;background:#0a0a12"
  loading="lazy"
  allow="fullscreen"
></iframe>

HTTPS site + HTTP localhost: browsers block mixed content, so a live HTTPS store page cannot embed http://localhost. Use a staging site over HTTPS, or open the /3d-viewer?… link directly in your browser to verify the viewer.

If you see a “Coming Soon” or maintenance page instead of the viewer, the site may still be in preview — check your deployment or contact support.

Blank iframe in WordPress?

The markup is usually fine. Open your src URL in a new browser tab. If you see the Coming Soon page or a redirect, the storefront host must serve /3d-viewer without sitewide redirects and must not send X-Frame-Options: SAMEORIGIN on that route (cross-origin embeds need frame-ancestors * for the viewer host). On WordPress, use the Custom HTML block (not a paragraph), and disable “strip iframes” in security plugins if the editor saves but the front shows empty.