The only 3D Product Configurator for Shopify you'll find!

Easy installation, easy setup, deeply integrated with Shopify

Expivi is a complete 3D ecommerce platform, but we understand that sometimes you don’t want to switch platforms. With the Expivi plugin for Shopify, you could still use Expivi 3D product configurator without switching from Shopify.

The Expivi Shopify plugin makes it possible to integrate Expivi with your Shopify store. The plugin replaces the standard image viewer from Shopify and options selector. When the product has been fully customised, the final product can be added to the Shopify cart and the order processing will be handled by Shopify itself.

2. Create the API-key

Go to the backend of Expivi (https://admin.expivi.net/) and go to Team > API Keys. Create a new API key by clicking the “Create” button in the top right corner. A small popup box will appear. Give it a descriptive name for the API key and set the permissions on “Read” and click on “Create”.

You’ll see a new popup window with the access token. Copy the access token in a text file. Warning: the access token will only be shown once and cannot be retrieved again. You’ll have to create a new access token if you need one.

Go back to your Shopify backend and go to the Expivi plugins settings (Apps > Expivi). Under General settings paste your API key in the API key field and make sure that API URL is https://expivi.net/api and hit “Save”.

You’ve now integrated Expivi with your Shopify store.

3. Connect products in Shopify with products in Expivi

To connect your products in Shopify with the products on the Expivi platform, go to the Expivi settings in Shopify (Apps > Expivi). All products in your Shopify store are listed under the Products section.

Next to each product, you’ll find a drop down menu with all the products on the Expivi platform. Select the corresponding product for each product and click “Save”.

After saving, the Configure button will appear next to each product.

Clicking on the Configure button will take you to 3D product viewer configuration. When you’ve finished configuring the product you could click Save to save the configuration and this will be the standard configuration that will be shown every time a customer visits the product page.

If you click on the “Save image” button the configuration shown in the viewer will be saved as an image for your product page. This will be automatically added as a product image gallery on the product page.

Repeat this step for every product you have.

4. Add custom code to Shopify template

Integrating Expivi with your Shopify shop requires some modifications to the theme files of the theme you’re using for your Shopify store. Please ask a developer to do this for you, if you have no knowledge to do this yourself.

Be aware that each theme has its own unique code, so the instructions below should be used as an example.

Go to Online Store > Themes and select Edit code in the Actions drop down menu. You’ll be taken to the template files editor.

Replacing “Add to cart” button with “Configure” button on the product page

First of all, we’re going to replace the original “Add to cart” button with the Expivi “Configure” button on the product page.

Under the Sections section, find and open the product-template.liquid file. Search for the part where the “Add to cart” button is located (tip: Ctrl+F and search for “submit”) and replace the “Add to cart” button code with the following line of code (after the DIV tag with CSS class name “product-form__item–submit”):