# Configuring Product Templates

Elements are the fundamental building blocks of the personalization experience, providing various options for end-users to modify and interact with a product. They represent the individual components of the customizer's user interface, such as buttons, text fields, and color swatches.

### Understanding Elements: 

The bones of a template consist of Tabs and Elements. Tabs are used to create navigable segments within the customizer, and within a Tab lives Element. Elements are the different forms of configuring different types of fields for users to interact with as they personalize/design the product. You can use the same element configuration across different product templates. 

The below are standard element types you may configure within a template. Each element has its own set of defined functionality, which may lead to certain UI/UX considerations when determining the visual design of the customizer. Considerations for each element are listed below:

{% columns %}
{% column %}

1. Image Upload
2. List
3. Buttons
4. SVG
5. Color Picker
   {% endcolumn %}

{% column %}
6\. Layouts
7\. Information 
8\. Summary
9\. Input
{% endcolumn %}
{% endcolumns %}

## 1. Image Upload:

The Image Upload Element enables users to upload their own images, which are then applied as textures to specific areas of a 3D model.

<figure><img src="/files/bN0MkzgAkodqnR1WWGxx" alt=""><figcaption></figcaption></figure>

### How It Works

1. **User Upload**: The user uploads artwork in an accepted web-ready format (PNG, JPG, SVG). Production formats like EPS or AI are not supported. The uploaded image is stored locally in the browser's IndexedDB or LocalStorage for the session.
2. **Modal Window**: By default, a modal window appears after upload, allowing the user to perform manipulations:
3. **Resize**: Zoom in and out.
4. **Rotate & Mirror**: Adjust the image orientation.
5. **Align**: Position the image within the designated customizable area.
6. This modal can be skipped via configuration, in which case the image is applied directly as a texture.
7. **Quality Check**: The modal includes built-in artwork quality checks for size and DPI. It warns the user if the image quality is insufficient for the defined physical production size but allows them to proceed.
8. **Overlay & Masking**: The modal can display an overlay representing the customizable area (e.g., the shape of a sock) and can use a mask file to crop the user's image to fit a specific shape (e.g., a leaf).
9. **Storage**: The original, un-manipulated artwork is stored on S3. All manipulation metrics (scale, rotation, etc.) are saved in the recipe to recreate the final design for production.

## 2. List:&#x20;

The list element is commonly used when configuring an array of values a user can select from. The list the array is then determined in what format it should be presented through the customizer. Below are examples of different formats of the list element. All of the containers each format are configured in still have the ability to be styled on.

{% columns %}
{% column %}

<figure><img src="/files/9BVWRPexgc6B7qrQP7tD" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/zSOadwtzaycOmhP4xlrS" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### Visibility Control Mechanisms -&#x20;

Each visibility function manipulates the `DOM` and element state using the following strategies:

* **CSS Class Toggle**: Adds or removes the `CUSTOMIZER_HIDDEN` class to control visual display.
* **Data Attribute Management**: Sets or clears the data-hidden attribute to track visibility state.
* **Optional Disabling**: Elements may be programmatically disabled to prevent interaction.

These functions are invoked during runtime by the customizer engine to reflect configuration-driven presentation logic. They ensure that only relevant UI components are visible based on user selections, tag filters, and platform-specific constraints.

## 3. Buttons:

Allows for the addition of functional buttons to the template. These can be used for actions like resetting the design, sharing, or downloading a PDF, etc.

## 4. SVG:

SVG elements allow users to colourise individual layers of a pre-uploaded SVG file. Information elements provide blank HTML spaces that support custom HTML, JS, and CSS for styling or descriptions

## 5. Color Picker:

The Color Picker Element allows users to select a custom color from a color wheel or spectrum, rather than from a pre-defined set of swatches (which are typically handled by the List Element).

<figure><img src="/files/mMcHCuBiK8H4chKxwZfd" alt=""><figcaption></figcaption></figure>

### Methods:

* `clearColor()`: Clears the current color selection, reverts the affected materials to their default state, restores the input to its default color, and triggers a change event with an empty value.
* `reset()`: A convenience method that calls `clearColor()` and then triggers an update of the Summary Element.

## 6. Layout:

The Layout Element is functionally similar to the Information Element but is simplified to handle only one version of content at a time. It is also used for displaying read-only, user-guiding information.

### Methods:

* `fetchContent(url)`: Retrieves content from a URL and returns the response text.
* `setContent(html)`: Injects HTML content into the element.Button:

## 7. Information:

The Information Element is designed to display read-only content that helps guide a user while they are making choices. Its primary feature is the ability to store multiple versions of content and dynamically switch between them based on user interaction with other elements.

<figure><img src="/files/BAWiGm64vuWAlDmhUwUH" alt=""><figcaption></figcaption></figure>

### Methods:

* `toggleOptionVisibility(code, isVisible)`: Shows or hides a specific content piece by its code.
* `hideAllOptions()`: Hides all content pieces within the element.
* `showAllOptions()`: Shows all content pieces.
* `reset()`: Restores all content pieces to their initial hidden states.

## 8. Summary:

The Summary Element provides a real-time, read-only summary of all the choices a user has made during their customization session. It automatically reflects the current state of the "recipe."

<figure><img src="/files/lYoO1LIFxMnnhWIgEoqw" alt="" width="375"><figcaption></figcaption></figure>

After each update, it emits a `SUMMARY_UPDATED` event, which can be used to trigger other custom logic if needed.

## 9. Input:

The Input Element is a fundamental way to capture text-based personalization from a user.

<figure><img src="/files/ZwqPFk09brOzU7FUxNSk" alt=""><figcaption></figcaption></figure>

The element can be configured to appear in one of three ways:

* **Single-Line Input**: A standard text field for single-line entries like a name or number.
* **Multi-Line (Text Area)**: A single block of text where users can type multiple lines and paragraphs. This is ideal for blocky text, such as a custom message on a blanket tag.
* **Multi-Line (Individual Inputs)**: A series of separate single-line text fields, which is useful when each line needs independent validation or positioning.<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vu-custom.gitbook.io/vu-custom/onboarding/configuring-product-templates.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.