Blog5 min read
How do you add a 3D virtual showroom to a Shopify store?
To add a 3D virtual showroom to your Shopify store, your store’s plan or a description of it and the 3D files of your products are enough. Viniona connects the 3D store to your Shopify store through the official Shopify integration: visitors add products to the cart from inside the 3D store and complete payment on Shopify. This integration is in use in the Blackbörk virtual store.
VinionaPublished:
In short
- Three things are needed: your Shopify store, the store’s plan or a description of it, and your products’ 3D files (for example .glb).
- Visitors add products to the cart from inside the 3D store; the cart is created on Shopify and payment is completed on Shopify’s checkout page.
- Products and payment stay on Shopify; the 3D store adds a walkable storefront on top. This integration is in use in the Blackbörk virtual store.
In this article
Your Shopify store is running; products, stock and checkout are in order. Now you want to show customers your products inside a space, but you have a question: will a separate system be set up, and what happens to the cart and checkout?
The short answer: you don’t have to move anything. The 3D store connects to your Shopify store; shopping still happens on Shopify. Below we explain, step by step, what’s needed and how it works in the Blackbörk virtual store.
What do you need?
Three things are enough to start:
- Your Shopify store: shopping in the 3D store connects to it.
- A store plan or description: if you have an architectural plan we work from it; if not, you describe it or leave the design to us.
- 3D files of the products: for example in .glb format; we place each product in its right spot in the store.
How does it work in the Blackbörk virtual store?
Viniona’s Shopify integration is in use in the Blackbörk virtual store. From the visitor’s point of view, the process goes like this:
- Add to cartFrom inside the 3D store
- Shopify cartStorefront API
- Cart panelUpdate, remove
- CheckoutShopify, new tab
Adding to the cart
Visitors add the product to the cart from inside the 3D store. The cart is created in Blackbörk’s Shopify store through Shopify’s Storefront API.
Managing the cart
The cart appears in the cart panel inside the 3D store; products can be updated or removed there.
Checkout
When the checkout button is pressed, Shopify’s checkout page opens in a new tab; payment is completed on Shopify.
Personalised design
A design the visitor creates in Blackbörk’s design studio is also added to the cart; the design image is stored for use in the order process.
Products and payment stay on Shopify; the 3D store adds a walkable storefront on top.
How does it go, step by step?
Your store is conceived together, built in 3D, the products go into place, it is connected to Shopify, tested and launched:
- Concept: if you have an architectural plan we work from it. If not, you describe what your store should be like and we design it.
- 3D store: the plan or description becomes a 3D store you can walk through.
- Products: we take your products’ 3D files and place each one in its right spot in the store.
- Shopify: through the official Shopify integration, shopping in your 3D store runs in exact sync with your Shopify store.
- Test and launch: the system is tested; then your store is launched, reachable from anywhere in the world.
How do a Shopify product page and a 3D showroom complement each other?
A Shopify product page presents the product and sells it. A 3D showroom shows the product in a store setting; the cart and checkout still go through your Shopify store.
| Shopify product page | 3D virtual showroom | |
|---|---|---|
| Getting to know the product | Photos, description, options | Seeing the product in its place in the store, at true scale |
| Discovery | Search and categories | Coming across it while walking the store |
| Cart | Shopify cart | Cart panel inside the 3D store; the cart is created on Shopify |
| Checkout | Shopify checkout page | Shopify checkout page (opens in a new tab) |
How do customers reach the 3D store?
The 3D store opens from a single link. It runs in the web browser and opens on desktop, phone and tablet. Customers don’t need to download an app or create an account.
Walk through the Blackbörk virtual store
Blackbörk virtual store
In the virtual store we built for Blackbörk, visitors can walk around, shop and take part in a range of interactions. The store opens from a single link with no app, plug-in or installation.
Your next step
Choose the products in your Shopify store you want to feature in the 3D store and check whether 3D files exist for them. That list is the first item on the planning agenda.
All the details of the solution are on our 3D virtual store page. For a quote for your project, just answer the four questions in the Quote Wizard.
