Adding Customer's Canvas to themes

3 minutes to read

After you have associated Customer's Canvas with Shopify, 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 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.

Copy files to a theme

Add these javaScript files to Assets:
- require.js
- ecommerce-driver.js
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 }}
```
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:

Include cc-init.liquid.
```
{% include 'cc-init' %}
```
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.

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>

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.