# Variations URL: https://docs.ablyft.com/guides/experiments/variations/ > Variation types, the baseline "Original", how to create, edit, clone and delete variations, and how to build redirect and multi-page experiments. A variation is one version of your page that takes part in an experiment. Every experiment compares at least two variations: the **baseline** (the unchanged page) and one or more changed versions. > Creating, editing, cloning and deleting variations requires the role member, admin or owner. ## The Variations card The **Variations** card on the experiment page ("WHAT changes do you want to test?") lists all variations: | Column | Description | | ---------------------- | --------------------------------------------------------------------------------------------------- | | Color dot | A color that identifies the variation. ABlyft assigns it automatically by the position in the list. | | **Name** | Name and description. The baseline carries the badge **Baseline**. | | **Type** | The variation type. Hover over it to see when to use it. | | **Traffic allocation** | The share of the experiment's traffic. | | **Size** | The combined size of the code and changes of the variation. | | **Last updated** | When and by whom the variation was changed. | ## The baseline "Original" When you create the first variation of an experiment, ABlyft also creates the variation **Original** automatically. It has the type **Unchanged** and is marked as **Baseline**. All other variations are compared against the baseline in the results. If you delete the baseline, the oldest remaining variation becomes the new baseline. ## Variation types | Type | Use it to | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Visual Editor** | Make quick visual or content changes without writing code: headlines, images, colors, layouts or buttons on your existing page. See [Visual editor](https://docs.ablyft.com/guides/experiments/visual-editor/). | | **Redirect** | Test an entirely new landing page or different URL parameters. Visitors in this variation are redirected to the URL you provide. | | **Code** | Add your own JavaScript and CSS, for dynamic changes or changes beyond what the Visual Editor can do. | | **Unchanged** | Show the page exactly as it is. Use it as the original (control) variation. | | **FullStack** | Run your own code anywhere in your application. Only available if the experiment has **Enable FullStack for this experiment** switched on. See [FullStack](https://docs.ablyft.com/developers/application-integration/fullstack/). | | **Shopify Theme** | Show a draft theme of your Shopify store. See [Shopify variations](https://docs.ablyft.com/guides/experiments/shopify-variations/). | | **Shopify Template** | Show an alternative template for a page type of your Shopify store. See [Shopify variations](https://docs.ablyft.com/guides/experiments/shopify-variations/). | ## Create a variation 1. On the experiment page, click **new variation** in the **Variations** card. 2. Step **General**: enter a **Name** (ABlyft suggests `Variation #1`, `Variation #2` and so on) and optionally a **Description**. For the first variation of an experiment, the note explains that **Original** is created automatically. 3. Step **Type**: choose how you want to build the variation. Click an option to read when to choose it. 4. Click **Create variation**. What happens next depends on the type: * **Visual Editor**: your example URL opens in the editor. See [Visual editor](https://docs.ablyft.com/guides/experiments/visual-editor/). * All other types: the variation settings open, where you enter the redirect URL, your code or the Shopify details. When you create or delete a variation, ABlyft distributes the experiment's traffic evenly across all variations again. Check **Traffic Split & Distribution** in the [experiment settings](https://docs.ablyft.com/guides/experiments/create-experiment/#traffic-split--distribution) if you need an uneven split. ## Edit a variation Every row has an **Edit** button. For a **Visual Editor** variation it opens the editor, for all other types it opens the variation settings. The menu next to the button offers: | Action | Description | | ------------------- | -------------------------------------------------------------------------------------------------------------- | | **Edit settings** | Opens the variation settings for every type, including **Visual Editor** variations. | | **Show in browser** | Opens the variation on your example URL. Only available while the experiment is in **Preview** or **Running**. | | **Clone** | Creates a copy of the variation. The copy is never the baseline. | | **Delete** | Deletes the variation. | ### Settings The variation settings are grouped into sections: | Section | Content | | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | **General** | **Name**, **API Name** (only needed for advanced users), **Description** and **Type**. | | **Redirect to a different URL** | Only for type **Redirect**. | | **Code** | For the types **Code**, **FullStack** and **Visual Editor**. | | **FullStack** | Only for type **FullStack**: custom key/value properties. | | **Shopify Theme** / **Shopify Template** | Only for the Shopify types. | | **Metadata** | Key/value pairs, only visible if your project defines variation metadata under **Project → Settings → Metadata**. | ### Code The **Code** section contains **JS code**, **CSS code** and **Reset JS code**, plus **Settings from Visual Editor**: the JSON generated by the Visual Editor, required for the type **Visual Editor**. Edit it only if you know what you are doing. What each field does, the **Code Helper**, the run order, the 32,768 character limit and the code of the whole experiment (**Experiment Level Codes**) are described in [Custom JavaScript](https://docs.ablyft.com/developers/application-integration/custom-javascript/). > **Wait for elements:** The code of a variation can run before the page is fully built. Do not rely on `document.querySelector()` finding your > element right away. Use [`ablyftTools.waitForElement`](https://docs.ablyft.com/developers/reference/javascript-api/tools/#waitforelement) instead. ## Redirect variations With the type **Redirect**, visitors in the variation are sent to another URL. This is useful for split URL tests, where the variation is a completely different page. Example: an experiment runs on `https://example.com/overview`, and the variation should show `https://example.com/overview2`. 1. Create a variation of the type **Redirect**. 2. In the section **Redirect to a different URL**, enter the **Redirect URL**. This is either a full URL (`https://...`) or a query string that starts with `?`, to test URL parameters. 3. Keep **Preserve query parameters** checked (default) if the parameters of the current URL should be passed on. If both URLs contain the same parameter, the value of the redirect URL wins. 4. Save. The visitor is redirected as early as possible and ABlyft hides the page meanwhile to avoid flicker. Loop protection and other details: [`redirect`](https://docs.ablyft.com/developers/reference/javascript-api/tools/#redirect). > **Install the snippet on the target page:** The snippet must also be installed on the redirect target, otherwise goals reached there cannot be measured. ## Multi-page (funnel) experiments Sometimes one experiment needs different changes on different pages, for example a banner on the homepage and changed texts on product pages. You do this with one experiment, several [pages](https://docs.ablyft.com/guides/audiences-and-delivery/pages/) and variation code that checks where it is running. **Any entry page.** The visitor sees the changes on every targeted page: 1. Attach all relevant pages to the experiment (**Pages** card), for example "Homepage" and "Product Pages". 2. In the variation code, branch by page: ```js const path = window.location.pathname; if (path === '/') { // Code for "Add banner" } else if (path.startsWith('/product/')) { // Code for "Text changes inside boxes" } ``` Instead of the path you can also check a CSS class, whether an element exists or a data layer value. **Specific entry page.** The visitor should see the product page changes only after having seen the homepage banner: 1. In the variation code of the homepage, store a flag when the change is applied: ```js window.localStorage.setItem('homepage_banner_added', 'true'); ``` 2. Create an additional page, for example "Product Pages (after homepage banner)", with the product page URL rule. Under **Advanced Targeting**, enter a condition that checks the flag: ```js return window.localStorage.getItem('homepage_banner_added') === 'true'; ``` 3. Attach this page to the experiment instead of the plain product page, and keep the product branch in your code. > The flag only works on the same domain. For visitors who switch domains, use the > [bucketing URL parameter](https://docs.ablyft.com/developers/reference/javascript-api/tools/#getsetbucketingurlextension) to hand over the > assignment, or contact ABlyft support. ## Delete a variation Open the menu of the variation and click **Delete**. ABlyft redistributes the traffic automatically and, if you deleted the baseline, makes the oldest remaining variation the new baseline. Check the traffic split afterwards. Remember that an experiment needs at least one variation to be started, see [Before you can preview or start](https://docs.ablyft.com/guides/experiments/start-pause-stop/#before-you-can-preview-or-start). ## Next steps - [Visual editor](https://docs.ablyft.com/guides/experiments/visual-editor/): Build a variation by clicking. - [Preview & QA](https://docs.ablyft.com/guides/experiments/preview-and-qa/): Check your variations before the start. - [Traffic allocation](https://docs.ablyft.com/guides/audiences-and-delivery/traffic-allocation/): Distribute visitors across variations. - [JavaScript tools](https://docs.ablyft.com/developers/reference/javascript-api/tools/): Helper functions for variation code.