# Working with Variables in Variations
Created: 28.11.2023\
Updated: 28.11.2023\
Author: Alexander Sugakov
Any HTML, CSS, or JS code element can be assigned a variable in the Gravity Field platform. Variables play a crucial role in streamlining campaign customization, allowing business users to adjust campaigns without relying on developers. This functionality empowers users to replace text, images, colors, and other design elements directly within the platform's interface. The use of variables facilitates the rapid templating of campaign variations, providing a more dynamic and user-friendly customization experience. For more details about templates, refer to the article [working-with-templates](https://developer.gravityfield.ai/lang/en/platform-interface/working-with-templates "mention")
## Creating Variables
To create a variable, you need to select the desired element, right-click on it, and choose "Add Variable" from the context menu.
In a panel opened on the right, you need to provide a name for the variable, configure its type, and set the parameters. The parameters of variables depend on the selected type.
## Variable Types
For all variable types, you can configure the variable's name, type, and a tooltip that will be displayed in the popover when hovering over the variable.
In the Gravity Field platform, the following variable types and additional parameters are available (in addition to the basic ones):
| Variable Type | Available Parameters | Campaign Type |
| --------------------------------------- | ---------------------------------------------------- | ------------- |
| Text | Default Value | Front / API |
| Image | Default Value | Front / API |
| Dropdown List | Values for the list in the format key-value | Front / API |
| Color Palette | — | Front / API |
| Number | Default Value, Maximum and Minimum value constraints | Front / API |
| Recommendation Strategy | Default Value | Front |
| CSS Selector | Default Value | Front |
| Social Proof Data (Product Performance) | Default Value | Front |
## Working with Variables
When you hover the mouse cursor over a variable, icons on the right side of the field allow you to delete or reconfigure the variable, and a tooltip appears above the variable's value.
**Text** — a variable that allows you to enter arbitrary text.
**Image** — a variable that allows you to upload an image (video) up to 6 megabytes. The following file formats are supported: `tiff, pjp, pjpeg, jfif, tif, gif, svg+xml, bmp, png, jpeg, svgz, jpg, webp, ico, mp4`
**Dropdown List** — a variable that allows you to choose one of the pre-configured values set when creating the variation.
**Color Palette** — a variable that allows you to choose a color from the palette or specify it in HEX or RGB formats. You can also select the color transparency level.
**Number** — a variable that allows you to enter any number. When configuring the variable, you can set the maximum and minimum allowable values.
**Recommendation Strategy** — a variable that allows you to choose any of the recommendation strategies created in the section.
**CSS Selector** — a variable that allows you to enter an arbitrary CSS selector.
**Social Proof Data (Product Performance)** — a variable that returns Social Proof data for a product. The variable will only return data on the product page. It will provide information on sales or views of the product for the selected period. Available periods: day, two days, week, two weeks, month.
## Grouping Variables
Variables can be grouped for convenience. Variable groups can be collapsed and expanded in the interface. A new variable group is created by clicking the "+ Variables Group" button.
For a group, you can configure the name, color, and also check the variables that will be added to it.
Settings for the created group can be managed by clicking on the button with switches that appears when you hover over the group name.
