Variables

Variables are created by users with more technical expertise and allow business users to complete the template without the need for coding.

Creating Variables

To create a new variable, click the "New Variable" button. You'll need to enter the name, type, tooltip to display to the business user, and placeholder.

Variable Types:

• Text: Business users can enter text, useful for changing text content within the template.

• Number: Business users enter a number, for instance, for sizes in pixels or percentages.

• Color: Business users select a color, used for text or border colors.

• Image: Business users can change the image URL or upload a new one, used in banners, for example.

• Options: Business users can select from a set of options.

• Product Property: Product properties like name, price, and custom properties that were added.

• Product Property Options: Display product properties for the business user to select from, used for affinity-based recommendations.

• List: Define attributes for the list that the business user will complete. For example, for a banner slider, each slide could have an image, text, and button color.

To modify a variable, hover over it and press the icon. Here you can also delete the variable.

The variable will be used in HTML, JS, CSS, and JSON editors using the format {{VARIABLE NAME}}.

Grouping Variables: Variable groups allow you to organize and group different variables. For instance, you can have one group for sizes and another for text, making it easier for the business user to find the variable they want to modify. You can create a new group by clicking the "New Group" button and entering the name.

When creating or editing the variable, you can select the group it belongs to or drag and drop it into the corresponding group. You can also arrange groups and variables within the group through drag and drop.

Completing Variables

As a business user, you can complete or modify variable values according to each type. In the left preview, you can see how the content updates as you modify the variables. You can also see how the content will look on your website even if the variant isn't live yet by clicking "Preview on Site."