Integration with Shopify

Customer's Canvas allows you to integrate the personalization editor into your Shopify site.

You can use the standard functionality of the e-commerce system to create product catalogs, configure prices, receive payments, etc. and use the Customer's Canvas plugin to personalize products. In this case, the ordering process looks as follows:

1. On a product page of a standard Shopify site, the Personlize button appears.
2. When the user clicks this button, the Customer's Canvas editor opens with the product template. The editor loads the product options/variants and the user can select various values that may affect the personalized product.
3. When the user finishes editing the product, the approval page appears where they can check the proof image and confirm that it contains no mistakes, etc.
4. After the design work is approved, the product with a customized design is added to the shopping cart.
5. The user continues the standard shopping process (as if there was no Customer's Canvas at all).
6. When the order is placed, the store staff can find the link to the print file in the order details and process this order.

To understand how you can implement this workflow, let us describe the available components and how they are related.

Shopify products

An important component of Shopify is the database of orders, products, apps, and so on. For every personalized product, you need to store information about applied templates and mockups, preview images, and more. Shopify provides a mechanism of metafields where you can store any data in key-value pairs. These metafields are convenient and flexible, but you cannot edit them in the Shopify admin area. You can manipulate metafields only through the API and therefore have to develop your own backend or use ours.

The Customer's Canvas backend

The Customer's Canvas backend is a separate web application. With a help of this application, you can upload templates, fonts, and others to the Customer's Canvas server as well as manipulate Shopify metafields related to Customer's Canvas. The Binding Shopify and Customer's Canvas topic describes how you can set up this backend.

Note

By default, Aurigma provides this backend only for the cloud version of Customer's Canvas. It is available at https://portal.customerscanvas.com. If you don't have a cloud account yet or have the on-premises version and need the Shopify integration, contact our support team.

Shopify theme

Another important component of Shopify is a theme, comprised of a set of .liquid files. If one considers Shopify as they would an MVC application, you can think about the theme as the View component. You can edit theme files in the admin panel of Shopify. In Adding Customer's Canvas to themes, you can find snippets and instructions on how to change .liquid files so that the editor appears on the product page.

The Customer's Canvas editor

The user interface of the editor consists of a number of JavaScript modules and a server image processing engine, which is used to parse PSD templates as well as generate proof images and PDF files. Since they cannot be installed directly in Shopify, you should host Customer's Canvas on a separate machine, either on your server or in our cloud. The changes in theme files mentioned above load Customer's Canvas scripts and show the editor on the product page when a user clicks the Personalize button.

In this chapter