Shopify

Add or embed 3D, Augmented Reality (AR), and Virtual Reality (VR) content/design to your Shopify website.

Install Shopify

Step 1: Add Your Product to Shopify (Skip if Already Added)"

After setting up your store on Shopify, you will need to add your custom products. If you have your products added you can skip this part.

To add your product:

• Head over to "Products" on the left hand side of your store.

• Add in the necessary information down to price, name of products and an Image of your product

• Hit "save" when you are done.

Step 2: Open Your Shopify Plugin; The SwiftXR (3D/AR/VR) Viewer App

Head over to the "Apps" section on your Shopify dashboard. Click on your already installed SwiftXR (3D/AR/VR) app to open it

Step 3: Link your Product to a 3D View

To link your Product Click on "Link a 3D Product view". This action will make the page where you will select your product to pop up.

Then Click on "select a product."

(This will allow your 3D entry be linked to your selected product)

Step 4: Click ‘Open SwiftXR Hub’ to open your SwiftXR Account and Create Your 3D/AR/VR Project

After selecting a product, click on "open SwiftXR hub". This will take you to the SwiftXR hub where you will create your 3D/AR/VR entry.

Step 5: Create a Project

In the SwiftXR hub, Click on "Create project", give your project a name, then click on "create"

N.B (You can make use of the free templates available but its optional)

Step 6: Add a 3D Component and Upload your 3D Model

• From the component tab, click or drag and drop a AR 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 [email protected] or use our AI image to 3D converter

Step 5: Publish your Project

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

Step 6: Copy the Published Project URL

After publishing your project, copy the published project URL, then close the SwiftXR dashboard

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

Step 7: Paste your Project URL

• Paste the published project URL you copied after publishing your project into the "SwiftXR Published Project Link" input field, then click on "Save entry"

(SwiftXR helps display different 3D/AR/VR project based on the Shopify product connected)

Step 7: Add the SwiftXR App Block to your Product Page (One Time)

To ensure your SwiftXR 3D rendering displays on your Shopify product page, make sure to add the SwiftXR App Block to a section.

These simple steps allows SwiftXR to display the appropriate 3D rendering based on the Shopify product connected.

To do this;

• Click on “Add to online store”

• Navigate to the Product Page

Click on the Home page drop down menu, select "Product", then select your product.

• Add the SwiftXR (3D/AR/VR) App Block to your desired position on your Product Page

Click on your preffered position to "Add to block". Select "Apps" and then click on "SwiftXR Viewer"

• Click on "Save"

Step 8: Preview your store

Head back to your Shopify dashboard, click on "Themes" under "Online store". Click on "view your store"

Congratulations! You have successfully added 3D/AR/VR views to your shop Enjoy exploring your products in a whole new way!

Optional - Add 3D/AR/VR Views to your Homepage

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.