Integrating an online store

• 3 minutes to read

You can integrate Customer's Canvas with online stores to effectively organize sales of personalized products and to delegate a wide range of tasks for managing personalization parameters, visualizing and editing product designs online, and storing and processing results.

Personalization Workflow

To allow your users to personalize print products, you must first create product templates (so-called product specification) and associate these templates with product IDs in the e-commerce system (i.e. create a product reference). This configuration stage will be covered in the following topic.

At the personalization stage, the following steps can be performed:

1. A customer opens the product page in the store and clicks the Personalize button. At this moment, the product ID in the e-commerce system is passed to Customer's Canvas. You also need to specify the user ID in the e-commerce system, which performs the personalization. Using the product ID, Customer's Canvas finds the ProductSpecification and manages the personalization process based on this specification.
2. The user works on the product design in the editor. At the same time, a private personalized design is created in a private state file associated with this user. "Private" means it has an owner and a special access policy. The Storefront API has separate endpoints to work with these private designs.
3. When editing is completed, the onFinish method is called, where you need to add the product to the cart and save the personalization results with the private state ID.
4. Now, the customer may return to the first step and personalize another product. In this case, you must also add that product to the shopping cart and save the personalization results.
5. The customer navigates to the shopping cart and clicks Checkout.
6. For each personalized product in the shopping cart, you create a project with the following data:
   • productReference - product ID that CustomersCanvas uses to find the ProductSpecification.
   • ownerId - ID of the user who personalizes the product and owns the private state.
   • designIds - private state files created during the personalization.

Roadmap for the Integration

To integrate your online store with Customer's Canvas as part of creating your own web-to-print solution, you will need to perform the following key tasks:

• Register a store in your Customer's Canvas account.
• Establish accordance between the products of your online store and the designs stored in Customer's Canvas.
• Enable personalization of the product selected by the buyer on the website before adding it to the shopping cart.
• Organize the storage and processing of personalization results, production, and delivery of personalized products.

You can implement part of this workflow directly in the admin panel of your Customer's Canvas instance, while other parts may require coding on the online store side.

Customer's Canvas supports dedicated integration options with online stores built with popular e-commerce platforms. Depending on the capabilities and features of the e-commerce platform, you can achieve a certain degree of automation with this integration process. In some cases, there is no need to write any integration code on your part at all.

To solve these integration tasks on the online store side, we will use the Storefront API and StoreftontJS SDK.

C# Example

You can find an example of integrations like this in our demo application.

https://github.com/aurigma/CCHSample-BackOfficeIntegration-aspnetmvc

Refer to Demo 2.

---

In the next article, we will look at how you can connect an online store to your Customer's Canvas account.