Integrate a 3D viewer and augmented reality on Shopify
No commitment, no credit card required.
Why add 3D to your Shopify store?
Shopify is today one of the most popular e-commerce platforms in the world, with over 4 million active stores. In this ultra-competitive environment, 3D visualization and augmented reality are becoming essential differentiating factors.
The numbers speak for themselves: product pages integrating 3D visualization show a conversion rate up to 94% higher than those without. Time spent on the product page increases by 200%, and the return rate decreases by 40%. For a Shopify merchant, these results translate directly into additional revenue and reduced costs.
3D and augmented reality offer your customers a modern and immersive shopping experience. They can view the product from all angles using the interactive 3D viewer, and project it into their real environment via augmented reality.
Prerequisites
Before starting the integration, make sure you have the following:
- A Visuality account: Sign up for free at visuality.fr to access the 3D and AR management platform. A free trial is available.
- A 3D model of your product: In GLB or GLTF format. If you don't have a 3D model, don't worry: Visuality offers an AI 3D generation tool, directly accessible from your dashboard.
- An active Shopify store: You must have administrator access to your Shopify store to add the integration code on your product pages.
Step 1: Create your Visuality account
Go to visuality.fr and create your account in seconds. Registration is quick and requires no credit card to get started.
Visuality offers different subscriptions adapted to your needs, from freelancer to professional with hundreds of models. Each subscription includes a number of models, an AI generation quota and access to all features.
Step 2: Import your 3D model
From your Visuality dashboard, click "Add a 3D object" and import your file in GLB or GLTF format. The platform automatically handles hosting and model optimization.
If you don't yet have a 3D model, Visuality includes an AI 3D generation tool. Simply import a photo of your product and the AI takes care of creating the 3D model.
Once the model is imported, you can customize it directly from the built-in editor: adjust scale, materials, lighting and add interactive hotspots.
Step 3: Integrate on Shopify
Integration on Shopify takes just a few minutes using the iframe code provided by Visuality. Here is the procedure:
- Get the integration code: On Visuality, go to your 3D object's sharing page. Copy the automatically generated iframe code.
- Add the code to your Shopify product page: In the Shopify admin, open the relevant product page. In the product description, switch to HTML mode and paste the iframe code at the desired location.
- Adjust dimensions: You can modify the width and height of the iframe to fit your Shopify theme layout. A responsive format is recommended with width="100%" to adapt to all screens.
You can also use the dedicated Shopify module for even smoother integration. Consult our complete documentation on e-commerce integrations.
Find the complete technical guide in our e-commerce integrations documentation.
Step 4: Test and optimize
Once integration is complete, it is essential to test the rendering on different devices and browsers to ensure an optimal experience for your customers:
- Mobile testing: Verify that the 3D viewer displays correctly on smartphone and tablet. Test the AR button that projects the product in augmented reality.
- Desktop testing: Ensure the viewer is responsive and integrates smoothly into your Shopify theme. Desktop customers can explore the product in 3D by rotating and zooming.
- Scale verification: Test the AR projection to confirm your product displays at the right size in the real environment.
- Performance measurement: After deployment, track the evolution of your conversion rate, time spent on product pages and return rate.
Integrating a 3D viewer on Shopify with Visuality is a simple process that requires no advanced technical skills. In minutes, your product pages are enhanced with an interactive 3D experience and augmented reality.