How to add a product side and a canvas?

• What are a product side and a canvas?
• How to add a product side?
• How to add a canvas?

What are a product side and a canvas?

A product side is an image of one side of the product that is supposed to be customized. For example, let's take a sweatshirt as a product for customization. This case product sides are the image of sweatshirt front, the image of sweatshirt back and the image of sweatshirt sleeve. If we take a smartphone case as a product for customization, the product side will be only one - an image of the front view of a smartphone case. 

A canvas is an area with borders where the custom design will be located. You can put several canvases on one product side. 

Note! You must add product sides and specify the canvases before you allow your customers customize the product. Otherwise, the customers won't have an ability to personalize the product.

How to add a product side?

First, add additional images for product sides. Go to the editing Product Page -> Images tab. Upload the images of the product. For example, you add separate images for each multiple shirt colors: red shirt front view, red shirt back view, red shirt sleeve view, white shirt front view, white shirt back view and etc.

After you have added all images for product sides, go to HTML5 Product Designer tab on the editing Product Page. Then click on the "Add product side" button.

Complete the form, you see

Product side name - you should give a name to any product side. For example: for t-shirt product sides will have names - front, back, sleeve. 

Extra charge - you may put a value on each product side. For example, you want to make a fixed price for the product side with the custom design.

Choose images - here you define an image for a product side. For example, you choose an image for a front view of a blue t-shirt. To select the image, you should click on the product picture on the right. In that case, all uploaded for this product images will be shown.

As soon as a store administrator sets options in the Options tab, they appear in the HTML5 Product Designer settings. On the screenshot, we see the option Size that was defined by the admin. You may add many other options (color, fabric) and all of them will be displayed in this form. You can select the option or option combinations and tie it to the product side.

You can add as many product sides as you need. All product sides will be available for your customers on the storefront.

How to add a canvas?

To define the customizable area on the product click + Add canvas button.

After you press this button, a new box will appear on the product side. Click on this box to change, rotate or remove it.

You can add as many canvases as you want.

P.S. If you did not find the necessary information, please, check other sections:

This instruction refers to our CS-Cart module Product Designer maker.