Adding personalization to a product

• 2-3 minutes to read

In this article, you will learn how to use Customer's Canvas to allow your customers to personalize the products in your Magento storefront. As an example, we will set up a wedding invitation product. Here you need to create a product for each wedding invitation design and connect it to Customer's Canvas. A customer will be able to open this design in the editor and personalize it. After the purchase, you will be able to download a personalized design as a print-ready PDF file.

Let's see how to do this.

Prerequisites

For this tutorial, you need:

1. A Magento store with the installed Customer's Canvas extension.
2. A Customer's Canvas tenant linked to your online store.
3. A design file, you can download and use our ready-made design.

If you have any issues with any of these prerequisites, contact our support team.

1. Creating a Magento product

Let's imagine that we would like to add our product under a category called Wedding Invitations.

1. In the Magento admin panel, click Catalog > Products > Add Products.

2. Fill in at least Product Name, Price, and select Categories. If you don't have a category yet, click New Category and name it Wedding Invitations.

3. Scroll down the form to Images And Videos, click Browse to find or drag image here, and select the product image from the downloaded archive.

4. Click Save, if everything is correct.

   

2. Uploading a design file

Following the next steps, you upload a file in BackOffice.

1. Prepare a product design (PSD or IDML files). See the Assets section to learn more about uploading different file formats.

2. Log in to your Customer's Canvas account.

3. Navigate to Assets > Fonts and upload fonts to the Fonts folder either by clicking New > Import or just drag-and-drop them from your computer.

4. Navigate to Assets > Designs and upload the product design.

3. Associating products with design files

To bind your product in the Magento store to the design file in BackOffice, follow these steps.

1. Navigate to the Product specification section.

2. Click Create new.

3. In the Basic settings, type in a name and select the personalization workflow Template-based Print Product Editor.

4. In Attributes, click the Design field and select the uploaded design file.

5. Scroll down the page to the Integration settings and click the name of your store.

6. In the Select product window, click the product, click Select, and then click Connect.

7. In the upper-right corner, click Save.

   

4. Testing the product

Now let's ensure that we have correctly configured the personalization workflow for our product.

1. Find our product on your Magento storefront when editing the product in the Magento backend.

2. If necessary, adjust the quantity and click Personalize.

3. On the Editor tab, edit some text information. Your changes will be reflected in the design.

4. Click the Approval tab and check the result.

5. If everything is correct, select the Approve my design checkbox and click Add to cart.

6. Click the cart symbol, and then Proceed to Checkout.

7. Fill in the necessary fields and click Place Order.

You have successfully created an order for a personalized wedding invitation card. We will discuss how to fulfill such orders in the Working with projects tutorial.