Variant Types Overview
A quick tour of what each variant in Split Test Pro can change — CSS for visual tweaks, JavaScript for dynamic logic, and full-page redirects — and when to reach for each.
Each non-control variant in Split Test Pro can change a page in three ways: CSS, JavaScript, or redirect. They’re not mutually exclusive — a single variant can use any combination — and you don’t pick one upfront. The variant editor exposes all three sections; you fill in whichever you need.
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 | Injects a <style> tag into the page’s <head> before paint. | Any visual change: color, size, position, hide/show, image swap. The default for ~80% of tests. |
| JavaScript | Appends a <script> to <body> that runs synchronously. | Anything CSS can’t do: changing text content, adding/removing elements, firing events, conditional logic. |
| Redirect | Sends the visitor to a completely different URL. | Comparing two distinct pages — different landing pages, different funnels. |
Inline vs External
Both CSS and JavaScript offer two ways to provide the content:
- Inline — paste the code directly into the variant editor. Best for short, focused changes. Versioned with the experiment.
- External URL — point at a hosted file (e.g., on your CDN). Better for long, reusable, or co-engineered scripts.
You provide one or the other, not both. Inline is the right choice unless you have a specific reason to host externally (e.g., you want to update the variant content without editing the experiment).
CSS Variants
CSS is the default for a reason. It’s:
- Fast — injected synchronously before the page paints, so visitors never see a flash of the original.
- 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.
JS variants run synchronously and are not wrapped in error handling — if your code throws, it can break the page for the visitors in that variant. Test thoroughly. See JavaScript Variants.
Redirect Variants
A redirect variant sends the visitor to a different URL the moment they’re bucketed. The redirect happens before any other variant content applies.
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.
Combining Types in One Variant
You can use more than one type per 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.)
- Redirect alone — the redirect short-circuits everything else, so don’t bother filling in CSS or JS for a redirecting variant.
Most variants use just one. Combine when there’s a clear reason.
Shopify Checkout Block Variants
The data model also supports checkout block variants for Shopify Plus stores running checkout customization. Checkout block variants test structured UI components (media, text, lists, badges) in the Shopify checkout via Checkout UI Extensions. This is a Shopify-only feature with its own workflow — see Shopify Checkout Blocks.
Picking the Right Type — A Decision Tree
- Does the change involve sending the visitor to a different URL? → Redirect.
- Otherwise, can you express the change with CSS rules alone? → CSS.
- 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.
Ready to start testing?
Install Split Test Pro and run your first experiment today.