A styles test applies a CSS blob, and optionally a JavaScript blob, per group, on the theme you already have. Nothing to build in Shopify, no second theme, no template to duplicate. It is the most capable of the content tests and the only one that can take a storefront down.
Setting one up
Leave one group empty — that group is your store as it is, and is normally the control. Give each other group the CSS that defines it.
CSS is applied in the document head before the page is shown, so there is no flash of the original styling. JavaScript runs once the group has been decided.
Use the element picker to get a selector rather than typing one out of devtools. The same rule applies here as to content tests: a selector that stops matching does not error, it simply does nothing, and the group then reports as “no different” when it was never applied at all.
Prefer CSS. Genuinely.
Most questions worth asking — is this button big enough, does this section need more room, is the badge too loud — are CSS questions. CSS cannot throw, cannot loop, and cannot leave a page half-built.
JavaScript can do all three, on somebody’s storefront, to real shoppers. Your code runs wrapped so a thrown error cannot stop the page being revealed, but that is a floor rather than a safety net: it stops your mistake blanking the store, not from doing whatever else it did first.
If you do write JavaScript
- Make it idempotent. It may run alongside other apps re-rendering the same DOM. Write it so running twice is harmless.
- Do not touch the cart or the checkout. Changing what a shopper is charged from a browser is not something this test type can do safely — that is what offer and price tests are for, and they do it server-side for exactly this reason.
- Check the console on your own storefront. Open the preview link, press F12, and look for a red error mentioning zinx-signal before you start the test rather than after.
What it is good at
Layout and emphasis questions where the content is already right. Button size and colour. Spacing around a section. Whether a sticky add-to-cart bar earns its place. Reordering blocks that are already on the page.
What it is poor at is anything a theme should own permanently. If the honest answer is “this page should be laid out differently”, a template test compares two real templates and leaves you with something you can publish, rather than a stylesheet served by us forever.
Before you start
- Open a preview link per group. Save first — preview reads what is saved, not what is on screen.
- Check it on a phone, where your theme’s DOM may differ.
- Run Check setup on the Preview tab. It catches a stylesheet with unbalanced braces and JavaScript that will not parse, before either reaches a shopper.
- Check the URL rules on Targeting. An empty list means every page of your store, which for a stylesheet is usually right and occasionally very wrong.
When it wins
Move the winning CSS into your theme and end the test. Serving it from us permanently means every shopper waits on our script for a change that belongs in your stylesheet — and a test left running forever is a dependency you did not mean to take.