Lightspeed ​

This page describes the installation procedure for owners of a Lightspeed store. The app is currently only available for Lightspeed stores created in Belgium, The Netherlands or Germany.

Install the app ​

To use the Colorlab app, you need to install the Colorlab for Lightspeed application from the Lightspeed App Store. Please head over to the Lightspeed Apps Store and install the app for your online store.

Activate your account ​

After installing the app, you will receive an e-mail to activate your account. Please follow the link in this e-mail and enter a password you would like to use to log in.

Did not receive an account activation e-mail? Please contact Colorlab using the Colorlab website.

Enabling customization for products ​

For the app to know if a product is customizable, every customizable product needs to have a custom field attached. This field is used to:

• Know if a product is customizable
• Remember the customization created by the customer
• Allow the customer to change the customization from withing the shopping cart
• Retrieve the customer's customization after placing an order

Instead of creating this field over and over for each customizable product, you can create a custom field group you can reuse every time.

1. Create a custom field group (once) ​

1. Open the Lightspeed back-end log in. You can reach the back-end by navigating to www.yourdomain.com/admin.
2. Click on products in the navigation
3. Next, click on extra fields
4. Give the custom field group the name Customization and click on the save button
5. Click on Add field to add a new text field to the group
6. Give the field the name colorlab (all lowercase), make it non-required and do not limit the amount of characters
7. Click on the save button

You are now ready adding the custom field group. You’re now able to add this field set to products that need to be personalized using the Colorlab app.

2. Enable customization for a product ​

For every customizable product, you need to use the created custom field group to enable to Colorlab app for that product:

1. Open the Lightspeed back-end log in. You can reach the back-end by navigating to www.yourdomain.com/admin.
2. Edit a product and scroll down to Stock and variants
3. Make sure that every variant has an article number. This number is a unique reference to a template in the Colorlab back-end.
4. Add or edit a variant and enter an article number.
5. Scroll down to the heading Extra fields
6. Click on the button Use field group, and select the field group Customization that you created before.
7. Save the product

The product is now ready to be customized by your customers. Repeat these steps for every product is customizable.

Opening the app on the product page ​

Default implementation ​

After installing the app and adding the custom field to a product, head over to the product detail page in your store. The Add to cart button should now display Customize as text. Click on the button to open Colorlab:

Using multiple variants ​

The default implementation supports using multiple variants. Add each variant and enter it's corresponding Colorlab template ID.

Note: All variants need to be customizable. If you want to exclude some variants, please contact Colorlab Support.

Using custom fields to determine which Colorlab template to use ​

If you wish to change the template based on a a choice made in a custom field, you can't use the default implementation because Lightspeed unfortunately only allows to store a template ID for variants, and not for custom fields.

In this case, we advise you to integrate Colorlab using the Javascript implementation in your theme. Example:

var templateId = 'iphone-template';

// The add to cart button on the page
var addToCartButton = document.querySelector('.add-to-cart');

// A select to choose a value from the Lightspeed custom field
var chooseColorSelect = document.querySelector('select.choose-color');

// Callback to start customization
function startCustomizing() {
  colorlab.open({
     shop: 'your-shop-id',
     product: templateId,
     callback: function() {
       // Remember the Colorlab ID and Token
       document.getElementById('colorlab-id').value = id + '.' + token;
     
       // Close the app
       colorlab.close();
     
       // Submit the product to the shopping cart
       document.getElementById('form-add-to-cart').submit();
     }
  });
}

// Helper functions to enable or disable the customization
function enableCustomization() {
  addToCartButton.innerHTML = 'Customize product';
  addToCartButton.addEventListener('click', startCustomizing);

}
function disableCustomization() {
  addToCartButton.innerHTML = 'Add to cart';
  addToCartButton.removeEventListener('click', startCustomizing);
}

// Listen to changes in the select
chooseColorSelect.addEventListener('change', function(e) {
  // Disable customization
  disableCustomization();

  // Get the selected color
  var selectedColor = e.target.value;

  // Non customizable colors
  if (selectedColor === 'white') {
    return; // Exit early
  }

  // Update the template ID to match the color
  templateId = 'iphone-template-' + selectedColor;

  // Enable customization
  enableCustomization();
});

As the integration greatly depends on your theme and how custom fields are rendered, Colorlab does not offer development services to adapt the example above to your theme. However, we're happy to validate if your integration is set up correctly once it's implemented in your theme.

Please contact Colorlab Support if you wish to integrate Colorlab using the Javascript integration for more flexibility.

If you need help from an expert to setup the Javascript implementation in your theme, you can find Lightspeed experts here.

Creating and changing customizations ​

Customize and add to cart ​

If the app opens on your product page, customize the product to your liking and click on the Add to cart button in Colorlab.

The app will close automatically and you will be redirected to the shopping cart.

Change customization ​

Your shopping cart now displays the customized product along with a change customization link.

To change the customization, click the link and make the desired changes. When finished, click the save button in Colorlab. The customization is now updated.

Orders with customizations ​

1. Retrieve the customization ID ​

Every customized order line has a unique Colorlab code. Example: 42450.15bd7c88-77b3-4a87-9a46-ad1b8a443452

Follow these steps to find the Colorlab Code:

1. Open the order with customized products in the Lightspeed back-end
2. Find the order details
3. Line items with a customization will show following code: colorlab: 42450.15bd7c88-77b3-4a87-9a46-ad1b8a443452
4. Copy the part before the dot: 42450

2. Lookup the customization ​

Look this number up in the Colorlab Console to get the right customization.

1. Log into your account in the Colorlab Console
2. Click on Customizations on the Dashboard
3. Paste the ID in the Search by ID filter on top of the page and hit enter
4. The corresponding customization is shown.