Show 3D jewelry models on Shopify product pages

How it works

1. Upload and set up a model. Upload a 3DM, OBJ or GLB file to My Jewel Shots, then set its metals, stones, finish and background in the editor.
2. Choose products. Pick the Shopify products to work with, and choose a model for each one, by hand or by matching SKUs.
3. Publish. Ring Facet adds one interactive 3D model item to each product's media in Shopify. Your product images and videos stay as they are.
4. Show it. The Jewel Shots viewer takes the 3D item's place in your product gallery, sits in a theme block, or appears wherever you paste the embed code. Shoppers turn the ring and switch between the metals and stones you offer.

The viewer reads the model's settings each time a product page loads. A colour, finish or background change you save in the editor shows on your product pages without publishing again.

Before you start

• The Ring Facet app is installed on your Shopify store, and the store is connected to your workspace. Check under Account → Store & domain. The Shopify product 3D panel in My Jewel Shots only appears once a connected store is found.
• At least one model is uploaded to My Jewel Shots.
• Your plan has room. Each product with a published model counts as one live embed, alongside your embed codes. See Plans and limits.

Set up each model

Open a model from My Jewel Shots in the editor. Everything below is saved with the model, and every place it is shown uses the same settings: embed codes, your Shopify product gallery and the 3D viewer block.

Metals and stones shoppers can switch between

1. Next to Metal or Stone, click Edit colours.
2. Add up to 4 metals and 4 stones. A metal starts from Yellow, Rose or White, adjusted with Whiteness and Darkness, or is any colour you pick. A stone comes from 16 presets, such as White Diamond, Fancy Pink or Sapphire Blue, or any colour.
3. Name each colour. The name is what a shopper sees when they hover over its swatch.
4. In the Metal and Stone rows, select the colour the viewer should open in.

With two or more colours of a kind, shoppers get a switch for it. With only one, no switch is shown, which suits a model you sell in one metal.

Background

Choose White, Transparent (your page shows through behind the ring) or any colour. Transparent works well in a product gallery, where the theme's own background then shows.

Finish, parts and pieces

• Finish: slide from Polished through Brushed to Matte.
• Parts: each part is detected as metal or stone; correct any that are wrong, or hide one. A Customizable part follows the shopper's switches. A Fixed part keeps its own colour, which is how two-tone metal and mixed stones are set up.
• Select pieces to remove: click stray pieces such as reference planes or sizers to drop them. This can be undone.

Click Save. The next time a product page with this model loads, it shows the change.

Build your product list

In My Jewel Shots, the Shopify product 3D panel lists the products you have picked, plus every product that already has a published model. It never loads your whole catalogue, so a store with thousands of products opens just as fast.

Select products

1. Click Select products.
2. Search by title or SKU. The last word you type matches the start of a word, so halo finds “Halo Solitaire” and SKU HALO-100. Results come 50 at a time; use Load more for more.
3. Tick the products you want and click Add to list. Products already in your list show as ticked.

Your list is saved with your workspace. To drop a product you have not published, click the × on its row.

Auto-match by SKU

Auto-match SKUs reads your store once, when you click it, and adds every product whose handle or a variant SKU matches a model's file name, with that model already chosen. Letter case, punctuation and the .glb extension are ignored. The match uses the file name you uploaded, not a name you gave the model afterwards in My Jewel Shots.

If your SKUs carry a metal suffix such as -YG, rename the model files to match, or pick those products with Select products.

In the Shopify admin

The Ring Facet app in your Shopify admin has a Jewel Shots page with the same matching and publishing. It lists your store's products with a search box. Any match you make there also appears on ringfacet.com, and the reverse.

Publish to Shopify

1. Choose a model for each product in its dropdown. The row's status changes to Ready.
2. Click Publish matched. Products are published one at a time, each with its own status as it goes.
3. A new 3D model shows Processing while Shopify prepares it, which usually takes about a minute.

What Shopify receives: one 3D model item in the product's media, with alt text starting Jewel Shots interactive 3D. Publishing again replaces that item, so a product never carries more than one. Your images and videos are not touched.

• Change a product's model: choose another model, then click Publish matched.
• Take the 3D off a product: choose No Jewel Shots model, then click Publish matched.
• Updated the model file? Its rows show Ready again. Click Publish matched so Shopify's copy is replaced too.
• Deleting a model in My Jewel Shots also takes it off every product it was published to.

Show the viewer on product pages

There are three ways, and they work independently. Use one or combine them.

1. Product gallery

1. In the Shopify product 3D panel, click Turn on in the gallery. In the Ring Facet app, the button is Turn on in the product gallery. Either opens your theme editor with Jewel Shots gallery already switched on.
2. Click Save in the theme editor.

To do it by hand: Online Store → Themes → Customize → App embeds, switch on Jewel Shots gallery, then click Save.

On product pages, the embed finds the product's Jewel Shots 3D item in your gallery. Once the Jewel Shots viewer has loaded, it swaps in at exactly the same size. If the viewer cannot load, your theme's 3D item stays, so shoppers never see an empty slot. With the embed off, the gallery shows Shopify's own 3D viewer, which has no metal and stone switches.

2. 3D viewer block

1. Click Add a 3D viewer block in the panel, or Add a 3D viewer to the product page in the Ring Facet app. Your theme editor opens with the block added to the product section.
2. Drag it where you want it, then click Save.

To do it by hand: Customize → open a product template → Add block → Apps → Jewel Shots 3D viewer.

The block has two settings. Shape can be Square, Portrait (4:5), Landscape (4:3) or Wide (16:9), and Corner radius runs from 0 to 24 px. On products without a published model it shows nothing; in the theme editor, a placeholder marks where it sits.

3. Custom Liquid embed code

This works in any theme that offers a Custom Liquid section or block. You can also use it for a placement the 3D viewer block cannot reach.

1. In the panel, click Copy embed code.
2. Theme editor → product template → Add section (or Add block) → Custom Liquid.
3. Paste the code and click Save.

The copied code looks like this. One copy serves every product, because Shopify fills in {{ product.id }} for each page:

{%- for media in product.media -%}{%- if media.media_type == 'model' and media.alt contains 'Jewel Shots interactive 3D' -%}
<div data-jewel-3d style="position:relative;width:100%;aspect-ratio:1/1">
  <iframe src="https://ringfacet.com/embed.html?shop={{ shop.permanent_domain }}&product={{ product.id }}&autoplay=1" title="Interactive 3D product view" loading="lazy" allow="fullscreen" style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>
<script>addEventListener('message',function(e){var d=e.data||{};if(e.origin!=='https://ringfacet.com'||d.type!=='ringfacet:jewel-viewer'||d.status!=='error')return;document.querySelectorAll('[data-jewel-3d] iframe').forEach(function(f){if(f.contentWindow===e.source)f.parentNode.style.display='none';});});</script>
{%- break -%}{%- endif -%}{%- endfor -%}

It only renders on products with a Jewel Shots 3D item, and the short script hides it if the viewer reports an error. To change the shape, edit aspect-ratio:1/1. For example, 4/5 is portrait and 16/9 is wide.

Test it

These checks take a minute each. Run them in order the first time. Replace YOUR-STORE, HANDLE and PRODUCT_ID with your own values.

https://YOUR-STORE.myshopify.com/products/HANDLE.js

https://ringfacet.com/api/jewel-product?shop=YOUR-STORE.myshopify.com&product=PRODUCT_ID&site=YOUR-STORE.myshopify.com

<div style="max-width:480px;aspect-ratio:1/1">
  <iframe src="https://ringfacet.com/embed.html?shop={{ shop.permanent_domain }}&product=PRODUCT_ID&autoplay=1"
          title="3D viewer test" style="width:100%;height:100%;border:0"></iframe>
</div>

[...document.querySelectorAll('[data-ring-facet-jewel]')].map(el => el.dataset.ringFacetJewel)

addEventListener('message', e => {
  if (e.origin === 'https://ringfacet.com' && e.data?.type === 'ringfacet:jewel-viewer') {
    console.log('Jewel Shots viewer:', e.data.status);
  }
});

Where the viewer runs

A product viewer only loads on your own sites:

• your workspace's website domain, set under Account → Store & domain;
• your Shopify store's own domain and its myshopify.com address;
• subdomains of those, such as www.;
• your workspace's test domain, for 14 days. Set it under Account → Store & domain → Test domain. For Shopify theme preview links, enter shopifypreview.com.

Anywhere else, the viewer shows “This product viewer is unavailable.”, and the gallery keeps your theme's own 3D item. Product viewers on Shopify never show a Ring Facet mark, on any plan.

Plans and limits

• Each product with a published model counts as one live embed. Replacing a product's model does not use another.
• Up to 4 metals and 4 stones per model.
• Models larger than 100 MB cannot be published to Shopify.

See Jewel Shots pricing.

Troubleshooting

3D product viewer for Shopify · From CAD file to 3D viewer · Jewel Shots overview