s

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.

With this plugin it is finally possible to have a real 3D product configurator in Shopify with Augmented Reality support!

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.

Shopify

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.

Shopify

Shopify

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”.

Shopify

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”.

Shopify

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”.

Shopify

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

Shopify

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.

Shopify

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.

Shopify

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.

Shopify

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”):

<a href="#" data-expivi-configure class="btn product-form__cart-submit" data-product-id="{{product.id}}" data-product-name="{{product.title}}" data-base-price="{{current_variant.price}}" disabled>Configure</a>

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

Before:

Shopify

After:

Shopify

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.

Under the Sections section, find and open the cart-template.liquid file. We’re about to modify the highlighted part of the file

Shopify

Find the line with

{% for item in cart.items %}

(on the above image 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:

Shopify

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

Shopify

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:

Shopify

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

Need a 3D configurator for your website?

Signup for a free trial!

Signup within 30 seconds, we’ll help you setup everything and you’re good to go!

No credit card required, no strings attached!

Still not sure? Just have a quick chat with our sales team, by email, phone or livechat.

Meet us at CES 2019 in Las Vegas!
Jan 8-11, 2019

We'd love to connect with you. Just drop us a line!
close-link
Click Me