How to add a 3D ring viewer to a Shopify product page

What do you need first?

A paid plan and the ring saved as a project. Embeds start on the Starter plan; the Free plan cannot publish one. Upload or build the ring in the studio, then save it.

How do you add the viewer, step by step?

1. Publish the viewer. In Dashboard → Embeds, publish the saved design as an interactive viewer, or use Embed on your site in the studio's Share panel.
2. List your domains. The viewer is locked to the domains you list, so add your store's address under Allowed domains in the embed's settings in Dashboard → Embeds.
3. Paste the snippet. Paste the iframe snippet into the product's description, in the editor's HTML view, or into a code block in your theme's product template.
4. Check the live page. If the frame stays empty, check the domain list.

How do you keep the page scrollable on a phone?

Turn on Page scroll in the embed's settings, since by default the viewer takes every gesture over the ring. A vertical swipe on a phone then scrolls the page and a sideways drag turns the ring.

When is a ring builder the better fit?

When a ring sells in several metals or shapes. A ring builder embed lets shoppers choose options, see a live SKU and price, and add the ring to the cart. On Shopify it can also go in as the Ring Builder 3D theme section. See the embeds guide.

What does the Shopify app add?

Order attribution. From the Growth plan, Connect Shopify in Dashboard → Embeds links your store by OAuth, and signed order webhooks bring orders back, so the sales your ring builders drove show up as attributed revenue. Once connected, Dashboard → Shopify can also photograph your catalogue; the Shopify guide covers both.

For try-on, see AR ring try-on on Shopify; for the full setup, 3D jewellery on Shopify.