> For the complete documentation index, see [llms.txt](https://docs.elevateab.com/elevate-helpcenter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elevateab.com/elevate-helpcenter/custom-code-testing/create-a-custom-code-experiment.md).

# Create a Custom Code Experiment

Step by step walkthrough for creating a custom code experiment in Elevate A/B Testing, including code entry, page targeting, and preview.

***

Six steps, from writing the code to launching.

**Before you start:** the theme extension enabled, and your JavaScript and CSS written and tested in browser dev tools on your live storefront.

Open **Experiments**, select **New Experiment**, then **Custom Code Experiment**.

### Step 1: General Info & Goal

Name the experiment and choose the metric that decides the winner.

Enter an **Experiment name**. **Description**, **Hypothesis**, and **Assets** are optional. Assets take images and documents up to 10 MB and videos up to 100 MB.

Under **What do you want to measure?**, choose your goal. **Revenue per visitor** is recommended.

Select **Browse all metrics** for the full list, or **Add Custom Metric** to track something Elevate A/B Testing does not measure by default, such as a click on the element your code adds. See Custom Events.

### Step 2: Set Variations

Choose the **Number of Variations**, up to five including your control.

Each card, including **Control**, has two code fields:

| Field                 | What it does                                                                                               |
| --------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Custom JavaScript** | Runs on the page for visitors in this variation. Use it to add elements, change behaviour, or apply logic. |
| **Custom CSS**        | Styles injected for this variation. Use it to restyle, hide, or reposition elements.                       |

Leave the control's fields empty to compare against your store as it is. Fill them in to compare two implementations against each other.

Use the expand control on a field to edit in a larger editor.

Your JavaScript receives a `context` object describing the experiment. Expand the note under the code fields in the app to see what it contains.

#### Page targeting

**Run on all pages** is on by default. The code runs everywhere, and **Exclude pathnames** is where you keep it out of specific paths. Add one path at a time with the **+** control.

Turn **Run on all pages** off to specify where the code should run instead.

Wildcards match multiple pages. `/products*` matches `/products`, `/products/123`, and every other product page.

Be deliberate here. Code running where you did not intend is the main way a custom code experiment causes damage rather than data. Exclude `/cart` and checkout paths unless the code is meant for them.

### Step 3: Traffic Allocation

Set the split between variations with the slider. Even is the default.

**Isolate traffic for this experiment** is optional and off by default. It reserves a share of your traffic exclusively for this experiment, so visitors in that group enter no other experiment. See Traffic Isolation.

### Step 4: Audiences

Optionally narrow who enters, by device type, visitor type, UTM parameters, traffic source, or country. Select **Create Custom Audience** for anything more specific.

Leave this empty unless the hypothesis is about a particular audience. See Audience Targeting.

### Step 5: Optional Settings

**Click-Through Rate Tracking** is off by default. Turn it on to track clicks on specific buttons or links inside the experiment, which is useful when your code adds a CTA and you want to know whether anyone used it.

Your variations are already set at this point. This step layers on top of them and is optional.

### Step 6: Review Experiment

Check everything, then select **Create Preview Experiment**.

The experiment moves into **Preview**. Nothing is served to real visitors yet. QA it, then select **Launch Experiment**.

Select **Save as Draft** at any point to come back later.

### Next steps

* Preview and QA a Custom Code Experiment
* Reading Results and Ending a Custom Code Experiment