Shopify

This page describes the installation procedure for owners of a Shopify store.

How it works

To enable Colorlab for Shopify, you have to do a few steps:

  1. Install the “Colorlab for Shopify” app in the Shopify app store and activate your account
  2. Add snippets to your stores theme
  3. Activating Colorlab for your Customized products

Read further for a more detailed explanation

1. How to install the Shopify app

To use the Colorlab app, you need to install the Colorlab for Shopify app from the Shopify App Store.

Currently the app is not published just yet, please contact Colorlab using the Colorlab website if you are interested in using Colorlab in your Shopify 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.

2. Add snippets to your theme

To enable the app in your Shopify store, you need to install the Colorlab snippets in your store’s theme. Once this is done, the snippet code will be available on both product pages and the shopping cart overview.

Product page

You need to add the Colorlab-snippet to automatically convert Add to cart buttons to Customize buttons for customizable products. Follow these steps:

  1. Go to your Shopify store admin dashboard
  2. Click on Online Store on the left sidebar, below the title Sales Channels
  3. Click on the Actions dropdown at the right, and choose Edit code
  4. Find the product template (usually named product.liquid, product-form.liquid or product-template.liquid)
  5. Edit the template and look for a closing form tag: </form>
  6. Paste the following code before the closing form tag: {% include 'colorlab' %}

The resulting code should look like this:

1
2
{% include 'colorlab' %}
</form>

Shopping cart page

For your customers to be able to edit customizations after they have added them to their shopping cart, follow these steps:

Find the cart template

  1. Go to your Shopify store admin dashboard
  2. Click on Online Store on the left sidebar, below the title Sales Channels
  3. Click on the Actions dropdown at the right, and choose Edit code
  4. Find the cart template (usually named cart.liquid, form-cart.liquid or cart-template.liquid)
  5. Open the template

Include the main snippet

  1. Find the closing form tag: </form>. If the template does not contain a closing form-tag, you are looking in the wrong template.
  2. Paste the following code before the closing form tag: {% include 'colorlab' %}
    The resulting code should look like this:
    1
    2
    {% include 'colorlab' %}
    </form>

Include the helper snippet

  1. Look for a piece of code that loops over properties of items in the cart. That usually looks like this:

    1
    2
    3
    {% for p in item.properties %}
    ...
    {% endfor %}
  2. Change this code and everything in between to the following code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% for p in item.properties %}
    {% unless p.last == blank %}
    {% if p.last contains '/uploads/' %}
    {{ p.first }}: <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
    {% else if p.first contains 'colorlab' %}
    {% include 'colorlab-cart-helper' %}
    {% else %}
    {{ p.first }}: {{ p.last }}
    {% endif %}
    {% endunless %}
    {% endfor %}

If a user creates a customization and adds it to the shopping cart, a Change customization link will display in the shopping cart.

3. Activating Colorlab for your customizable products

Before we go any deeper into linking Colorlab templates to Shopify products, you need a thorough understanding of what Colorlab templates are.

Read more about templates

So now you know what templates are, we can explain how you link them to Shopify.

  1. Login into the Colorlab console at https://console.colorlab.io
  2. Create a template
  3. Select the Shopify product you want to customize
  4. Select a specific variant you want to customize, if no variant selected the template will be loaded for all variants
  5. Click “add template”
  6. Define how to product should be customized and save the template
  7. If all went well your “add to cart” button is changed to “customize” and the app opens when clicking it!

Read our full guide for more information about the app Read more about templates

4. How to uninstall

You can easily uninstall Colorlab by following some easy steps:

Uninstall the Shopify Colorlab app

  1. Login into your Shopify store
  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. Click the uninstall button
  5. Our api access to your store is now revoked

Revert our theme changes

To make our app work with your Shopify theme 2 snippets were created on app installation and manually integrated in your theme.

Follow these instructions to correctly uninstall the snippets from your theme:

Remove our code from your product template

  1. Go to your Shopify store admin dashboard
  2. Click on Online Store on the left sidebar, below the title Sales Channels
  3. Click on the Actions dropdown at the right, and choose Edit code
  4. Find the product template (usually named product.liquid, product-form.liquid or product-template.liquid)
  5. Edit the template and look for {% include 'colorlab' %} and delete this from your template
  6. Save the template

Remove our code from your cart template

  1. Go to your Shopify store admin dashboard
  2. Click on Online Store on the left sidebar, below the title Sales Channels
  3. Click on the Actions dropdown at the right, and choose Edit code
  4. Find the cart template (usually named cart.liquid, form-cart.liquid or cart-template.liquid)
  5. Open the template and look for {% include 'colorlab' %}, delete this from your template
  6. After you’ve deleted our main snippet, look for a piece of code that looks like this:
1
2
3
4
5
6
7
8
9
10
11
{% for p in item.properties %}
{% unless p.last == blank %}
{% if p.last contains '/uploads/' %}
{{ p.first }}: <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else if p.first contains 'colorlab' %}
{% include 'colorlab-cart-helper' %}
{% else %}
{{ p.first }}: {{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}

Replace it with:

1
2
3
4
5
6
7
8
9
{% for p in item.properties %}
{% unless p.last == blank %}
{% if p.last contains '/uploads/' %}
{{ p.first }}: <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.first }}: {{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
  1. Save the template
  2. All references to our snippets in your theme are removed, we can now safely delete the snippet files from your theme

Delete snippets from your theme

  1. Go to your Shopify store admin dashboard
  2. Click on Online Store on the left sidebar, below the title Sales Channels
  3. Click on the Actions dropdown at the right, and choose Edit code
  4. Click on the snippets folder
  5. Remove the colorlab.liquid and colorlab-cart-helper.liquid files

Voila, Colorlab is now completely uninstalled!

If you have any trouble uninstalling Colorlab, please contact support@colorlab.io. We’re happy to help you with this!

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