Webflow
Last updated
Last updated
If you’ve decided to create an e-shop in Webflow, and are ready to showcase your products in 3D and AR using Vectary configurators, here’s a step-by-step guide on how to get started.
We'd like to point out that in this guide, we're using the list of products and other aspects of Webflow's E-commerce 'Store Starter' presets.
If you want to experiment with it, you can find it when you create a new site in a 'workspace'.
For integrating with Webflow E-commerce
you will need the following:
A workspace or team Webflow subscription:
Without a subscription it is not possible to add embeds into any page.
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 Dashboard, directly in the URL after the string &folderId=
.
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: https://www.vectary.com/p/5s8oStuOPjH9E2xrRVje3q
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.
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.
First, make sure there is at least, one product on the E-commerce
menu.
For the purpose of covering all the possible options in this guide, we are going to use a product with variants
.
If you are not clear on how to add variants to a product, please visit Webflow’s amazing tutorial that will guide you through the required steps.
Here’s a CSV file you can import for testing:
Here is the product that we’ll be working with that mimics what we have setup in Vectary.
Next, go to Pages
, then the products page, in the E-commerce pages
section.
In this case we used Webflow’s own Products Template
.
Next up, go to Navigator and select your Product Image.
Add the embed right inside.
The HTML Code Embed Editor will pop up. Directly paste the iframe code of any of your shared projects in the folder created. Remember to copy the code directly from the Copy embed button in Vectary’s share popup.
Once the embed is copied, it is very important to give it an id. We recommend setting both the with
and height
in the code to 100%
.
For example, we gave it the id vectary_embed
:
Do not worry if the model you added does not match the current selected product in the editor. As we mentioned before, we were setting up Awesomeness but currently we have another product selected.
For loading the correct model, the integration needs to know which element in your shop holds the name of the product.
In this case, it is in the Heading 1 of the Product content wrapper.
It has the id product_name
. Make sure to get the text from the product’s name.
The last step is to go to the Projects settings and into the Custom Code section. Add the following script to the Footer Code.
Import our VctrModelApi
Create a new instance of the API, linking to the embed we created before, with the iframe id
we set in step **#2.2 (**e.g. vectary_embed
).
That’s it! By following these steps it is possible to set up an interactive 3D product configurator in no time.
Set the integration with our {folder_id}
from step #1.1 and the product name element id
from step #2.3 (e.g. product_name
). Before proceeding please check the following:
a. If you are using the default Add to cart element you are good to go.
b. If you are using your own custom layout to display how the users select your product variants, there is the option to add a 3rd parameter to the setWebflowEcommerce function, where you can enter a CSS selector of a parent element from those options, so the integration can find them.