---
title: "Adding Customer's Canvas to a Theme"
canonical: https://customerscanvas.com/docs/cc6/adding-customers-canvas-to-themes.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Adding Customer's Canvas to a Theme

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
After you have [associated Customer's Canvas with Shopify](https://customerscanvas.com/docs/cc6/binding-shopify-and-app.htm.md), you can modify your theme (`.liquid` files) to load the editor on product pages. Aurigma provides code samples and snippets you need to add to your Shopify theme to get it working with Customer's Canvas. You can contact our [support team↗](https://customerscanvas.com/account/cases/add) to get this Customer's Canvas Shopify Integration Pack.
 
The Customer's Canvas Shopify Integration Pack contains the following files:
 
- `cart.liquid` - the shopping cart template.
- `cc-init.liquid` - the snippet which contains all the code for loading the editor.
- `ecommerce-driver.js` - the e-commerce driver.
- `jquery3.min.js` - the compressed jQuery script.
- `product-template.liquid` - the product template sample.
- `require.js` - the module loader.

Now, let us look at how you can embed these files into your Shopify theme.
 
**Note** 
These instructions assume that you are using a clean Shopify installation without any third-party plugins. When you add plugins modifying the product model (such as Bold Options, etc.), then some modifications to this process may be required. If you cannot find the code that you need to modify, contact our [support team↗](https://customerscanvas.com/account/cases/add).
 
## Copy Files to a Theme
  
1. Add these javaScript files to `Assets`:
    - `require.js`
    - `ecommerce-driver.js`
2. If your theme does not include JQuery by default, add it:
    - Add `jquery3.min.js` to `Assets`.
    - Add the following line to the `Layout\theme.liquid` file. 
```
        {{ 'jquery3.min.js' | asset_url | script_tag }}
        ```
3. Add the `cc-init.liquid` file to `Snippets`.
 
## Modify the Product Page Template
  
Let us embed Customer's Canvas by modifying the `Templates\product.liquid` file or another template where the **Design product** button should appear:
 
1. Include `cc-init.liquid`. 
```
    {% include 'cc-init' %}
    ```
2. Add `target="main-product-page"` to the main DIV element, which displays the product details. Customer's Canvas hides this DIV and shows the editor instead.
3. Add the following code after the main DIV element. 
```
    <div id="cc-editor-page" style="width:100%; display:none; margin-bottom:100px;">
        <div id="editor-parent-for-product" class="editor-body">
        </div>
    </div> 
    ```
4. Add the following code for the **Add To Cart** button. This code replaces the default button with **Design product** for products associated with Customer's Canvas. 
```
    {% if product.metafields.customersCanvas.editorName %}
        <button type="button" target="cc-editor-button" class="btn add-to-cart" value="Design product">
            <span>Design product</span>
        </button>
        <button type="submit" name="add" id="AddToCart" style="display:none">
        </button>
    {% else  %}
        DEFAULT BUTTON CODE
    {% endif %}
    ```
 
## Modify the Cart Template
  
To display a design preview instead of the default product image in a shopping cart, you need to edit `Templates\cart.liquid`. Also, you can add the **Return to edit** button so that your user can return to the product editor.
 
When modifying the shopping cart, you can refer to the `cart.liquid` file from the Customer's Canvas Shopify Integration Pack.
 
### Show Previews in the Shopping Cart
 
Find the code iterating through item properties.
 
```
{% for p in item.properties %}
...
{% endfor %}
```
 
This cycle displays product images through `id="img-product-{{item.key}}"`. Replace these default images with the following code to insert preview URLs.
 
```
{% if p.first == "_image_0" or p.first == "_-image_0" %}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var imageLink = '{{p.last }}';
        var selector = "img[name='{{item.key}}']";
        $(selector)[0].src = imageLink;
    });
</script>
```
 
### Display the Return to Edit Button
 
To display the **Return to edit** button in the shopping cart, add the following code right after the previous snippet.
 
```
{% elsif p.first == "_state" or p.first == "_-state"  %}
    <div><a id="cc-return-edit-url-{{item.id}}" name="{{item.key}}" href="#"> Return to edit </a></div>
    <script>
        var stateId = "{{p.last}}";
        var ahrefurl = "{{ item.url }}";
        if (stateId != null) {
            ahrefurl += "&state=" + stateId;
        }
        ahrefurl += "&key={{item.key}}";
        ahrefurl += "&page=design";
        var selector = 'a[name="{{item.key}}"]';
        $(selector)[0].href = ahrefurl;                     
    </script>
{% endif %}
```
 
### Hide Extra Properties from the Shopping Cart
 
Since you add information about the customized design to the order, Shopify automatically displays it along with other order properties. To simplify the output, hide properties starting from the underscore by adding the following check to the same property processing cycle.
 
```
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
    DEFAULT CODE
{% endunless %}
```
 
If done correctly, the **Design product** button appears for products associated with Customer's Canvas templates. By using this button, you can verify the customization and ordering process from the user's perspective. The next topic describes how you can [set up products](https://customerscanvas.com/docs/cc6/setting-up-shopify-products.htm.md).
 
## See Also
  
### Manual
 
- [Integration with Shopify](https://customerscanvas.com/docs/cc6/integration-with-shopify.htm.md)
- [Binding Shopify and Customer's Canvas](https://customerscanvas.com/docs/cc6/binding-shopify-and-app.htm.md)
- [Setting Up Products](https://customerscanvas.com/docs/cc6/setting-up-shopify-products.htm.md)
- [UI Framework](https://customerscanvas.com/docs/cc6/product-editors.htm.md)