Shopify ​

This page describes how you can install and use Colorlab in your Shopify store.

Install Colorlab ​

1. Install Colorlab from the Shopify App Store
2. Activate your account by clicking on the link in the account activation email

   TIP

   Did not receive an account activation e-mail? Please check your spam folder, or contact us using the contact form our website.

3. Enable Colorlab in your Shopify Theme by following the link in the email or the instructions below:

Enable Colorlab in your theme ​

Before you can use Colorlab, you need to enable it in your current Shopify theme:

1. Open your Shopify Admin
2. In the navigation, click on Online Store -> Themes:
3. Click on Customize next to Current theme:
4. In the navigation, click on Theme settings:
5. Choose App embeds and enable Colorlab:
6. Save your theme:

If you switch to another theme in the future, you need to follow the above steps again.

Customize products ​

Now Colorlab is enabled, you can activate customization for one of your products. We'll use one of the demo templates in your Colorlab account.

1. Open the Colorlab Console
2. Edit a demo template and click on the Shopify tab
3. Select one of the products from your Shopify store
4. Click on Save

The Shopify product you selected will use this template for customization.

Open the product page in your Shopify store. It will display a button Personalize instead of Add to cart. You can customize the product by clicking on the Personalize button.

Read our full guide on Creating templates if you like to create and link your own templates.

Customizations in the shopping cart ​

A unique reference to the customization is displayed after adding a product to the shopping cart:

This reference is stored in a line item property, allowing customers to add the same product multiple times to the shopping cart with a different customization.

Changing customizations from within the shopping cart ​

You can replace customization references with links that allow your customers to review and change customizations from withing the shopping cart.

To do so, you'll need to update your theme's cart liquid code:

1. Open your Shopify Admin
2. In the navigation, click on Online Store -> Themes:
3. Click on the Actions dropdown for your Current theme, and choose Edit code
4. Open the cart liquid file. It's usually named main-cart-items.liquid, cart.liquid, cart-template.liquid or form-cart.liquid. This file should contain code that loops over each line item's properties:
   liquid

   {% for property in item.properties %}
     ... code that prints properties here
   {% endfor %}
   

   1
   2
   3
   
5. Add a conditional statement looking for customization reference, and print a link:
   liquid

   {% for property in item.properties %}
      {% if property.first contains 'customization reference' %}
         <a href="#" class="colorlab-open-personalisation" data-colorlab="{{ property.last }}">Change customization</a>
      {% else %}
         {{ property.first }}: {{ property.last }}
      {% endif %}
   {% endfor %}
   

   1
   2
   3
   4
   5
   6
   7
   
   For a complete overview of all tags, please refer to Shopify's Liquid documentation.
6. The customization references are now shown as links and will open Colorlab when clicking on them:

Displaying thumbnails of customizations ​

Colorlab offers functionality that generates a thumbnail of the customization that you can use to display in the shopping cart. You can think of this as a screenshot of what was last displayed in the designer application right before the customer added the product to the shopping cart.

You can enable this if you're displaying links to change customizations (see previous step) and by following these steps:

1. Open your Shopify Admin
2. Click on Online Store in the navigation
3. Next to Current theme click on Customize
4. Click on Theme settings -> App embeds
5. Expand Colorlab and tick the checkbox Replace cart thumbnails
6. Save your theme

After enabling this functionality, follow these steps to ensure it works:

1. Navigate to a customizable product page
2. Create a customization and and add it to your shopping cart
3. The shopping cart should now replace the original image in with a thumbnail of the customization

If you're experiencing difficulties having the thumnails to appear, please check:

• if the Cart row selector is correct. It should be a CSS selector string that matches all cart line items.
• if the items in your shopping cart were added before ticking the checkbox Replace cart thumbnails. These items won't have a thumnail available yet.

Uninstalling or cancelling Colorlab ​

If you want to stop using Colorlab or cancel your subscription, you can simply do so by uninstalling the app from your Shopify store:

1. Open your Shopify Admin
2. Click on the Apps link in the left sidebar
3. Under installed apps, you'll see Colorlab, click on the "waste bin" icon
4. Confirm uninstalling Colorlab

All access to your Shopify store and data is now revoked. Your data in Colorlab will be automatically erased according to our data processing policy.

You might have done changes to your theme's liquid code to allow customers to change customizations from their shopping cart (see 4. Customizations in the shopping cart).

To revert these changes, please follow these steps

1. Open your Shopify Admin
2. In the navigation, click on Online Store
3. Click on the Actions dropdown for your Current theme, and choose Edit code
4. Find the cart's liquid file (usually named cart.liquid, form-cart.liquid or cart-template.liquid)
5. Open the file and remove the code that was added earlier
6. Save you Shopify theme

Troubleshooting ​

I need help with integrating Colorlab in my Shopify store ​

If you aren't able to get Colorlab working by following all steps described in this document, please contact our support department by following the Support-link in the Colorlab Console.

Take into account some time for our support to respond to your request for assistance.

I've switched to another theme and Colorlab is not working anymore ​

When you publish or prepare another theme, you need to enable Colorlab in that theme as well. Please go to 2. Enable Colorlab in your theme and apply all steps to the new theme.

Customers can add products to my cart without customizing ​

Some Shopify themes come with "Quick add" functionality or show Add to cart buttons on catalog or collection pages. Shopify does not support creating customizations from overview pages.

To prevent customers adding products without customizations, please take a look at your theme's settings and disable Quick Add functionality or hide Add to cart buttons from overview pages to prevent this from happening.

When clicking the personalize button, Colorlab doesn't open ​

When the text on the Add to cart button is changed to Personalize, Colorlab is enabled and customization for the product is active.

However, some Shopify themes implement functionality that override the default way of adding products to the shopping cart, which can break the Colorlab integration.

If you happen to see the Personalize-button, but Colorlab does not open when clicking the button, please take a look at your theme settings and disable any functionality like "Add to cart using Ajax" and / or setting the Cart type to Page:

How do I hide the Buy it now button on product pages? ​

Some themes display Buy it now buttons next to the regular add to cart buttons. These are called dynamic checkout buttons and can't be configured to work with Colorlab.

To prevent customers from buying products without a customization, you need to disable these buttons.

1. Open your Shopify Admin
2. Click on Online Store in the navigation
3. Next to Current theme click on Customize
4. Navigate to a product page
5. Click on the Buy buttons item in the navigation and uncheck Show dynamic checkout buttons
6. Save your theme

When linking or updating a Colorlab template to a Shopify product, the changes are not immediately visible ​

When you initially link a template to a Shopify product, it might take up to a minute for the Personalize button to show on the product page.

This is because Shopify might cache your product page, and the changes haven't come through just yet.

This also happens when updating the product or the variants for which the template is used. Please allow some time for Shopify to display the changes.

How can I hide the customization reference on checkout pages? ​

Shopify does not allow to change checkout pages unless you have a Shopify Plus subscription. If you have such a subscription, you can override the checkout pages.

If you make changes to your checkout code, then you need to upgrade your checkout.liquid template manually whenever Shopify makes an upgrade. We advise to use the default checkout provided which displays the customization reference.

I've received an order, how do I see it's customization? ​

Every customized order line has a unique Colorlab code, for example 1.03dc0b02-8431-4ac8-9bfa-f32d279554d5:

The first part before the dot is a number, 1. This is the ID of the customization, a number that increases automatically when creating more customizations. You can lookup the ID in the list of customizations in the Colorlab Console.

Paste the ID 1 in the Search by ID filter on top of the page and click on the search-button to find the corresponding customization:

Did you know you can also lookup orders in the Colorlab Console? This page shows all orders that contain at least one order line with a customization reference. Orders and order lines without referenced customizations are not available in Colorlab due to data processing regulations.

I want to remove Colorlab code or snippets from my theme ​

Please follow the uninstall instructions in 5. Uninstalling or cancelling Colorlab.

If you worked with Colorlab before Shopify introduced Online Store 2.0, you have added snippets to your Shopify theme. That way of integrating Colorlab is outdated.

If you want to start using another theme, you can simply migrate to the new way of working by starting at 2. Enable Colorlab in your theme and apply all steps to the new theme you're preparing.

If you want to remove old snippets from the previous integration method, please follow these steps:

1. Open your Shopify Admin
2. Click on Online Store in the navigation
3. Next to Current theme, Click on the Actions dropdown and choose Edit code
4. Click on the snippets folder
5. Remove the colorlab.liquid and colorlab-cart-helper.liquid files

Do not forget to update liquid files that reference these files using the code {% raw %}{% render 'colorlab' %}{% endraw %}.