Templates ​

A template in Colorlab is like a product in your online store, but only contains all information about how the product is customizable, for example:

• Where can a customer add text
• Which artwork can the customer add
• Is the customer allowed to upload pictures
• ...

When a customer opens the app on a customizable product in your online store, all the customization settings are retrieved from the template and displayed accordingly.

Creating a template ​

1. Go to the templates overview and click on the button Create template in the right top corner.
2. Enter a name for your template. This name is only used for administrative purposes.
3. Enter a unique template ID. This can be the SKU or Article Code of the template in your store.
4. Add an image (JPG or PNG file type) to your template

The template has his basic information now, click "next" to go to the next step and start drawing some areas!

Configuring areas ​

After adding the basic information to your template, it's time to add some areas.

What are areas? ​

Areas are rectangles drawn on top of the template's image and can be used to:

• Indicating where elements are visible (e.g. to prevent customers from positioning element where there aren't supposed to be positioned)
• Positioning elements (e.g. in the center of of an area)
• Resizing artwork and pictures (e.g. to fill the area's dimensions upon loading)

Using areas is not required, but it can greatly shorten the time needed to create templates.

How to create an area? ​

Instructions:

1. Navigate to the item Areas
2. Click and hold your mouse button on the template image
3. Drag to a position to create the area and release the mouse button
4. Change the area's position and size using your mouse, or by changing the coördinates on the right hand side
5. Give your area a name for future reference

How to use an area? ​

One of the most common use-cases of areas is to limit the visibility of an element. For example when you want to show the full product in the editor but only a part of the product can be customized.

Instructions:

1. Create or edit a template and go to the step Preview (Step 4)
2. Add an element and click on the cog icon next to the element
3. Navigate to the step position and set the visibility to your area

Adding elements ​

Elements are customization layers displayed on top of the template image. There are 5 kinds of elements:

• Text
• Picture
• Illustration
• Background
• Mask image

Text ​

A text element is used to allow the customer to add text to the template. Click the button + Add element and choose Text. On the right side of the page you'll see a live preview of how the element will be shown in the app. You can position and change settings directly in this preview.

Double click the element or click on the pencil icon to change the settings of the element.

Available settings:

• Value

  • Field name: the name shown above the element settings in the app
  • Multiline: tick this checkbox to allow the customer to enter multiple lines of text
  • Text alignment: choose how the text should be aligned by default
  • Maximum characters (optional): optionally enter a maximum amount of characters the customer is allowed to enter. Set to 0 to allow an unlimited amount (default).

• Font and size

  • All fonts: tick the checkbox to allow the customer to choose from any font. If you untick the checkbox, you can hand pick the fonts the customer is allowed to choose.
  • Default font: choose which font is applied by default
  • Default font size: choose which font size is applied by default
  • Minimum font size: choose the smallest font size the customer is allowed to choose
  • Maximum font size: choose the biggest font size the customer is allowed to choose

• Color

  • Allow new colors: tick the checkbox if the customer is allowed to choose his own colors using a color picker.
  • Color selection: is the list of colors that's displayed by default when opening the app. Add your own colors by clicking on the Add color button, or remove colors using the Remove button. Optionally you can enter a name for each color which will be displayed as a tooltip when hovering the color.

• Position

  • Visible in: choose where the text should be visible. By default, the text is visible in the entire template. If you assigned areas to the template, you can choose here to limit the visibility to that area. When the customers drags the text outside of the area, it won't be visible anymore.
  • Position: the X and Y position in pixels calculated from the top left of the template. This position is by default the center of the template. You can change it manually, or change it to the center of another area.
  • Rotation: the rotation of the text in degrees when opening the app (non rotated by default)

• Extra

  • Draggable: Indicates if the customer is allowed to change the position. (allowed by default)
  • Rotatable: Indicates if the customer is allowed to rotate. (allowed by default)
  • Resizable: Indicates if the customer is allowed to resize. (allowed by default)
  • Non-editable: Indicates if the customer is allowed to make changes to the element. If the element is non-editable, the element is visible, but it can't be selected or changed by the user.
  • Required: Requires the customer to at least enter 1 character to be able to create a customization.
  • Export: Indicates if the element should be included when exporting a customization of this template.

Picture ​

A picture element is used to allow the customer to add a picture to the template. Click the button + Picture to add a picture element.

On the right side of the page you'll see a live preview of how the element will be shown in the app. You can position and change settings directly in this preview.

Additional settings are available under the cog icon.

Available settings:

• Value

  • Field name: the name shown above the element settings in the app
  • Default picture: choose which picture is shown by default

• Position

  • Visible in: choose where the picture should be visible. By default, the picture is visible in the entire template. If you assigned areas to the template, you can choose here to limit the visibility to that area. When the customers drags the image outside of the area, it won't be visible anymore.
  • Position: the X and Y position in pixels calculated from the top left of the template. This position is by default the center of the template. You can change it manually, or change it to the center of another area.
  • Scales to: Scale image to the entire template or to a defined area. Following scale options are available:
  • Do not scale: Do not scale the picture at all, it will be shown as is.
  • Fill: We scale the image up until it fills the entire template or area. (Note: we do not stretch the pictures, dimensions will be respected)
  • Fit in: If the image does not fit the template or area, we scale it until it fits.
  • Rotation: the rotation of the picture in degrees when opening the app (non rotated by default)

• Extra

  • Draggable: Indicates if the customer is allowed to change the position. (allowed by default)
  • Rotatable: Indicates if the customer is allowed to rotate. (allowed by default)
  • Resizable: Indicates if the customer is allowed to resize. (allowed by default)
  • Non-editable: Indicates if the customer is allowed to make changes to the element. If the element is non-editable, the element is visible, but it can't be selected or changed by the user.
  • Required: Requires the customer to upload a picture to be able to create a customization.
  • Export: Indicates if the element should be included when exporting a customization of this template.

Illustration ​

An illustration element is used to allow the customer to choose from your illustrations library and add it to the template. Click the button + Illustration to add an illustration element.

On the right side of the page you'll see a live preview of how the element will be shown in the app. You can position and change settings directly in this preview.

Additional settings are available under the cog icon.

Available settings:

• Value

  • Field name: the name shown above the element settings in the app.
  • Limit selection to Illustration groups (optional): Define groups of illustrations the customer can choose from.
  • Default illustration: choose which illustration is shown by default

• Position

  • Visible in: choose where the illustration should be visible. By default, the illustration is visible in the entire template. If you assigned areas to the template, you can choose here to limit the visibility to that area. When the customers drags the illustration outside of the area, it won't be visible anymore.
  • Position: the X and Y position in pixels calculated from the top left of the template. This position is by default the center of the template. You can change it manually, or change it to the center of another area.
  • Scales to: Scale the illustration to the entire template or to a defined area. Following scale options are available:
  • Do not scale: Do not scale the illustration at all, it will be shown as is.
  • Fill: We scale the image up until it fills the entire template or area. (Note: we do not stretch the pictures, dimensions will be respected)
  • Fit in: If the illustration does not fit the template or area, we scale it until it fits.
  • Rotation: the rotation of the illustration in degrees when opening the app (non rotated by default)

• Extra

  • Draggable: Indicates if the customer is allowed to change the position. (allowed by default)
  • Rotatable: Indicates if the customer is allowed to rotate. (allowed by default)
  • Resizable: Indicates if the customer is allowed to resize. (allowed by default)
  • Non-editable: Indicates if the customer is allowed to make changes to the element. If the element is non-editable, the element is visible, but it can't be selected or changed by the user.
  • Required: Requires the customer to select artwork to be able to create a customization.
  • Export: Indicates if the field should be included when exporting a customization of this template.

For more information about illustration go to the section about illustrations.

Background ​

A background element is used to allow the customer to choose the background color of the template. Click the button + Background to add a background element.

On the right side of the page you'll see a live preview of how the element will be shown in the app. You can position and change settings directly in this preview.

Additional settings are available under the cog icon.

Available settings:

• Value

  • Field name: the name shown above the element settings in the app.

• Color

  • Allow new colors: tick the checkbox if the customer is allowed to choose his own colors using a color picker.
  • Allow transparent color: tick the checkbox if the customer is allowed to choose transparent as a possible color.
  • Color selection: is the list of colors that's displayed by default when opening the app. Add your own colors by clicking on the Add color button, or remove colors using the Remove button. Optionally you can enter a name for each color which will be displayed as a tooltip when hovering the color.

• Position

  • Visible in: choose where the background element should be visible. By default, the background element is visible in the entire template. If you assigned areas to the template, you can choose here to limit the visibility to that area.

• Extra

  • Non-editable: Indicates if the customer is allowed to make changes to the element. If the element is non-editable, the element is visible, but it can't be selected or changed by the user (background elements are non-editable by default).
  • Required: Requires the customer to select a (non-transparant) color to be able to create a customization.
  • Export: Indicates if the element should be included when exporting a customization of this template.

Mask image ​

A mask is essentially a picture element which is non-editable. This is used to put an additional image on top of the template and can be useful for templates that can only be partly customizable or the customizable part has a special shape.

On the right side of the page you'll see a live preview of how the element will be shown in the app. You can position and change settings directly in this preview.

Additional settings are available under the cog icon.

Available settings:

• Value

  • Default picture: choose the mask template that is shown.

• Position

  • Visible in: choose where the mask should be visible. By default, the mask is visible in the entire template. If you assigned areas to the template, you can choose here to limit the visibility to that area.
  • Position: the X and Y position in pixels calculated from the top left of the template. This position is by default the center of the template. You can change it manually, or change it to the center of another area.
  • Scales to: Scale the mask to the entire template or to a defined area. Following scale options are available:
  • Do not scale: Do not scale the mask at all, it will be shown as is.
  • Fill: We scale the mask up until it fills the entire template or area. (Note: we do not stretch the pictures, dimensions will be respected)
  • Fit in: If the mask does not fit the template or area, we scale it until it fits.
  • Rotation: the rotation of the mask in degrees when opening the app (non rotated by default)

Example of a mask:

Template	Mask	Result in the app

Copying ​

A quick way to setup your templates is to create an element, configure it exactly like you want, and use the Copy functionality to quickly add elements with the same configuration:

Multiple views ​

What are views? ​

You can create templates with multiple views that can be customized, for example a t-shirt with a customizable front and back side.

To make a view as dynamic as possible, each view has its own elements and template image.

Adding a view ​

Adding a view is easy, just follow a few simple steps:

1. Navigate to the templates overview and create or edit a template
2. When on the template detail page, make sure you're on step 1 called "1. Template"
3. Click on the "Add new view" button and enter a name and view template image and save the view
4. You'll see that a view switcher became available on the other steps, use this switcher to change the context to another view
5. Start defining areas and elements for this view Define areas

Editing a view ​

Edit a template and navigate to the first step (1. Template), click on the view you want to edit. A dialog is shown where you can do the changes, save the product afterwards.

Deleting a view ​

Edit a template and navigate to the first step (1. Template), click on the view you want to delete. A dialog is shown with a remove button in the bottom left corner.

Copy a template ​

To simplify template creation in the Console, you can copy templates that are alike:

1. Navigate to the template overview
2. Click on the copy button
3. Enter a Name and a unique template ID for your copy
4. Click on the copy button

You now have an exact copy of the template you created before. Changes to the orginal template won't affect the copy or vice versa.

Delete a template ​

To delete a template, click on the Delete button in either the overview of templates or when editing a template. After confirming, the template is deleted.

Customizations of the deleted template won't be affected.

Export settings ​

In the export settings screen you can define how you export your customers' customizations from the Colorlab Console.

Export size ​

The size of the export is defined in pixels and based on the dimensions of the template by default. If you change the export size to an area, you will see that the dimensions in pixels will change to the dimensions of the area.

Export fields ​

By default, the template and all the elements you created will be included in the export by default. If you would like to exclude the template or elements, simply uncheck their checkboxes to exclude them.

File type ​

You can export customizations in 3 different formats:

• PDF document:

  • contains a layer for each element
  • original images are included without any conversion of any kind
  • texts are converted to outlines automatically

• PNG Image:

  • a plain image containing transparency
  • images are included and converted to web-friendly sRGB

• PDF document (PNG based):

  • a PDF document containing one layer
  • images are included and converted to web-friendly sRGB
  • the single layer contains a transparent PNG image matching the PNG export

Which file type should you use? This depends on your procedure in processing in store orders: If you work with graphic design software like Adobe Photoshop, Adobe Illustrator or Adobe InDesign, we advise to use a PDF-based export.

Since a PDF document contains additional metadata like DPI, which you can use to match your print-ready files.

The default PDF export includes original images and converts text to outlines. If you prefer the images to be converted automatically to sRGB and don't need text outlines, you can use the PNG based PDF export.

If you only need an image that displays the customer's customization for future reference, you can export customizations in PNG-format.

Dots per inch (DPI) ​

The amount of dots per inch (DPI) is a setting available if you export to PDF. This setting defines the amount of pixels printed onto a physical inch.

If you change the DPI setting, you will see the physical export dimensions change as well.

DPI examples ​

Which DPI? ​

This depends on the type of template and the minimum amount of pixels you need to print it.

Example 1: a canvas print of 90 x 60 cm (36 x 24 inch)

If your customer needs to upload 1 picture to fill the entire canvas, he would need to upload a picture of 10630 x 7087 to fill the canvas entirely. Since an average camera has about 8 megapixels and translates to roughly 3500 x 2300 pixels, this is a way too big requirement.

A canvas print has a rather grainy surface which allows to use pictures with a lower resolution. In this case, it's advised to create a template based on a DPI of 100.

Most of your customers pictures will be big enough, which will boost conversion dramatically.

Example 2: a printed iPhone case of about 70 x 140 mm (2.75 x 5.5 inch)

Since this is a rather small template and your printing hardware supports printing up to 300 DPI, you can create your template and export it at this setting.

Enabling templates for your customizable products ​

To enable products to be customized in your store, please head over to the Integrations section to connect your store with Colorlab.