Variant Types Overview

Each non-control variant in Split Test Pro changes a page in one of two ways: with code (CSS, JavaScript, or both) or with a URL redirect. CSS and JavaScript combine freely in one variant; a redirect stands alone. You don’t pick a type upfront — the Variants step has a tab for each: CSS, JavaScript and URL redirect.

This page is a tour of what each one is for so you know which to reach for.

The Three Change Types

Type	What it does	When to use it
CSS	Adds a <style> tag to the page’s <head>. On a visitor’s first page view it applies once the experiment configuration arrives; on repeat views it applies at once from the configuration cached in the browser.	Any visual change: color, size, position, hide/show, image swap. The default for most tests.
JavaScript	Appends a <script> to <body>. It runs once per page view.	Anything CSS can’t do: changing text content, adding/removing elements, firing events, conditional logic.
URL redirect	Sends the visitor to a different address.	Comparing two distinct pages — different landing pages, different funnels.

Inline Code or Load from URL instead

On the CSS and JavaScript tabs you either write the code in the editor or turn on the Load from URL instead switch, which replaces the editor with a URL field:

• Inline — write the code in the editor. Best for short, focused changes. Saved with the experiment.
• Load from URL instead — point at a file you host (for example on your CDN). Better for long, reusable or separately maintained code, or when you want to update the variant without editing the experiment.

The URL must be an absolute https:// address; anything else is refused when you save. Inline is the right choice unless you have a specific reason to host the file yourself.

CSS Variants

CSS is the default for a reason. It’s:

• Fast — on repeat page views it applies straight from the cached configuration, as the script loads.
• Safe — invalid CSS doesn’t crash the page; it just doesn’t apply.
• Easy to reason about — every browser DevTools tells you exactly what’s happening.

Use CSS for visual changes: button color, font size, hide/show, layout tweaks via flex order, image swaps via background-image. Most of your experiments will be CSS. See CSS Variants for patterns and how-to.

JavaScript Variants

JS is for when CSS isn’t expressive enough:

• Changing text content — the hero headline copy, button labels.
• Adding or removing DOM nodes — inserting a banner, removing a section.
• Conditional logic — show this thing if the visitor is logged in, otherwise show that.
• Firing events — push an analytics event when the variant becomes active.

Variant JavaScript runs once per page view and is not wrapped in error handling — if your code throws, the rest of your snippet doesn’t run. Test thoroughly. See JavaScript Variants.

Redirect Variants

A redirect variant sends the visitor to a different address once they’re assigned to it. On the URL redirect tab you choose a Full URL or a Find & replace rule on the current path.

Use a redirect when you want to compare two pages that are too different to express as inline edits — a complete landing-page redesign, a holiday-themed product page vs the regular one, a different funnel entirely. See Redirect Tests.

In the editor a variant is either a redirect or code. If a variant has a saved redirect and you switch to the CSS or JavaScript tab, the redirect is removed when you click Save; Cancel brings it back.

Combining Types in One Variant

CSS and JavaScript combine in one variant. Common combinations:

• CSS + JS — adjust styling and fire a custom event. The CSS handles the visual; the JS pushes the event for downstream tools.
• CSS + JS — change a layout via CSS and update copy via JS. (You can’t change text with CSS alone.)

A redirect stands alone: give a redirecting variant no CSS or JavaScript.

Most variants use just one. Combine when there’s a clear reason.

Picking the Right Type — A Decision Tree

1. Does the change involve sending the visitor to a different URL? → URL redirect.
2. Otherwise, can you express the change with CSS rules alone? → CSS.
3. Otherwise, you need JavaScript. (And maybe CSS too.)

Default to CSS. Reach for JS when CSS hits its limits. Reach for redirects when you’re testing fundamentally different pages.

Next Steps

• Write your first CSS variant: CSS Variants.
• See what JS variants look like in practice: JavaScript Variants.
• Set up a full-page A/B test via redirect: Redirect Tests.