Variant Types Overview

Each non-control variant in Split Test Pro has four test types, always listed in this order on the Variants step: Code · CSS & JS, URL redirect, Theme test and Template test. Tick a type to use it and its panel opens; a variant can use more than one.

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

Four Test Types

Type	What it does	When to use it
Code · CSS & JS	CSS adds a <style> tag to the page’s <head>; JavaScript appends a <script> to <body> and runs once per page view. On a visitor’s first page view they apply once the experiment configuration arrives; on repeat views at once from the configuration cached in the browser.	Any visual change (CSS) — color, size, position, hide/show. Anything CSS can’t do (JavaScript) — text, adding or removing elements, events. The default for most tests.
URL redirect	Sends the visitor to a different address.	Comparing two distinct pages — different landing pages, different funnels.
Theme test	Shows the visitor one of your store’s unpublished Shopify themes instead of the live one. Shopify only.	A redesign or a new theme, compared with the live theme across the whole store.
Template test	Shows the visitor an alternate Shopify template for products, collections, pages or blog posts. Shopify only.	A different layout for one page type, on every item or only the ones you pick.

On an HTML site the variant shows the first two rows only.

How the Rows Work

Each test type is one row: a checkbox, an icon, the label and a chevron. Ticking the checkbox turns the type on and opens its panel; clicking the label or chevron opens or closes the panel without changing the tick. Unticking a saved type removes it from the variant when you Save the card.

A variant is ready to launch when at least one type is ticked and every ticked type is ready:

• Code · CSS & JS — some CSS or JavaScript.
• URL redirect — a destination (Full URL) or a text to find (Find & replace).
• Theme test — a theme chosen, with the Split Test Pro app embed on in it.
• Template test — a template chosen, and either All or at least one selected item.

The launch checks name whatever is still missing.

Inline Code or Load from URL instead

In the Code · CSS & JS panel, 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. In the URL redirect panel you choose Full URL or Find & replace on the current path. A Full URL redirect has a Keep query parameters switch, on by default for a new redirect, that carries the original page’s query string (campaign tags and the like) to the destination.

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.

Theme and Template Tests

On Shopify, two more types change what Shopify itself renders instead of editing the page:

• A Theme test shows variant visitors one of your unpublished themes while your live theme stays published. See Theme Tests.
• A Template test shows variant visitors an alternate template (such as product.alternate.json) on the products, collections, pages or blog posts you choose. See Template Tests.

Both make your winner permanent in Shopify — publish the theme, assign the template — rather than by copying code.

Combining Types in One Variant

A variant can combine any of the four. Common combinations:

• CSS + JS — change a layout via CSS and update copy via JS. (You can’t change text with CSS alone.)
• Theme test + Code — a new theme plus a small fix on top of it. The code runs on the variant theme.
• Theme test + Template test — a new theme with an alternate product template. The template list comes from your live theme, so the variant theme needs the same alternate template.

When a variant has more than one type, the script handles them in order on each page view: the code runs, then the visitor is sent to the variant theme if they aren’t on it yet, then to the alternate template, and the redirect fires once the visitor is on the right theme and template.

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

Picking the Right Type — A Decision Tree

1. Are you comparing two whole themes? → Theme test.
2. Are you comparing two layouts for a page type that Shopify templates control? → Template test.
3. Does the change send the visitor to a different URL? → URL redirect.
4. Otherwise → Code · CSS & JS: CSS if rules alone can express it, JavaScript (and maybe CSS) if not.

Default to CSS. Reach for JS when CSS hits its limits, and for the other three when you’re testing fundamentally different pages, themes or templates.

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.
• Test a theme or a template on Shopify: Theme Tests and Template Tests.