Expivi Shopify Integration

  1. Home
  2. Integration
  3. Expivi Shopify Integration

Expivi Shopify Integration

How to integrate the Expivi 3D configurator with Shopify

Installing and integrating Expivi in your Shopify shop can be done in 4 steps. We assume that you’ve already setup your Shopify store and products.

1. Install the Expivi plugin for Shopify

The Expivi Shopify plugin is not yet available in the Shopify App Store. To install the plugin, go to https://www.expivi.com/installshopify and fill in your Shopify store domain name and hit Submit.

You’ll be redirected to your Shopify account to install the unlisted app. Click on Install unlisted app and you’ve added the Expivi plugin to your Shopify account.

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

If you haven’t created your products in your Shopify webshop yet, do that first. The most important part in creating the products is to set the correct “Product type” so that the system can detect if it’s a normal Shopify product (e.g. “Sneaker”) or a Shopify product with Expivi’s 3D configuration (e.g. “Customizable Sneaker”). Note: the “Product type” will be used as the shop categories too.

If you already have existing products in your shop, make sure you’ve set a product type for these as well.

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 to 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. If you have no knowledge to do this yourself, please ask a developer to do this for you.

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. This piece of code will look if the product is a normal Shopify product or a Shopify product with Expivi’s 3D configuration (based on product type) and then replaces the “Add to cart” button with a “Configure” button.

The code looks like this:

{% if product.type != "Customizable Sneaker"%}
<!-- PUT THE ORIGINAL ADD TO CART FORM/BUTTON IN HERE -->
{% else %}
<a href="/apps/configurator?catalogue={{product.id}}" class="button">Configure</a> 
{% endif %}

Note: “Customizable Sneaker” is being used here as an example. Replace this with the correct product type you’ve created earlier.

Note 2: To have the “Configure” button look to same as the original “Add to cart” button, use the same CSS classes and selectors or copy the CSS code from the original button and apply it to the new “Configure” button.

Locate the file where the original “Add to cart” form or button is located and add this code to this file.

Don’t forget to click “Save” to save the modifications.

Note: the images below are examples, it may differ from your theme files.

Before:

After:

Adding product configuration information to the shopping cart

Next step we’ll be adding some extra product configuration information next to the product thumbnail in the shopping cart. Note: location and names of the template files may differ in your own template.

Under the Sections section, find and open the cart-template.liquid file.

Find the line with

{% for item in cart.items %}

(on the image below it’s on line 17) and copy and paste the following code right below this line:

{%- assign property_size = item.properties | size -%}
{%- assign configuration_image = 0 -%}

The code will look like this:

Now we’re going to replace the original thumbnail code with new thumbnail code with some extra information. Locate the following line of code:

And replace it with the following code:

{% if property_size > 0 %}
{% for p in item.properties %}
            {% if p.first == 'Configuration SKU' %}
                 {%- assign configuration_image = p.last -%}
                 {% endif %}
           {% endfor %}
{% endif %}
{% if configuration_image != 0 %}
<img class="cart__image" src="https://shopify.3xpivi.com/card_image/{{configuration_image}}" alt="{{ item.title | escape }}" data-item-url="https://shopify.3xpivi.com/card_image/{{ configuration_image }}">
{% else %}
<img class="cart__image" src="{{ item | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}" data-item-url="{{ item.url }}">
{% endif %}

The code will look like this:

Don’t forget to click “Save” and you’ve integrated Expivi with your Shopify store!