Publishing Customer's Canvas products on your online store

• 4 minutes to read

We assume that there is a concept of a product in your e-commerce system. This product is sold in an online store, for example, a Ballpoint pen. In the store, there is a separate page for each product, which usually displays information about the product, the price, and the order is available.

We also assume that there is an option, a certain property of the product that the customer can choose, for example, the color of the material, the position of the artwork, the size, the printing method, etc. For each option, a list of values is available. You cannot select any pen color you want, but only from a specific list of values ​​available in stock.

All combinations of option values form a variant set, for example, the pen may have the following variants identified by SKU:

• "Blue" / "Design on the barrel of the pen" / "Engraving"
• "White" / "Design under the clip" / "Color printing"

Customer's Canvas has exactly the same model describing the product in terms of the personalization process. Options and product variants in Customer's Canvas allow you to describe which design template and mockup to be used.

To open an editor with the correct settings on the product page, it is necessary to identify which product from Customer's Canvas to open, and then find the correct options using, for example, a search by SKU.

The options in the store and Customer's Canvas may not match. The description of products in the e-commerce system may be richer, for example, include options or properties that are important for the purchase process, but unimportant for personalization, like expedited delivery or non-personalized accessories. They do not have to be included in the Customer's Canvas product.

Linking a Customer's Canvas product to an e-commerce product page

There are two ways to link the products:

1. Save the Customer's Canvas product ID in the product database of your e-commerce system.
2. Save your product ID in Customer's Canvas product by creating a product reference.

Saving Customer's Canvas Product ID

This approach is more straightforward, but it requires making changes to the administrative part of your application and expanding the product database model:

1. In the administrative part of your storefront, where you manage the catalog, add the Customer's Canvas Integration section to the product settings.
2. In this section, you need to request a list of all products from your Customer's Canvas tenant using the endpoint GET /api/storefront/v1/products and display it in the user interface. If needed, you can organize filtering by name, tags, etc.
3. Add a Link button, by clicking on which you can save the ID of this product in the database.
4. You need also to implement the Unlink operation to detach the product from Customer's Canvas.

Using the Product Reference

This approach allows you to avoid making any changes to your administration panel. You just need to create a product link in the Customer's Canvas product, as described in the Connecting products to an e-commerce system topic.

When connecting a product, use your Integration name that you created earlier as a Storefront. As a Storefront Product, specify the ID of your product from your system.

Technically, you can use other values as a product reference, for example, a URL handler string or slug string. The main thing is that it is unique, and it is possible to identify the product. There should not be two Product Links with the same product reference.

Generating SKUs

The product models in Customer's Canvas and your system are similar and have the same product variants. This allows you to register the same SKUs in the appropriate product variants manually or via the API.

If your model significantly differs from Customer's Canvas and the same SKUs cannot be reused in both systems, you will either need to transform your SKUs into Customer's Canvas SKUs, or add a separate field to your product variants for maintaining the SKU from Customer's Canvas.

For example, your system may have an SKU for a Pen product, which encodes the color but not the printing method or the location of the print area.

• PEN01-WHITE
• PEN01-BLUE
• PEN01-RED

However, since you give the client the choice of the personalization method and the location of the print area, you have options for them, even though they do not participate in generating the SKU. For Customer's Canvas, you can use their values to dynamically generate a Customer's Canvas SKU, for example:

• PEN01-WHITE-BARREL-ENGRAVING
• PEN01-WHITE-BARREL-FULLCOLOR
• PEN01-WHITE-CLIP-ENGRAVING
• PEN01-WHITE-CLIP-FULLCOLOR
• PEN01-BLUE-BARREL-ENGRAVING
• PEN01-BLUE-BARREL-FULLCOLOR
• PEN01-BLUE-CLIP-ENGRAVING
• PEN01-BLUE-CLIP-FULLCOLOR
• PEN01-RED-BARREL-ENGRAVING
• PEN01-RED-BARREL-FULLCOLOR
• PEN01-RED-CLIP-ENGRAVING
• PEN01-RED-CLIP-FULLCOLOR

So, if you know how to form a Customer's Canvas SKU, you can generate it on the fly without saving it in your system.