Testing a Whole Page or Theme

When to use a page test

Button text and headlines can be changed on top of a live page. A new layout can't, because too much of the page changes. For that, build the second version properly with the tools you already use, then let EarlyCRO split visitors between the two. Choose A whole page layout when you create a test.

Shopify: an alternate template

This is the cleanest way to test a layout on Shopify, and it needs no code.

1. Open your theme in the Shopify theme editor and add a new template based on the page, called something like ecro-b.
2. Build the new layout with sections. Visitors can't see it yet.
3. In EarlyCRO, create a test, choose the page, and pick the template.
4. Click Check both pages. Shopify shows the normal page if a template name is wrong, so this catches a typo before it wastes a month.
5. Start the test. Half of visitors get the new template.

When it wins, assign the new template in Shopify, then complete the test.

Shopify: a whole theme

For a change that runs through the whole store, duplicate your live theme, change the copy, and choose A whole theme when you create a test.

• Shopify doesn't cache preview themes, so version B can load a little slower, which can count against it.
• Shopify can keep a visitor on a preview theme through a cookie. Don't delete the theme for 30 days after a test ends.

If your change fits inside one template, use a template test instead.

Next.js

With the @earlycro/next middleware, build the new layout as its own route, like app/variants/home-b/page.tsx, and give that path to the test. The server swaps the page at the original address, so there's no redirect and no flash. For smaller changes, render both inside one page with getVariant.

WordPress and everything else

1. Duplicate the page and build the new layout, at an address like /home-b.
2. Make sure the EarlyCRO script is on it, and point its canonical tag at the original page.
3. Create the test with that address as version B.

Half of visitors get sent there before the page paints, keeping their UTM and ad parameters. EarlyCRO checks version B is on your own site, because a visitor can't be followed anywhere else.

Good to know

• Search engine crawlers always get the original page.
• Someone who reaches version B directly isn't counted, because they weren't randomly assigned.
• If visitors stop splitting evenly, the test page warns you. It usually means version B is broken or missing the script.
• On a redirect, GA4 can report the visitor's source as direct, because the browser replaces the referrer. EarlyCRO keeps the real one, and your test result isn't affected.