Embedding·7 min read·28 Apr 2026

Embedding a 3D viewer in Shopify — 4 patterns that work

Shopify product pages have a fixed layout, but four embed patterns slot in cleanly. Pick the one that matches your theme and customer behavior. All four work without a custom Shopify app — just paste an iframe.

Pattern 1 — Single iframe (replaces the main image)

Simplest. You drop one iframe into the product description and it becomes the hero. Best for brands where the 3D model is the product story.

HTML — paste in product description

<iframe
  src="https://fenicher.com/c/YOUR_TOKEN"
  width="100%" height="600"
  style="border:none;border-radius:12px;background:#f5f5f7"
  allow="xr-spatial-tracking; fullscreen"
  loading="lazy">
</iframe>

Tip

Set loading="lazy". The viewer is heavy; lazy-loading keeps your Lighthouse score up and the page first-paint fast.

Pattern 2 — Tab toggle (Photos / 3D / AR)

Add a small tab strip above your main image that swaps between the photo carousel and the 3D viewer. Highest conversion in our tests — buyers can stick with photos if they want, but the 3D option is one click away.

In your theme's product template, add a <div> with two children: existing carousel + iframe.
Toggle visibility via two buttons that flip a CSS class.
Lazy-mount the iframe so it only loads when 3D is clicked.

Pattern 3 — AR button overlay

For buyers on mobile, skip the 3D viewer entirely and go straight to AR. A small "View in your room" button below the price triggers iOS Quick Look or Android Scene Viewer.

HTML — minimal AR-only button

<a rel="ar"
   href="https://cdn.fenicher.com/.../chair.usdz"
   style="display:inline-flex;gap:8px;align-items:center;
          padding:10px 18px;border:1px solid #1d1d1f;border-radius:999px;
          font-weight:600;text-decoration:none;color:#1d1d1f">
  📱 View in your room (AR)
</a>

On Android, you'll need to detect the device and serve a scheme://arvr.google.com/scene-viewerURL pointing at the GLB. Fenicher's embed snippet handles the device split for you.

Pattern 4 — Inside the image carousel

Most theme-friendly. Make the 3D viewer one slide in your existing carousel. Customers swipe through photos like usual, then hit the 3D slide and start rotating.

Performance notes

Lazy-load always. Don't render the iframe on initial paint — your LCP will tank.
Set a fixed height. Avoid layout shifts; use aspect-ratio: 4/3 on the iframe wrapper.
Use allow="xr-spatial-tracking" so AR works inside the iframe on supported browsers.
Self-host nothing. The Fenicher CDN is on a 9-edge POP — closer to your buyers than your Shopify store.

We tested Pattern 2 (tab toggle) for two weeks. 18% lift in add-to-cart on the products with a 3D model. The 3D tab itself only got clicked 22% of the time — but those clicks converted.
— Shopify store owner, Surabaya

Security

Your 3D renders are worth more than you think — and how to keep them safe

A render file isn't a JPEG. It contains exact geometry, material specs, and months of design work. Here's what leaks when it leaks, and how to stop it.

AR in furniture retail: what actually converts (and what doesn't)

Cylindo's 2024 data shows 200% higher conversion for products with AR. But bad AR implementations convert nothing. Here's the difference.

← All insights

Pattern 1 — Single iframe (replaces the main image)

Simplest. You drop one iframe into the product description and it becomes the hero. Best for brands where the 3D model is the product story.

HTML — paste in product description

<iframe
  src="https://fenicher.com/c/YOUR_TOKEN"
  width="100%" height="600"
  style="border:none;border-radius:12px;background:#f5f5f7"
  allow="xr-spatial-tracking; fullscreen"
  loading="lazy">
</iframe>

Pattern 2 — Tab toggle (Photos / 3D / AR)

In your theme's product template, add a <div> with two children: existing carousel + iframe.

Toggle visibility via two buttons that flip a CSS class.

Lazy-mount the iframe so it only loads when 3D is clicked.

Pattern 3 — AR button overlay

For buyers on mobile, skip the 3D viewer entirely and go straight to AR. A small "View in your room" button below the price triggers iOS Quick Look or Android Scene Viewer.

HTML — minimal AR-only button

<a rel="ar"
   href="https://cdn.fenicher.com/.../chair.usdz"
   style="display:inline-flex;gap:8px;align-items:center;
          padding:10px 18px;border:1px solid #1d1d1f;border-radius:999px;
          font-weight:600;text-decoration:none;color:#1d1d1f">
  📱 View in your room (AR)
</a>

On Android, you'll need to detect the device and serve a scheme://arvr.google.com/scene-viewerURL pointing at the GLB. Fenicher's embed snippet handles the device split for you.

Performance notes

Lazy-load always. Don't render the iframe on initial paint — your LCP will tank.

Set a fixed height. Avoid layout shifts; use aspect-ratio: 4/3 on the iframe wrapper.

Use allow="xr-spatial-tracking" so AR works inside the iframe on supported browsers.

Self-host nothing. The Fenicher CDN is on a 9-edge POP — closer to your buyers than your Shopify store.

We tested Pattern 2 (tab toggle) for two weeks. 18% lift in add-to-cart on the products with a 3D model. The 3D tab itself only got clicked 22% of the time — but those clicks converted.