Tabs tab
The Tabs tab is a section within the detailed template editor where you build the primary UI for your customizer. Tabs function as containers or groups that organize the different customization options known as Elements, that a customer can interact with.
Essentially, tabs create the "scaffolding" for the customizer's appearance and user flow.
For example, a customizable shirt template might have separate tabs for "Color", "Sleeve Personalization", and "Logo". Each tab would hold the relevant elements, such as a color picker, a text input box, or an image upload option.
Key functions of Tabs include:
Organization: They provide spaces and grouping for different customization items in the template.
User Interface Structure: They are the main component used to build the physical layout of the customizer experience.
Interactive Model Views: Tabs can be linked to Perspectives, which are specific camera angles of the 3D model. When a user clicks on a tab, the model can automatically rotate to the relevant view, creating a more intuitive experience.
How to Configure Tabs for a New Template
Configuring tabs is a fundamental part of building a customizer. The process involves creating the tab itself and then populating it with the necessary customization elements.
Access the Template Editor
First, you need to be inside the detailed editor for the template you wish to configure.
From the Dashboard, navigate to Customizer > Templates.
Find the template you want to work on and click EDIT to open the detailed template editor.
Navigate to the Tabs Section
Inside the template editor, locate the Tabs option in the list of configuration areas. This is where all tabs for the template are managed.
Add a New Tab
In the Tabs section, click the Add a Tab button.
Click Save.
You may need to refresh the screen for the new tab to appear in the list.
Configure the Tab's Properties
Once the tab is created, click the Edit icon next to it to configure its details. You will see several fields:
Name: The display name of the tab that the end-user will see (e.g., "Select Color").
Code: An internal code used for referencing the tab in business logic or scripts.
Perspective: This dropdown links the tab to a specific camera view you have created in the Perspectives tab. When a user selects this tab, the 3D model will automatically rotate to this angle.
Description: A field for internal notes about what the tab is for.
Hidden: A checkbox to determine whether the tab should be visible or hidden in the customizer.
Add Elements to the Tab
A tab is simply a container; its functionality comes from the Elements you add to it.
Within the tab's edit screen, find the Elements section.
Click Add Element and select the type of customization option you want to add.
Select an element for the template:
List: One of the most common elements, used for choices like product colors, logos, or styles. It can be displayed as thumbnails, radio buttons, or a dropdown menu.
Input: Used to create a text box for the end-user to type in, such as for a name or number.
Image Upload: Creates a space for users to upload their own images to be applied to the product.
Color Picker: Adds a full-range color picker for selecting any hue or gradient.
Button: Adds a clickable button that can be linked to custom JavaScript logic.
After adding an element, you link it to a pre-configured element setup (e.g., a specific list of colors you created in the Lists module).
Organize with Element Groups (Optional)
If a single tab has many different elements, you can further organize them into groups.
Within the tab's edit screen, find the Element Groups section.
Click Add a Group, enter a name for the group, and click Save.
You can then assign elements to this group to keep the UI clean and structured.
After configuring all your tabs and elements, click Save to apply the changes to your template
Last updated