> 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/variations.md).

# Variations

A variation is a saved set of choices for a template: one layout, one set of variable values, one regional selection. It is how a template stops being a design and becomes a finished image you can link to.

{% hint style="info" %}
The DAM has its own idea of variations - saved transformations of an asset, such as a resize or a format change - shown in the same [Variations](/digital-asset-management-dam/library/assets/asset-details-window/asset-information-tabs/variations.md) tab. A template's variations live there too, but they are produced by filling in the template rather than by transforming a file.
{% endhint %}

### Creating a variation

You can start from any of these:

| From                       | How                                                                               |
| -------------------------- | --------------------------------------------------------------------------------- |
| The templates list         | Hover a template and click **Create variation**                                   |
| The manage variations page | Click **Add variation**                                                           |
| The DAM                    | Open the template asset, go to its **Variations** tab and click **Add variation** |

Then:

1. Choose the **Layout** you want this variation to render. The selector appears only when the template has more than one layout.
2. Fill in the fields on the right. The preview updates as you type.
3. Adjust **Layout color** if this variation needs a different background.
4. Pick a regional variant if the template is localized. See [Regional settings](/studio/template-builder/regional-settings.md).
5. Click **Save variation** and give it a name.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2Fx5NiwaMc0aacG2KnYblh%2F26-variation-builder.png?alt=media&amp;token=460ac337-dbff-4604-9ea0-d6eb22332048" alt=""><figcaption></figcaption></figure>

The builder's header has two more controls beside the save button. Hover them for their names:

| Control       | What it does                                                         |
| ------------- | -------------------------------------------------------------------- |
| **Copy link** | Copies the link to the image as currently filled in, before you save |
| **Preview**   | Opens that image in a new browser tab                                |

When you reopen a saved variation with **Edit**, the save button reads **Update variation** instead. It saves your changes over that variation, with its current name filled in for you to keep or change.

### Filling in the fields

Each variable in the template becomes one field, matched to its type: a text box for a text placeholder, a color picker for a color, an image field with a picker for an image source.

Fields bound to **Asset metadata** are read-only and carry a small chip naming the metadata field behind them, so you can see where the value comes from rather than wondering why you cannot type in it.

#### Images that need a background-removed version

A template can require an image layer to use the background-removed version of its picture, so that no variation ever renders a product with its own background still attached. See [Image layers](/studio/template-builder/building-a-template/image-layers.md#requiring-the-background-removed-version).

Pick an asset with no background-removed version into one of those fields and a warning appears beneath it: **This image has no background-removed version. The variation will not render until one is created.** The preview stays empty and says the same thing, naming how many pictures are at fault.

Saving is still allowed, and a notice on save names the layers that will not render. That is on purpose. A variation you were stopped from saving is work lost, while a saved one starts rendering by itself the moment the missing version is created.

Until then the variation reads **Did not render** in place of its thumbnail on the **Manage variations** page, because that thumbnail *is* the render. It fills in on its own once the picture has a background-removed version. There is nothing to redo and nothing to re-save.

### Manual override

**Manual override** turns those read-only fields into editable ones. Switch it on when a particular output needs a value that differs from the asset's metadata.

| **Manual override** | What renders                                                                                              |
| ------------------- | --------------------------------------------------------------------------------------------------------- |
| Off                 | Values are read from the asset's metadata each time the image is rendered, so the image follows the asset |
| On                  | The values you typed are saved with the variation and used as they are                                    |

Off is the better default: it keeps a whole set of images correct when the product data changes.

### Layout and layout color

**Layout** picks which output size this variation renders. To publish the same content at several sizes, save one variation per layout.

**Layout color** overrides the canvas background for this variation only, leaving the template alone.

Both choices travel in the variation's link: `$layout` carries the layout's slug, and `$layout_color` a hex color whose `#` is encoded as `%23`, as in `?$layout=square_post&$layout_color=%231b1b1b`. **Copy link** builds this for you - see [the render URL](/developers-headless/studio/template-builder/render-url.md) for the rest.

### Managing variations

**Manage variations** opens a page for one template, showing the original alongside every variation saved from it.

| Control           | What it does                                                                                                                  |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Search            | Filters by variation name                                                                                                     |
| Sort              | Newest first, oldest first, name A to Z, name Z to A, largest first, smallest first                                           |
| **Add variation** | Starts a new one                                                                                                              |
| **Select**        | Turns on multi-select for deleting several at once. While it is on, the button reads **Done**; click it to leave multi-select |

Hover a variation for its actions:

| Action        | What it does                                         |
| ------------- | ---------------------------------------------------- |
| **Copy link** | Copies the image link to your clipboard              |
| **Open**      | Opens the rendered image in a new tab                |
| **Download**  | Saves the rendered image                             |
| **Edit**      | Reopens the variation builder with its values loaded |
| **Delete**    | Removes the variation after a confirmation           |

The page is deep-linkable: the search text and sort order live in the URL, so a filtered view can be shared or bookmarked.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FsDujsTWFsEII0QGxKUNi%2F27-manage-variations.png?alt=media&amp;token=eacf2b7a-2599-484f-a6a7-130117b6d2e2" alt=""><figcaption></figcaption></figure>

### Where variations appear

* On the **Manage variations** page for that template.
* In the template's **Variations** tab in the DAM, next to the asset itself.

Deleting a variation removes the saved set of choices. The template and the assets it points at are untouched.

### Where to go next

* [Using a rendered template](/studio/template-builder/using-a-rendered-template.md) for what to do with the link.
* [Variables](/studio/template-builder/variables.md) if a value you need is not offered as a field.
