Shopify 3D Product Viewer

vitrine provides a Shopify app with a theme extension that drops interactive 3D viewers onto your product pages. Set a Showcase ID per product, and the viewer replaces or sits alongside the default product media — no code changes to your theme.

Get started

1. Install the vitrine app from the Shopify App Store
2. In the Shopify theme editor, enable the vitrine 3D Viewer extension
3. Set a Showcase ID per product (see below)

Don't have a Showcase ID yet? Go to app.vitrine3d.com, upload a GLB model, style the scene, and publish it. The ID appears in the embed panel.

Setting the Showcase ID per product

Each product that should display a 3D viewer needs a Showcase ID stored in a product metafield. There are two ways to set it:

From the product admin

1. Open a product in your Shopify admin
2. Find the 3D Model Settings block in the product details
3. Paste the Showcase ID and save

The app stores the ID as a product metafield automatically.

From the metafields section

You can also set the value directly in the product's Metafields section — look for the Showcase ID field under the vitrine app namespace.

Two ways to display the viewer

The theme extension offers two modes. Pick the one that fits your store layout.

Media replacement (app embed)

Replaces the native product media gallery with the 3D viewer. Enable the vitrine 3D Viewer app embed in your theme settings. It reads the Showcase ID from the product metafield and swaps the entire media section.

Works out of the box with Dawn, Horizon, Debut, and most popular themes. If your theme uses a non-standard media container, set a custom CSS selector in the embed settings.

You can also set a Default Showcase ID as a fallback for products that don't have a per-product metafield.

Section block

Add the vitrine 3D Viewer block to any section in the theme editor. This mode places the viewer alongside your existing content rather than replacing media.

In the block settings, you can either paste a Showcase ID directly or use Connect dynamic source to pull it from the product metafield. This way, the same block shows a different model on each product page.

Theme compatibility

The extension works with any Online Store 2.0 theme that supports app blocks and embeds. It loads the same vitrine.js embed script used by standalone embeds — no iframes, no theme code changes.

Auto-detected media containers:

• .product__media-wrapper (Dawn and most themes)
• .product-information__media (Horizon)
• .product__media, .product-single__media-wrapper (Debut / older themes)
• .product-gallery, [data-product-media-container]

Variant switching

If your product has color or material variants with different 3D models, use the JavaScript API to swap the viewer when the customer picks a variant:

document.querySelectorAll('[name="id"]').forEach(el => {
  el.addEventListener('change', () => {
    const viewer = document.querySelector('[data-vitrine]');
    const showcaseId = getShowcaseIdForVariant(el.value);
    if (viewer && showcaseId) {
      viewer.dataset.vitrineId = showcaseId;
      Vitrine.boot(viewer);
    }
  });
});

Requirements

• Shopify store on any paid plan
• A vitrine account (free tier works for up to 5 published showcases)
• 3D models in GLB format, uploaded and published via app.vitrine3d.com

Next steps

• Getting Started — upload your first model
• Embed Reference — all attributes and the JavaScript API
• Looks & Layouts — reuse styles across multiple products