Templates
Templates are the fundamental structure that defines a specific customizer experience and user flow for a product. A template can have different user flows through the customizers.
For example, if you are a brand that sells two versions of a bottle —one version is engraved, and one version is printed. This would be two templates because you want two different customizer flows. One does engraving and the other does printing.
Create and Manage Templates
To create a Template:
From the Dashboard, click Customizer > Templates > Add New.
Enter the following details and click Save.
Name: Template's name.
Disclaimer: A note or instructions or details about the template.
Tags: Alternative categories that would help filter the template.
Once saved, a draft version is created and added to the templates list. Click
to open the detailed template editor page to complete the Template creation. Below are the different tabs that are displayed and available for template development:
Update the below fields and navigate to various tabs to structure your template.
General tab- the General tab is the first section you encounter when editing a template. It contains high-level settings that control the template's basic information, appearance, and behavior in the customizer. Below are the fields and its description:
FieldDescriptionName
Template's name.
Disclaimer
This field allows you to add a note, instructions, or any important information related to the template. It is displayed on the front end as a subtitle directly underneath the template's display name
Tags
These are keywords or categories you can assign to a template. Their primary purpose is to help you search for and filter templates within the portal
Add to Cart Text
This field allows you to customize the text that appears on the "Add to Cart" button
Price
This price is purely for visual display. The actual price of the product is controlled by your e-commerce platform, such as Shopify. You can leave this field at zero and use logic on the Shopify side to pull in the dynamic price, if applicable
Texture Color Space
This is a crucial setting that affects how colors are rendered. You can select between srgb and linear configuration: Srgb - This option uses the raw colors from the object being rendered and ensures they remain consistent. It prevents colors from underlying layers bleeding through.
For example, if a white logo appears bluish when placed on a blue product, the color space is likely set incorrectly. It is recommended to use sRGB for most projects
Linear - This option can sometimes cause color blending issues between layers
Use Mobile textures
Activating this checkbox forces the customizer to only load the smaller, lower-resolution mobile textures, even on a desktop. This is primarily used to optimize the customizer performance.
Disable Easing
When easing is disabled, the model will immediately snap to the new position without displaying any intermediate movement.
If easing is enabled, the model will visibly rotate or move to its new position, showing the transition from one perspective or state to another.
Aspect Ratio
This setting controls the aspect ratio (e.g., 1:1 for square, 16:9 for widescreen) of the main model view in the customize
Default Camera Type
This determines the camera used for the product visualization. You can select between perspective and orthographic configuration: Perspective: This should always be used for 3D projects. It renders them with a sense of depth and perspective, similar to how the human eye sees objects Orthographic: This is used for 2D projects that utilize flat product photography, as it removes the field of view and positions everything in a set fashion.
Versions
This section maintains and displays a record of the last edited versions and active/inactive versions of the template Create Preview Version - when you create a "preview version", It reflects the most recently published set of changes, allowing you to test and validate them in a safe environment before they impact production
Perspectives tab: the primary function is to provide the end-user with quick, non-interactive views of their customized product from various sides, which update automatically as they make changes, such as selecting a different color. Refer to Perspective for detailed information.
The process of building or editing a perspective is briefed below:
You select an existing perspective to edit or choose to build a new one.
The system displays the model in an editor that functions like the customizer itself.
You can then rotate and zoom the model to get the exact angle you want for that snapshot. These adjustments automatically update positioning properties, though advanced properties are also available for more detailed control.
Once you are satisfied with the angle, you click Save to confirm the perspective.
Scene tab: Here you configure the primary 3D environment for your product customizer. It is where you manage the core visual components that the end-user will interact with, including the 3D models, the main camera view, and the lighting. Refer to Scene for more detailed information.
Starting Point tab: This tab allows you to define preset design options for a product. The main purpose is to expedite the design process for customers, so they don't have to start customizing a product from scratch every time. A Starting Point is a pre-configured setup of a product's customizable options, which are all derived from the base options available in the template. For example, if a template allows for different colors, each color could be saved as a separate Starting Point. Refer to Starting Point for more detailed information.
Linked Products tab: This feature is used to add the template to the "parent product," effectively associating the customization experience you are building with the actual product item in your system. Refer to Linked Products for more detailed information.
Tabs tab: Tabs are the primary UI components used to organize and structure the customization options within a product. They function as containers or groups for different Elements (the specific customization choices like color pickers, text inputs, or image uploads). Tabs provide spaces between different items or options in the template, grouping related elements together. For example, a template for a shirt might have separate tabs for "Color", "Sleeve Personalization", and "Logo", each containing the relevant elements for those choices. Refer to Tabs for more detailed information.
JS Libraries tab: JS Libraries are used during template creation to add custom code and business logic to the customizer. This allows you to control the functionality, rendering, and communication between different customization elements beyond the standard setup. Essentially, if you need the customizer to perform specific actions like hiding an option when another is selected or setting default values, you would use a JS Library. Refer to JS Libraries for more detailed information
Locales Tab: This feature is used to configure languages for translating the customizer across different global business regions for a brand. When creating a template, you can associate specific locale files with it. This allows the template and the customizer it generates to be displayed in multiple languages. Instead of creating separate templates for each language (e.g., one for English and one for French), you can use a single template that dynamically updates its language based on the selected locale. Refer to locales for more detailed information.
Image Chain tab: This feature allow you to add image chains by specifying a path and an alias.
Once done with editing, click Save to save the changes, or click Delete to delete the template.
Once saved, You have successfully created templates and can now prepare the product customization list.
Last updated