Getting started
Studio Navigation
Design process
Sharing and embedding
Model API
Shopify
Introduction
Shopify is one of the big players in the e-commerce scene. If you are ready to create an amazing showcase for your products and as well as create a great shopping experience for your clients, use this step by step guide to learn how to add an interactive and customizable 3D models from Verctary.
For this guide we will use a free
template that Shopify provides when creating a new shop called Dawn
.
This integration does require minor changes to the templates, but do not worry, the process is fast and easy.
Requirements
For integrating with Shopify
you will need the following:
- A Shopify account with an active
free trial
orpaid subscription
Setups
1.1. Create a folder for the product models
This is an important part of any integration. Use the id of the folder to fetch and map your models to the products you have/will setup in the e-shop.
You can see the id when it is selected inside the Dashbaord, directly in the URL after the string &folderId=
.
1.2. Create the model of your product/s
In this case, we created an abstract design called Awesomeness
. The name of your project needs to match the name of your product.
Here is the model you can clone directly into a new project in your workspace:
It features a Variant
with 3 different objects, and each of the variants contains the same 3 materials. Make sure to link the materials if they are the same between each variant.
We can expose these through the Floating UI
by adding a Materials
and a Variants
sub-objects.
Please note that the source
of the MSController is the Object Switcher containing the variants.
1.3. Share your model
Go ahead and share!
Please remember that:
- The name of the project matches the name of the product.
- The names of the objects and their materials match the options/variants that are setup for the product in the e-shop.
2.1. Add products
First of all we need to make sure we have at least one product. Remember that the names of the products need to match the names of the models we are creating in Vectary.
For the purposes of covering all the options that are possible in this guide, we are going to use a product with options
(that will generate variants
).
To add options to a product simply edit the chosen product, scroll down to the Options
section and start adding.
If the default Option names
do not match with what you would need, please look for a plugin/app instead of using the defaults from Shopify.
In this case, here are the options that we’ll be working with, and that mimic what we have setup in Vectary.
From these options the variants
are then generated. It is possible to manage price and inventory individually for each one.
2.2. Add the iframe
and api
script
Now, edit the theme. To do that, we will select the Themes
page under our Online Store
.
Click on the Actions
dropdown and select edit code
.
A new view will open. Search for a specific file called main-product.liquid
, which should be under the Sections
folder.
Look for the container that holds the Media
. Add it to the products, and then add our custom code.
Here’s how to find it:
- Click anywhere in the code
- Press
ctrl+f
(Windows) orcmd+f
(Mac) - Paste the text
id="Slider-Gallery-{{ section.id }}"
- Hit intro
You should be able to see (or similar) as selected.
If you don’t, that probably means your theme
is set differently. Please get in touch with us directly through our community page and we will assist you in figuring out a solution.
Paste the following code under the last line in the previous screenshot:
<!-- My Vectary integration start -->
<li class="product__media-item grid__item slider__slide is-active">
<iframe id="vectary_embed"
src="https://app.vectary.com/p/{shared_model_id}"
frameborder="0"
width="100%"
height="480">
</iframe>
</li>
<script type="module">
// Init Model API
import { VctrModelApi } from "https://app.vectary.com/studio-lite/scripts/api.js";
var modelApi = new VctrModelApi("vectary_embed");
await modelApi.setShopify("{folder_id}", "{{ product.title | escape }}");
</script>
<!-- My Vectary integration end -->
Let’s analyze exactly what we are adding to make sure everything is how it is supposed to be:
li
element that contains the iframe our embed.- We added the same
class
names that are used for any other media that is used in our current theme. iframe
element that contains any of your shared projects in the folder we created.- You need to change the
{shared_model_id}
in thesrc
attribute for a valid id. - Replace the iframe code directly from the
Copy embed
button in Vectaryshare popup
. script
tag which in turn:- Imports our
VctrModelApi
. - Creates a new instance of the API, linking to the
iframe
embed we just added using its DOMid
(e.g.vectary_emebed
). - Sets the integration with
{folder_id}
from step #1.1
Don’t forget to Save
!
One more thing to consider, in case you just want to use the Vectary embed to showcase your product and/or you will not add any other pictures. Please note that some themes can change the layout of the product page when they detect that there is no media attached.
To avoid that do the following:
- Click anywhere in the code
- Press
ctrl+f
(Windows) orcmd+f
(Mac) - Paste
if product.media.size > 0
in theFind
field - Paste
if product.media.size >= 0
in theReplace
field - Click on the
replace all
button andSave
If your product names match the model names, and if the product options also match the names of the materials and objects used, you should be able to see how they influence each other in the product page:

It also works by default with a different Variant picker
type.
You can select another type when you Customize
your theme in the Default product
page.
On this page