Templates ​

A template in Colorlab is akin to a product in your online store, except that it contains all the information about how the product can be customized. For instance:

• Where can a customer add text?
• What kind of artwork can the customer add?
• Can the customer 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. Navigate to the templates overview and click on the button Create template in the top right corner.
2. Enter a name for your template. This name is used solely for administrative purposes.
3. Enter a unique template ID. This could be the SKU or Article Code of the template in your store.

The template now has its basic information. Please proceed to step 2, Dimensions, and continue by setting the size of your template.

Dimensions ​

Define the width and height of your template in px, mm, cm or inches. These are usually the real-life dimensions of your product. What's configured here will also be used as the size of the export unless otherwise configured in the export settings.

• Width: The width of your template in px, mm, cm or inches.
• Height: The height of your template in px, mm, cm or inches.
• Working unit: The unit of measure used for entering dimensions or positions in this template.
• Resolution: The print resolution (DPI). In the case of a template defined in px, this value is used for calculating its physical size.
• Background image: An image of your product. This will be the bottom layer when opening this template in the product customizer.

Configuring Areas ​

After configuring the dimensions of 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:

• Indicate where elements are visible (e.g. to prevent customers from positioning elements where they shouldn't be positioned).
• Position elements (e.g. in the center of an area).
• Resize artwork and pictures (e.g. to fill the area's dimensions upon loading).

Using areas isn't required, but it can greatly expedite 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 modifying the coordinates on the right-hand side.
5. Name your area 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 instance, 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 proceed 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 five kinds of elements:

• Text
• Picture
• Illustration
• Background
• Mask image

Text ​

A text element allows 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 appear in the app. You can adjust the position and settings directly in this preview.

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

Available settings:

• Value

  • Field name: The name displayed above the element settings in the app.
  • Multiline: Check this box 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 number of characters the customer is allowed to enter. Set to 0 to allow an unlimited number (default).

• Font and Size

  • All fonts: Check the box to allow the customer to choose from any font. If you uncheck the box, you can handpick 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 largest font size the customer is allowed to choose.

• Color

  • Allow new colors: Check the box if the customer is allowed to choose their own colors using a color picker.
  • Color selection: The list of colors 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 over the color.

• Position

  • Visible in: Choose where the text should be visible. By default, the text is visible in the entire template. If you have assigned areas to the template, you can choose here to limit the visibility to that area. When the customer drags the text outside of the area, it will no longer be visible.
  • 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 set 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: This indicates whether the customer is allowed to change the position (allowed by default).
  • Rotatable: This indicates whether the customer is allowed to rotate (allowed by default).
  • Resizable: This indicates whether the customer is allowed to resize (allowed by default).
  • Non-editable: This indicates whether the customer is allowed to make changes to the element. If the element is non-editable, it is visible but cannot be selected or modified by the user.
  • Required: This requires the customer to enter at least one character to be able to create a customization.
  • Export: This indicates whether 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 have assigned areas to the template, you can choose here to limit the visibility to that area. When the customer 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. The 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 does.
  • 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 have assigned areas to the template, you can choose here to limit the visibility to that area. When the customer 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. The 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 images; dimensions will be respected)
  • Fit in: If the illustration does not fit the template or area, we scale it until it does.
  • 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 illustrations, 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 their 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: This 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 over 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-transparent) 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. The 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 the way 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, then 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 ​

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

Deleting a view ​

To delete a view, 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 similar:

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 original 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 to export your customers' customizations from the Colorlab Console.

Export size ​

The size of the export is defined in the working unit of your template and based on the dimensions (width and height) of the template. If you change the export size to an area, you will see that the dimensions 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. 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 using 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 dots per inch (DPI) setting is available when you export to PDF. This setting defines the number of pixels printed within a physical inch.

The behavior of the DPI setting in Colorlab depends on the working unit you've configured in the dimensions step of your template.

Template working unit set to px ​

When the working unit of a template is set to px, the DPI value determines the physical dimensions set on the exported PDF.

Here's an example:

Template working unit set to mm, cm, in ​

For templates with the working unit set to mm, cm, in, the DPI value determines the template's dimensions in px.

This is crucial because the dimensions in px determine the size of the images that your customer needs to upload to completely fill the canvas.

Tip: Keep the size in px of your templates as small as possible. This makes it easier for your customers to find an image that completely covers your product and might increase conversion.

An example:

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.