1. Home
  2. Docs
  3. Integratie
  4. Expivi Lightspeed Integratie

Expivi Lightspeed Integratie

How to integrate the Expivi 3D configurator with Lightspeed

Quick jump: Appendix

Installing and integrating Expivi in your Lightspeed can be done in 3 easy steps. Make sure that you’ve already setup your products in Expivi and Lightspeed, so that you can connect the products with each other.

1. Install the Expivi app for Lightspeed

Head over to the Lightspeed app store and search for Expivi. Install the Expivi app like any other Lightspeed app.

You’ll see the screen below

Login by using your Lightspeed login credentials and click on the “Grant access” button. On the next screen, you need to login with your Expivi login credentials.

If successful, you’ll see the next screen and you’ve installed the Expivi plugin in your Lightspeed shop!

2. Connecting the Expivi products with your Lightspeed products

To connect the 3D products on the Expivi platform with the products on the Lightspeed platform, we need to associate the same products on both platforms with each other.

Go to the Expivi backend (log in at https://admin.expivi.net/) and go to Team > Integrations. If the Lightspeed app has been installed successfully, you’ll see the Lightspeed integration section here.

Make sure the integration is set to “Active”.

Click on the “Manage” button and a complete list of all your products that are in the Lightspeed catalogue will be displayed.

We now have to link each Lightspeed product with the Expivi product, to integrate the 3D product configurator with the Lightspeed product. In order to do this, hit the “Associate” button and select the corresponding product. Repeat this process for each product.

Once a Lightspeed product has been associated with an Expivi 3D product, the Lightspeed product page will have “Configure” button, where customers can view your product in 3D and customize it.

3. Edit the settings

In the Expivi backend, go to Team > Integrations > click on the “Manage” button of the Lightspeed section > select the Settings tab

Product form selector and Action button selector

In order to add a “Configure” button to the Lightspeed product pages, we need to replace the standard “Add to cart” button with a “Configure” button. This is done by using a DOM selector (read more about selectors), the CSS class or CSS ID you’re using for the button and the product form.

Finding the selector of the product form and “Add to cart” button
In order to find the “Product form selector” and “Action button selector” value, you may need to use the Developer Console of the browser.

Go to the Lightspeed product page and right click on the “Add to cart” button and select “Inspect” (wording may vary in different browsers) and a DevTools window will appear (name may vary in different browsers).

Locate the anchor link tag (A) of the “Add to cart” button and find the selector name (yellow marked). In this example the “Action button selector” value will be


Note: When this field is left empty, the “Configure” button will not replace the standard “Add to cart” button, but it’ll be added underneath the “Add to cart” button. This might be confusing, so it’s better to replace the “Add to cart” button.

The selector name for the product form can be found the same way. Locate the <form> tag and look for the selector name (class or id) and put the exact name field for the “Product form selector”.

Action button text

By default the text for the “Configure” button that’s linked to the 3D configurator is “Configure”. You may change this button text here.

Enabling inventory tracking

Every 3D configured product that is being added to the Lightspeed shopping cart, will create a new product (a duplicate) in your catalogue with the same configuration until it’s ordered or removed from the shopping cart (read more about this in the appendix). Due to this action, stock levels of your product may get out of sync.

Each newly created replica, will get the same stock amount of the original product. When a customer orders a customized product (the replica), the stock level of the original product won’t be adjusted. On the other hand, the stock level of the replica won’t be adjusted if the original product is ordered.

Step 1
To resolve this issue, you need to Enable inventory tracking so that the stock levels are managed on the Expivi platform instead of the Lightspeed platform. The original product and all duplicates of that product will communicate with the Expivi platform to see what the stock level is.

Step 2
After enabling inventory tracking we need to create a so called “Location” to be able to enter the amount of stock for each individual product

Go to the backend of Expivi and navigate to Site > Inventory

Click on the “Add” button (top right corner) and add a new location called “LightSpeed”.

Navigate to the specific Expivi product you want to use “inventory tracking” for. Open the specific product (go to Catalogue) and navigate to Basics > Inventory tab.

Click on the green “Add location” button and the “Assign location” popup will appear. Select the “LightSpeed” location and click on the “Assign” button to assign the location to the specific product. Now you can enter the stock level for this product.

Assign the “LightSpeed” location to each product you want to manage the stock level for.

Note: Enabling automatic inventory tracking in Lightspeed shops with high amount of customers may result in incorrect stock levels. The stock level is communicated with Expivi during the purchasing process. If in the rare event of two or more products being purchased at the exact same time, the stock level would reach zero while the multiple products are being communicated with Expivi. The product might be ordered while getting an “Out of stock” notification during the purchasing process.

Show “View original product” button

Every configured 3D product that is being added to the Lightspeed shopping cart, will create a new product (a duplicate) in your catalogue with the same configuration, until it’s ordered or being removed from the shopping cart (read more about this in the appendix).

Enabling the “Show ‘View original product’ button” will add a “View original product” button on the duplicate product page. Clicking on this button will send the customer to the original product page.

Note: When the “Action button selector” field is being used, the “View original product” button will replace the “Add to cart” button.

Keep customized products in cart

Every 3D configured product that is being added to the Lightspeed shopping cart, will create a new product (a duplicate) in your catalogue with the same configuration (read more about this in the appendix).

To prevent your catalogue from getting filled with customized products (with the prefix “[Customized]”), the duplicates are being removed when the products are being ordered or removed from the cart.

This automatic removal won’t happen if the customer leaves the customized product in the shopping cart. In the “Replicas cleanup interval” setting, you can enter the number of days you want to keep the products in the shopping cart. If you’d enable the “Keep customized products in cart” setting, the customized products will never be removed from the cart.

Replicas cleanup interval

Enter the number of days you want to keep the customized products in the shopping cart. Make sure to disable the “Keep customized products in cart”.

Well done! You’ve now integrated the Expivi 3D configurator with your Lightspeed store. If you have any questions, please contact us and we’re happy to assist you!

Using fonts with text_to_image attribute type

When using the text_to_image attribute (see this page for more documentation) for product configuration, you can assign fonts to be selectable.

The fonts are provided by fonts.google.com

Warning: It is also possible to add a custom font. In this case, the same changes apply, however, the stylesheet URL must be provided by yourself.

Note: If the Lightspeed theme already uses the same fonts, no actions are needed and this part can be skipped

For example:

<link href="https://fonts.googleapis.com/css?family=Antic+Slab|Roboto+Slab&display=swap" rel="stylesheet">

You are using the default theme

Navigate to DesignTheme Editor and edit the following two files in Layouts section: custom.rain and fixed.rain.

Find the following line:

<link href='//fonts.googleapis.com/css?family={{ theme.headings_google_webfonts | url_encode }}:400,300,600' rel='stylesheet' type='text/css'>

Add the google provided stylesheet URL underneath this line.

Press “Save” to store the changes, and you’re done!

You are using a custom theme

Navigate to DesignTheme Editor and edit all relevant layout files.

Add the google provided stylesheet URL in the head section of these files, usually before the line with favicon, for example:

<link href="https://fonts.googleapis.com/css?family=Antic+Slab|Roboto+Slab&display=swap" rel="stylesheet"> 
<link rel="shortcut icon" href="{{ 'favicon.ico' | url_asset }}" type="image/x-icon" />

Press “Save” to store the changes, and you’re done!

Image upload

You can allow customers to upload an image (for example a custom print on a shirt). To enable this you have to use the image_upload attribute in the CMS configuration.

After a product is ordered, you will be able to see url to the uploaded images in the Lightspeed Order page.


Auto-generated customized products (duplicates)

In order to be able to add a product to the Lightspeed shopping cart which is customized with Expivi’s 3D product configurator, the Expivi app automatically creates a temporary product (a duplicate) for every unique customized product and adds this to the shopping cart.

This means that every time a customer adds a customized product to the cart, a new product (a duplicate) will be added to the catalogue (recognizable by the “[Customized]” prefix). The duplicate product will be removed automatically from your catalogue, if the product is being ordered or removed from the shopping cart.

The newly generated product will also have a new thumbnail and a new product description showing the chosen options of the customized product.

Note: Your “New products” list in Lightspeed will be affected as well. Customers will see the customized products appear anywhere the “New products” widgets are displayed. To prevent your catalogue from being populated with customized products by your customers, Expivi provides settings to limit the number of auto generated products.

Was this article helpful to you? Yes No

How can we help?