How to Embed a 3D Viewer on Your Website (Shopify, WordPress, Webflow)

Step-by-step guide to adding an interactive 3D viewer to your e-commerce or product site. Works on Shopify, WordPress, Webflow and any CMS with iFrame.

Displaying a product in 3D on your product page measurably increases conversion. Shopify studies show +94% conversions on product pages with interactive 3D. Here's how to embed it in minutes, without a developer.

What you need

• A 3D file of your product (GLB, STEP, FBX or OBJ)
• An OmniView 3D account (free plan is enough to start)
• Access to your CMS editor

Step 1 — Upload your 3D model

Log in to OmniView 3D and drag-and-drop your file. Conversion takes under 60 seconds. You get an interactive viewer with a ready-to-copy iFrame code.

Step 2 — Get the embed code

From the viewer, click Share then Embed code. You get an iFrame snippet: <iframe src="https://omniview3d.com/view/your-id" width="100%" height="500"></iframe>. Copy this code.

Shopify integration

1. 1Go to Online Store > Themes > Customize
2. 2Open the product page and add a Custom HTML block
3. 3Paste the iFrame code into the block
4. 4Save — the 3D viewer appears on the product page

WordPress integration

1. 1Open the Gutenberg block editor
2. 2Add a Custom HTML block (search for HTML in the block explorer)
3. 3Paste the iFrame code
4. 4Publish or update the page

Webflow integration

1. 1In Designer mode, add an Embed element from the Add panel
2. 2Paste the iFrame code into the code area
3. 3Adjust the height as needed (recommended: 500–600px)
4. 4Publish the site

Tips to maximize conversion

• Place the 3D viewer above the fold, visible without scrolling on desktop
• Use Hologram mode (dark background) for premium products
• Activate exploded view on complex assemblies
• Test on mobile — the viewer is optimized for touch