Customer's Canvas integration
When you've added a product line to your store's e-commerce account, you can extend abilities of your customers with web-to-print. The Customer's Canvas Admin Panel will simplify the workflows for managing your W2P integration. In this guide, we'll learn how to connect the business card editor to the product on your Shopify store account. As a result, your customers will be able to order the product in your store, and customize it.
Before we proceed with Customer's Canvas integration, we need some preparation:
You must have an account with Customer’s Canvas to complete this task. And the account must be linked to your online store. If you don’t have it yet, please contact our support team.
We'll connect an editor that is based on a pre-made design. So you need to create and upload a business card design to Customer's Canvas, there are three ways to do this:
You need to add the business card to products in your Shopify account and publish it.
To complete this tutorial, it will be necessary to upload the fonts and images.
Connecting a product with Customer's Canvas
Step 1. Upload the required files.
Our journey has begun! First, there is a need to upload the necessary files to Customer's Canvas. In this step, we'll show you how to upload the business card design, fonts, and icons.
- Click Apps in the left menu bar > open Customer's Canvas. Click Assets and upload the business card design. Drag and drop or click Import button.
You can create a design in the Template editor or upload PSD-files, IDML-files, or State files from other Customer’s Canvas applications.
- Click Fonts. For our design, we use Roboto fonts. Take the fonts from the folder you downloaded earlier. Drag and drop or click the Import button.
We support the most popular font formats: TrueType and OpenType. You normally need to purchase fonts from third-party vendors, but you can download some free fonts from Google Fonts or other sources.
- Click Images. Create a new folder, to do so: click New > add the name Icons. Then drag and drop images or click Import. Do the same work with Background images.
We advise you to store images in semantic folders (Clipart, Backgrounds, etc.). This storage is easier to manage.
Step 2. Create a template.
In this step, we'll connect the business card editor with your store's Shopify account. To accomplish this task, we need to create a Template and configure the attributes.
- Click Templates > Create new. Give a relevant Name for a template.
We recommend naming templates the same way as they are named in the real store. In our case, it is the business card.
- Select the Editor. In this field, you need to select a config-file with the editor settings for your product. Choose Template-based Print Product Editor > click Select.
The config file is located in the admin panel of the tenants of the Customer’s Canvas application owner (Aurigma Inc.) You can’t edit it. According to the selected config-file, you have access to fill in the editor attributes.
Some examples of default config-files:
Blank Print Product Editor – we select this config-file if we want end-users to edit products without any design.
Template-based Print Product Editor – we select this config-file if we want end-users to edit products based on your design.
Guides about these editors will be available soon.
- Fill in the Attributes below > choose the business card design > add icons to your clipart gallery > connect Background images.
- In the Integration field you need to Connect the template with the business card. Click Connect > Save.
Step 3. Make a test purchase.
Congratulations! You've just improved your store with web-to-print capabilities. Now we recommend making sure that everything is in order. Let's check it out by making a test purchase.
Click on the eye icon (Preview on Online Store) in the Shopify panel left menu bar. Find the product in the store’s catalog. Instead of the Add to Cart button, now we have the button Design Product.
Click Design Product. You will redirect to the product editor. Here you can edit Front and Back sides of the business card to test all settings. Try to change the name, image, and add clipart.
At the end of the design creation, you can go to the Approval step to see how your future product will look like. Click I have reviewed and approved my design > Add to Cart > check your cart > click Check out.