Screenshots and Preview

Split Test Pro has two pre-launch sanity checks that exist outside the launch checklist: variant screenshots and the Preview URL banner. Both are easy to ignore and easy to misuse, but together they catch the most common rookie mistakes — broken selectors, typo’d targeting, variants that look fine in DevTools but wrong on the live page.

Variant Screenshots

Each variant gets an auto-captured screenshot when you set up the experiment. Split Test Pro renders the target page with the variant’s CSS and JS applied, takes a screenshot, and shows it next to each variant in the editor.

The screenshots come from a Playwright-driven capture pipeline running against the Preview URL you set on the Targeting tab.

When screenshots are captured

• On request — the screenshot is generated when you trigger it. Any time you change the variant content, click Refresh screenshot to regenerate.
• Screenshots are not auto-captured every time you save. If you tweak the CSS without re-capturing, the displayed screenshot is stale.

What to look for

Open the screenshot for each variant and compare against the control:

• Did the change actually apply? If your “orange button” variant still shows a blue button, your selector didn’t match. Fix the CSS, regenerate the screenshot, repeat.
• Did anything else move? A change to a button’s padding can ripple into surrounding layout. Catch it now, not after the experiment runs for a week.
• Does it work on mobile? The screenshot captures desktop by default. For mobile-critical changes, supplement with manual testing (see below).

When the screenshot fails

If a variant’s screenshot shows an error or stays blank, the most common causes are:

1. The Preview URL is unreachable (404, 500, or behind auth that the capture environment can’t pass).
2. The Preview URL doesn’t match your targeting rules — the script doesn’t activate, so no variant CSS applies.
3. External CSS/JS URLs in your variant are CORS-blocked or returning errors.

Fix the underlying issue and click Refresh screenshot.

The Preview URL Banner

The Preview URL field on the Targeting tab serves two purposes:

1. It’s the URL used for screenshot capture.
2. It powers the Preview URL match banner that tells you whether your targeting rules would activate on that page.

How the match banner works

You paste a real URL from your site (e.g., https://yourstore.com/products/your-product). The app runs your targeting rules against that URL and shows one of:

• Match — your rules would activate on that page. Good to launch.
• No match — your rules don’t activate on this URL. Either fix the targeting or pick a different Preview URL.

This catches the most common targeting bug: a typo in the path that means your experiment runs on zero visitors. The banner is right there next to your rules, so the moment your targeting is wrong, you’ll see it.

What the banner doesn’t check

The Preview URL match is URL-only — it doesn’t simulate device targeting, doesn’t check the variant’s CSS or JS for syntax errors, doesn’t verify your conversion goal is set up. Use it as a URL-targeting smoke test, not a comprehensive readiness check.

Manual Verification Before Launch

The screenshots and banner are a fast first pass. For anything beyond a trivial test, do a manual round of verification:

1. Open the Preview URL in a fresh browser window (incognito to clear cookies).
2. Check that the Split Test Pro script is loading — look for experiment.js in the Network tab.
3. Force yourself into the variant by setting the assignment cookie manually, or use the preview cookie (see below).
4. Verify the change appears, on desktop and mobile viewports.

Forcing a specific variant for testing

The HTML script supports a preview cookie that overrides assignment for testing:

document.cookie = "splittestpro-preview=experimentId:variantId; path=/";

Refresh the page and you’ll see the specified variant regardless of what the cookie-based assignment would say. Useful when you want to confirm Variant B looks right without rolling the dice on which variant you naturally get.

For Shopify, the Theme App Extension respects the same preview pattern.

Common Mistakes

• Treating the screenshot as the final word. A correct screenshot doesn’t mean the variant works for everyone. Verify on the live page in a real browser too.
• Forgetting to refresh screenshots after edits. Stale screenshots mislead you into thinking the variant is ready when it isn’t.
• Using a Preview URL behind authentication. The capture environment can’t log in — pick a publicly accessible page that matches your targeting.
• Pointing the Preview URL at a page that doesn’t actually match targeting. The screenshot will show the variant, but the banner will say “No match,” which means real visitors at that URL pattern won’t see the variant. Fix the targeting first.

Next Steps

• Learn the targeting rules driving the match banner: URL Targeting.
• Run through the full set of pre-launch checks: Pre-Launch QA.
• Get a final AI-driven critique: AI Review.