How to embed a 3D jewelry viewer on your website

Why a 3D viewer helps jewelry pages

Photos and renders show a piece from the angles you chose. A 3D viewer lets the shopper choose. They can turn a ring to see the profile of the setting, look underneath a pendant at the bail or zoom in on a halo until every stone is visible. For a buyer who cannot visit your shop, that freedom is the closest thing to holding the piece.

A viewer is most useful for:

• Engagement rings and statement pieces where shoppers want to inspect the setting from every side.
• Made-to-order designs that do not exist physically yet.
• Custom work you want a client to review on your own site rather than in an email thread.
• Pieces with details that are hard to show in a few stills, such as hidden halos, gallery work or engraving inside a band.

Keep your still images too. Many shoppers decide from the hero image alone, and stills load instantly. The 3D viewer is for the shoppers who want to look closer, and they are often the ones closest to buying.

What the embedded viewer does

The embedded viewer shows one of your models in real-time 3D inside your web page. Shoppers drag to rotate, scroll or pinch to zoom and look at the piece from any angle, and they can switch the metal between yellow gold, white gold, rose gold and platinum. Because it runs in the browser, there is nothing to install for you or for them, and it works on desktop and mobile.

What you need

1. A RenderMyJewels account with the model uploaded to your library.
2. A share link for that model. Share links are available on every plan.
3. A Premium plan to copy the embed code for websites. See pricing for details.
4. Access to edit your website or store theme.

Step 1: Create a share link

Open the model in your library, choose Share 3D link and create a new link. For each link you can set the starting metal, a light, dark or white background and whether the piece turns on its own, and the embedded viewer uses the same settings. You can switch a link off at any time, and visitors stop seeing the model as soon as you do. Each share link also has its own page, which is handy for sending to clients by email or chat. Learn more on the share links and 3D viewer page.

Before you share, check the model in the studio. The viewer shows the uploaded model, so a clean file with separate, well-named stone parts gives the best result. If you are choosing a file format, GLB files are compact and load quickly in browsers.

Step 2: Copy the embed code

In Share links, find the link, open Embed code and choose Copy embed code. The code is a standard iframe that looks like this:

<iframe src="https://rendermyjewels.com/embed/YOUR-LINK-ID" title="Aurora solitaire ring in 3D" width="100%" height="520" style="border:0" allow="fullscreen" loading="lazy"></iframe>

Your copied code contains your own link instead of YOUR-LINK-ID. The title is filled in from your model name, so give the model a descriptive name or edit the title text, because screen readers announce it to visitors who cannot see the screen.

Step 3: Add it to your platform

Shopify

There are two common places to add the viewer:

• In the product description. Open the product in your Shopify admin, switch the description editor to its HTML view, paste the iframe where you want the viewer and save.
• In a theme section. In the theme editor, add a custom code or custom Liquid section to the product template and paste the iframe there. Use this when you want the viewer in the same position on many products.

Theme names and menus differ, so look for options labelled HTML, custom code or custom Liquid. If you sell many pieces, the description method gives each product its own viewer, which is usually what you want.

WooCommerce and WordPress

In the block editor, add a Custom HTML block where the viewer should appear and paste the iframe. For WooCommerce products, add it to the product description or to a product tab, depending on your theme. Preview the page before publishing, because some security plugins remove iframes from certain fields.

If you use a page builder, look for an HTML or embed widget and paste the code there.

Wix

Add an Embed element, choose the option to embed custom code or HTML, paste the iframe and resize the element to fit your layout. Check the mobile version of the page separately, because Wix lets you arrange mobile layouts on their own.

Squarespace

Add a Code block to the page or the product description and paste the iframe. Depending on your Squarespace plan, code blocks may require a specific plan level, so check your plan if the option is missing.

Other website builders

Any platform that lets you add HTML or an iframe will work. Look for options named HTML, embed, custom code or iframe.

Step 4: Size it well

A few simple sizing rules make the viewer feel native:

• Keep the width at 100% so it fits its column.
• Choose a height between about 480 and 640 pixels on desktop. Square areas suit rings, taller areas suit pendants and drop earrings.
• Check mobile: the viewer should be at least as tall as it is wide on a phone, so shoppers can rotate without scrolling the page by accident.

Step 5: Place it where it helps

Put the viewer close to your main image gallery, either as one of the first media items or directly below the gallery with a short line such as "Turn it in 3D". Do not hide it in a tab most shoppers never open.

On collection or landing pages, one viewer for a signature piece can work as an interactive centerpiece. Use it sparingly, because each viewer asks the visitor's device to render 3D graphics.

Performance tips

• Keep the loading attribute set to lazy, so the viewer loads only when the shopper scrolls near it.
• Use one viewer per page. Several viewers on one page compete for the shopper's graphics power.
• Upload a well-optimized model. Files under about 300,000 triangles load faster and rotate smoothly on phones.

Accessibility

A 3D viewer should add to your page, not replace information. Keep descriptive text and still images for visitors who cannot use the viewer, write a meaningful title in the embed code and make sure the product description includes the details a shopper would otherwise discover by rotating the piece.

Privacy and control

Your models stay private until you create a share link. Anyone with the link can view the model, so treat links like a product photo you have published. You can switch a link off whenever you like, and each link has a download setting that stays off unless you turn it on. Moving a model to the trash also stops its links from working.

Using share links without embedding

Even without a website embed, share links are useful:

• Send them to clients for custom approvals.
• Add them to wholesale line sheets or emails so buyers can explore new designs.
• Turn them into QR codes for trade fairs and printed catalogs, using any QR code generator.

Troubleshooting

Measure the effect

Treat the viewer like any other page change and measure it. Compare product pages with and without a viewer over a few weeks, looking at time on page, add-to-cart rate and the questions customers send you. The view counts on your share links show which pieces attract the most exploration, which helps you decide where a viewer earns its place and where still images are enough.

Combine the viewer with video

A viewer and a short video do different jobs. The video plays automatically and shows the piece at its best, while the viewer rewards shoppers who want to explore. Put the video early in the gallery and the viewer close by, and most shoppers will find the one that suits them.

Keep links tidy

A share link always shows the model it was created for. When you replace a design, create a link for the new model, swap the embed code on your site and switch off or delete the old link, so old versions do not linger. Switch off links for discontinued pieces too. Your share links page shows how many times each link has been viewed, which tells you which pieces customers explore most. For more ideas on product pages, read jewelry product pages that convert.