Cookies are used on this site to provide the best user experience. If you continue, we assume that you agree to receive cookies from this site. OK

How to add a product side and canvas


What is a product side?

A product side is an image of one side of your product for personalization. For example, for a t-shirt it can be such images as t-shirt front, t-shirt back, t-shirt sleeve. For a mobile phone case it will be only front view of a mobile phone case.

It is necessary to add product side/sides if you use "T-shirt", "Fixed objects" or "Engraving" mode. Only after adding a product side and a canvas you/customers will be able to add their design to the product.


How to add a product side?

"Add product side" button is located on Product designer tools display panel (editing product page -> "Product designer" tab). Before adding a product side, make sure you have added additional images for your product in editing product page -> "Images" tab.

Click "Add product side" button to add necessary sides for your product.

Add product side

Enter the product side name, if necessary.

Choose an image by clicking on it and press "OK" button.

You can add as many product sides as necessary. Here you can also add product images of different colors (alternatively, you can create a color option for your product images of different colors). After adding all product side images you will see your product like in the below example:

Product area

Hover the mouse over the small preview images below the Product display area to edit/remove a preview image. Click on the necessary preview image and it will be displayed in the product area. 


What is a canvas?

A canvas represents an area of the product where it is possible to add your own design. In other words, a canvas is the designing area which must be set by an administrator. Product designer allows you to add as many canvases per a product side as it is necessary.


How to add a canvas?

1. Click "Add canvas" button, which is located on Product designer tools display panel, to add a canvas.

Add a canvas

2. After clicking "Add canvas" button, it is possible to choose a basic canvas, available canvas shape or upload your own canvas shape. See below:

Canvas variants

3. Click "Add basic canvas" button and on the product side's image a rectangular frame will appear. The real size of the canvas is displayed at the top and at the right side from the frame. The size depends on the "Ratio (mm/inch per pixel)" setting.

Please note! If you plan to use a resolution 300 dpi for a printable image (you can use lower resolution), canvas shouldn't be more than 800 mm*800 mm or 31.5 inch*31.5 inch . If the canvas is more than noted, it will be impossible to generate a printable image because Flash Player has certain restrictions.

It's possible to move, scale, lock and edit a canvas frame. See the example below and pay attention to the pointers:

Canvas elements

Click and drag Move element to move a canvas.

Click and drag Scale to resize a canvas. 

Click Lock to lock a canvas from moving, scaling and editing.

Click Edit to choose a canvas border color, set a border transparency and specify a corner radius. By specifying a corner radius you can set different round-like shapes for a canvas. See below:

Edit canvas

For example, by using a corner radius tool for a canvas you can easily set round and oval shapes for a sticker in the "Sticker" mode.

4. Click one of Canvas shapes if you want to set a designing area as this shape. Predefined canvas shape is a good choice for the "Sticker" mode of Product designer or for decorating an Iphone case.

5. Click "Add own shape" button to upload any custom shape from your PC. Custom shape canvas is .swf file which can be created in Adobe Illustrator, Flash, Corel Draw or another program for .swf files. Draw a shape which in necessary to you, use one-colored paint to fill the shape, save .swf file to your PC.


After adding product sides and a canvas for each side, you can create predefined design if needed. After having completed the editing you should save the product.