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
toAssets
.Add the following line to the
Layout\theme.liquid
file.{{ 'jquery3.min.js' | asset_url | script_tag }}
Add the
cc-init.liquid
file toSnippets
.
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.