> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/studio/template-builder/variables.md).

# Variables

A variable is a part of the template you deliberately leave open. The design stays fixed; the headline, the price, the accent color or the product shot arrive when the image is rendered.

Every variable has a name you read, a slug that identifies it, a default value, and a source that says where its value comes from.

### Variable types

| Type             | Used on                             | What it replaces           |
| ---------------- | ----------------------------------- | -------------------------- |
| Text placeholder | text layers and text inside a shape | Words, in whole or in part |
| Color            | text layers                         | The color of the text      |
| Image source     | image layers                        | The picture in the layer   |

### Creating a variable

**From a layer:**

1. Hover the layer in the **Layers** panel and open its menu.
2. Choose **Add variable**. The **New variable** dialog opens.
3. Pick the **Type**, name it, check the slug, choose the **Source type**, and set a **Default value**.
4. Click **Create**.

**From inside the text editor**, for part of a line:

1. Double-click a text layer to open **Edit text**.
2. Select the words you want to parameterize.
3. Open the **Variable** menu and choose **Create new variable...**. The selected text is used as the default value.
4. Fill in the dialog and click **Create**.

The same **Variable** menu inserts a variable you already have, so one value can appear in several places.

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2F8xQZN7vgflM3TjsyK5hm%2F21-new-variable-dialog-sources.png?alt=media&amp;token=0ffa23ac-609f-464a-857c-96a9a11aeba9" alt="" width="375"><figcaption></figcaption></figure></div>

What **Source type** offers depends on how your project is set up, so the list you see may be shorter than the one described under **Where the value comes from** below.

### Name, slug and default value

| Field             | What it is for                                                                                                                                                                              |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Name**          | What you call it. Shown in the panels and in the variation builder. Two variables may share a name, but you are warned, because they become hard to tell apart                              |
| **Slug**          | The key that carries this variable's value when the image is rendered. Lowercase letters, digits and underscores. Filled in from the name until you edit it, and unique within the template |
| **Default value** | What renders when nothing else is supplied. For a color it is a color picker; for an image you can pick from your library                                                                   |

{% hint style="warning" %}
The slug is a contract, not a label. Whatever supplies a value - a saved variation, a link someone kept, or an application that fills the template automatically - identifies the variable by its slug. Change the slug and those values stop arriving, silently: nothing errors, the variable simply falls back to its default.

The editor warns you as you type, with a note that previously generated template and variation links using the old slug will stop working. Rename the variable freely; change the slug deliberately, and re-save anything that depended on it.
{% endhint %}

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FvwNqHCmPL6iT7EviV4qa%2F30-slug-change-warning.png?alt=media&amp;token=5a42c874-aef3-4f5a-98ce-c6bc99db6cc7" alt="" width="271"><figcaption></figcaption></figure></div>

### Where the value comes from

Text placeholders can draw on either source. Color and image variables are always **Manual**, because metadata supplies text.

| Variable type    | Manual | Asset metadata                          |
| ---------------- | ------ | --------------------------------------- |
| Text placeholder | Yes    | Yes, if the template has an image layer |
| Color            | Yes    | No                                      |
| Image source     | Yes    | No                                      |

Switching a variable's type away from text placeholder resets its source to **Manual**.

Your project decides which sources are on offer, so **Source type** may show fewer options than the table: a project can be set up to allow only one of them. **Asset metadata** also needs a signed-in DAM session, so it is absent when Template Builder has been opened inside another application that signed you in its own way. If a source you expect is missing and the template does have an image layer, ask your administrator which sources your project has enabled.

#### Manual

The template holds a default value, and a real value is supplied when the image is requested - by you in the variation builder, or by whatever asks for the image. Use it for anything a person decides: a campaign headline, a call to action, an accent color.

#### Asset metadata

The value is read from the metadata of an image already in the template, so the text follows the product rather than being retyped.

1. Add an image layer if the template has none. The option is unavailable without one.
2. Create a text placeholder variable and set **Source type** to **Asset metadata**.
3. Choose the **Source image**: the image layer whose asset holds the metadata.
4. Choose the **Metadata field**.
5. Check the **Resolved value** shown underneath. That is the value read from the current asset.

What you will notice afterwards:

* Swap the picture in the source image layer and the text follows it.
* In the variation builder these fields are read-only, showing the metadata field they are bound to, until you switch on **Manual override**.
* The value is resolved when the image is rendered, not when you save, so a metadata edit in the DAM shows up in the next render without touching the template.

**Which fields work.** A variable renders one value, so it reads fields that hold one: short text, long text, number, decimal, date, yes/no, geo point and attachment URI. Single select is listed but grayed out, and fields holding several values at once - **Custom Tags** among them - do not appear at all.

The list carries a note to that effect, so if a field you expected is missing, its type is why. Whichever field you pick, check the **Resolved value** underneath before moving on: an empty value on an asset you know carries that metadata means the variable will render its default instead.

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FZUBGbw1bfgBvSFCyQd8a%2F22-metadata-variable-binding.png?alt=media&amp;token=edf81b04-9577-4da7-8966-0874cc21081a" alt="" width="271"><figcaption></figcaption></figure></div>

### The layout color variable

Every template has one built-in variable, `$layout_color$`, holding the canvas background. It cannot be deleted, and it is what lets a single template be rendered on different background colors - including per variation.

### Seeing variables on the canvas

The last button in the canvas toolbar swaps every rendered value for its variable name, so you can see at a glance which parts of the design are open and which are typed in. See [Preview and save](/studio/template-builder/building-a-template/preview-and-save.md).

### The Variables tab

The **Variables** tab in the left rail lists the variables you have made, whichever layer each belongs to. Each row shows the variable's name, its slug and the layer it is bound to. Click one to open its settings, or use the cross to delete it. Deleting asks you to confirm first, so a stray click on the cross costs nothing. The built-in layout color variable is not listed, since there is nothing to configure and nothing to delete.

It is the fastest way to audit a template before handing it over: if a value should be fillable and is not on this list, it is hard-coded somewhere.

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2Ft0NngGCTL2cVUiSfem3Q%2F23-variables-tab.png?alt=media&amp;token=fca1317c-e136-47ef-890f-43bc3ddbcb49" alt="" width="239"><figcaption></figcaption></figure></div>

### Deleting a variable

Delete from the **Variables** tab or from the layer's variable list in the **Layers** tab. Either way you are asked to confirm before anything is removed. The layer keeps its appearance: a text placeholder reverts to the variable's default text, and a color variable leaves its color applied to the text it was styling. What you lose is the ability to change that value from outside the template.

### Where to go next

* [Variations](/studio/template-builder/variations.md) to fill the variables in and save the result.
* [Regional settings](/studio/template-builder/regional-settings.md) if metadata values vary by language or market.
* [Using a rendered template](/studio/template-builder/using-a-rendered-template.md) for what happens after the template is saved.
