Connecting a template-based editor to a product

• 2 minutes to read

In this tutorial, you'll learn how to add personalization to a business card product in a WooCommerce store. Customer's Canvas helps you manage this process by connecting the template-based editor that allows your end-users to edit products based on a design rather than from scratch. As a result, your customers can customize a previously prepared design and order the product in your store.

Prerequisites

To run the personalization, you need:

1. A WooCommerce store with the installed Customer's Canvas plugin.
2. A BackOffice tenant linked to your online store.

You can contact our support team to implement both these prerequisites.

You can also download and use a demo design file to accomplish the tutorial.

1. Creating a WooCommerce product

1. In the WooCommerce control panel, hover over Products and then click Add New.
2. Fill in the Product name, Description, and Regular price fields.
3. Click Set product image and select an image in the Media library (if needed, upload a new image first). Then, click the Set product image button.
4. Select a Product category.
5. Click Publish.
6. In the upper-left corner, click Customer's Canvas to preview the result.
7. Click the product category you specified in Step 4, and then click your product. Verify the result.

2. Uploading design files

1. In the BackOffice control panel, navigate to the Fonts section of Assets.
2. Upload fonts used in your design either by clicking New -> Import or just drag-and-drop it from your computer.
3. Navigate to the Designs section of Assets.
4. Upload the product design either by clicking New -> Import or just drag-and-drop it from your computer.
5. Double-click the design and click the Behavior tab to set up the properties of design elements in the editor.
6. When you have configured the design, click Save and then click the Test button in the upper-right corner.

3. Associating products with design files

1. In the BackOffice control panel, navigate to the Product specification section of Assets.
2. Click Create new. In the Basic settings, type in a name and select the personalization workflow Template-based Print Product Editor.
3. In Attributes, click the Design field and select the uploaded design file.
4. Scroll down the page to the Integration settings and click the name of your store.
5. In the Select product window, click the product, click Select, and then click Connect.
6. In the upper-right corner, click Save.

Tip

You may find more details about the Product specifications in Admin Guide section of Help Center.

4. Verifying the integration

1. In your WooCommerce store, hover over Products and click All products.
2. In the product list, hover over the product and click View.
3. When the product page opens, click Personalize.
4. On the Editor tab, change some fields.
5. Click the Approval tab, check the result, select the check box, and click Add to cart.

Now your customers will be able to place orders with personalizable products. To learn how to process such orders, see the Working with projects tutorial.