Shopify
Add 3D, Augmented Reality (AR), and Virtual Reality (VR) content to your Shopify Website.
Last updated
Was this helpful?
Add 3D, Augmented Reality (AR), and Virtual Reality (VR) content to your Shopify Website.
Last updated
Was this helpful?
To add the 3D/AR/VR view to your product page. Go to Theme Editor:
Click on "Online Store", under "Themes" click on "Customize", this takes you to the Theme Editor.
Under "Add Section", select "Apps" and then click on "SwiftXR Viewer"
Drag the app block to your desired position.
We suggest placing it at the top of the product page for visibility. The viewer will be automatically hidden if there is no corresponding swiftxr link for the product.
Important: SwiftXR does not change the look of your website. You can add the SwiftXR Viewer to different parts of your page by opening the widget settings and turning on the optional link feature.
To create a SwiftXR project and publish your 3D Model, visit the SwiftXR Hub. SwiftXR accepts multiple file formats such as fbx, obj, stl, gltf, and images.
(Optional) You can also use templates for quick starts
From the component tab, click or drag and drop a 3D viewer component to add it to the white canvas. Select the "Properties" tab to upload a 3D model, import from a 3D store or Request a 3D model from support@swiftxr.io.
(Optional) To make sure that only your 3D model is visible, make sure to remove any other components on the SwiftXR Canvas.
To publish your project, click the "Publish" button located at the top right corner of the SwiftXR Editor and then select "Publish Project".
(Optional) You can customise the project URL before you publish.
After publishing your project, copy the published project URL and click the "Link 3D Product Entry" button at the top right.
Important: Make sure that your project URL has the "swiftxr.app" domain, otherwise our servers will mark it as invalid. You can also view and share the project using the published project URL
Paste the published project URL you copied after publishing your project into the "SwiftXR Published Project Link" input field. Click the "Select Product" button and choose the Shopify Product where you want the 3D project to be displayed on the page.
SwiftXR helps display different 3D/AR/VR project based on the Shopify product connected
SwiftXR automatically switches between different views depending on the product and shows the correct link as specified in the product dashboard.
Note: Keep adding your 3D models to your store to make it more interactive.
SwiftXR's Website Mode lets you seamlessly embed 3D/AR/VR experiences on any page of your Shopify store.
Tip: Adding 3D/AR/VR content across your Shopify Store can help increase customer browsing time and number of items viewed.
