> 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/custom-code-testing-overview.md).

# Custom Code Testing Overview

What custom code experiments do in Elevate A/B Testing, when to use one instead of another experiment type, and what you need before you start.

***

A custom code experiment runs your own JavaScript and CSS on your storefront for a share of visitors, and measures what it does to your numbers.

It is the most flexible experiment type and the least guarded. Elevate A/B Testing delivers your code and tracks the result. What the code does is yours.

### How it works

1. You write JavaScript and CSS for each variation.
2. You choose which pages the code runs on.
3. Visitors are split between variations, and each one gets that variation's code injected into the page.
4. Elevate A/B Testing tracks behavior and attributes conversions to the version each visitor saw.

Code runs client side, after the page loads. Each variation's code is independent.

Your control can also carry code. The **Control** card has its own JavaScript and CSS fields, so you can compare two implementations rather than an addition against nothing. Leave them empty and the control is your store as it is today.

### When to use it

| Use a custom code experiment when                                                    | Use something else when                                                                    |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| The change needs logic, not just different content                                   | You want to change text, images, or styling on an existing page. Use a Content Experiment. |
| You are adding an element your theme does not have, such as a sticky add to cart bar | You want to compare two versions of a page template. Use a Page Experiment.                |
| You want to test adding or removing a third party script                             | You want to change price, shipping rates, or product offers. Those have dedicated types.   |
| You are testing behavior that depends on cart state, time, or visitor context        | Someone else has to maintain it and nobody on the team writes JavaScript.                  |

Custom code is the type to reach for when nothing else fits, not the first one to reach for.

### Requirements

* Elevate A/B Testing installed on your store.
* The Elevate A/B Testing theme extension enabled. Custom code experiments inject code into the page, so the extension is required and the experiment cannot launch without it.
* JavaScript and CSS written and tested before you set up the experiment.

Custom code testing works on all Shopify plans.

### What to know before you start

**Your code runs on your live store.** A bug in a variation affects real visitors and real orders for as long as the experiment runs. Prototype in browser dev tools first, on your actual storefront, and check the console for errors.

**Keep it light.** Heavy DOM work or a large injected script slows the variation down. Your control has no such overhead, so a slow variation can lose on performance rather than on the idea you were testing.

**Be precise about where it runs.** Code running on pages you did not intend is the most common way a custom code experiment causes damage. Exclude checkout and account paths unless you have a specific reason not to.

**Winning means implementing.** If a variation wins, the code has to go into your theme properly. The experiment does not make it permanent.

### Next steps

* Create a Custom Code Experiment
* Preview and QA a Custom Code Experiment