Screenshots and Preview

Split Test Pro gives you two sanity checks while you build a variant: variant screenshots and the Preview URL and preview link. Both live on the Variants step, and together they catch the most common mistakes — broken selectors, typo’d targeting, variants that look fine in DevTools but wrong on the live page.

Variant Screenshots

Each experience gets a screenshot, shown in the preview box on the Variants step under the Preview URL field. Split Test Pro loads your Preview URL in a headless browser with the variant applied, waits a moment for the page to settle, and captures it. On Shopify, when no Preview URL is set, it uses your shop’s home page; on an HTML site a Preview URL is required.

When screenshots are captured

Captures run automatically:

• when you save a change to a variant (that variant is re-captured);
• when you change the Preview URL (every experience is re-captured against the new page);
• when you create the experiment.

While a capture runs the box reads Capturing screenshot…. If it fails, it reads Couldn’t capture a screenshot with a Retry button; if there is no screenshot yet, it reads No screenshot captured yet. with a Capture button. A variant with no change yet has no preview at all.

What the screenshot shows

• The page at desktop size, 1440×900. The full screenshot is the whole page.
• The thumbnail is framed on the first element your variant’s CSS targets, when that element is visible, so the change is in view. Without a matching element, it shows the top of the page.
• The capture adds the variant’s CSS itself, so the change shows even where the Split Test Pro script doesn’t run, and it hides the preview bar.

Click the thumbnail to open the full screenshot in a dialog. Use ← and → to step between the experiences.

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 and save — the screenshot is re-captured.
• 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 is desktop only. For mobile-critical changes, check manually with a preview link (see below).

When the screenshot fails

If a variant’s screenshot reads Couldn’t capture a screenshot, 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 page took too long to load.
3. The Preview URL points at a private or local address (such as localhost or an internal network), which the capture service can’t reach.

Fix the underlying issue and click Retry.

Preview URL and preview links

The Preview URL field at the top of the preview box takes a real page from your site (e.g., https://yourstore.com/products/your-product). It is the page screenshots are taken of, and the page the two buttons beside it open:

• Edit on site opens the Preview URL with the selected variant applied and Splitty, the on-page assistant, in manual mode so you can adjust the variant on the live page.
• Copy preview link copies a link to the Preview URL with start_preview=true&experiment=…&variant=… added. On Shopify, with no Preview URL set, the link points at your shop’s home page. Open it in any browser — or send it to a colleague — to see that variant.

Both buttons stay disabled until there is a page to open.

What a preview link does

Opening the link sets a splittestpro-preview cookie that pins the browser to that experiment and variant, so the variant follows you as you browse the site. A preview:

• always loads the experiment’s latest saved setup, including a draft that hasn’t launched;
• ignores audience rules, the activation delay and stickiness, so you always see your own variant;
• still checks URL and device targeting.

A preview bar at the bottom of the page shows the result: Active when the page passes the URL and device targeting, or Inactive URL, Inactive Device or Inactive URL & Device when it doesn’t — in which case the variant isn’t applied there. Real visitors at that address won’t see the variant either, so fix the targeting rules.

To leave, open the preview bar’s menu and click Exit Preview. It clears the cookie and reloads the page without the preview parameters.

Manual Verification Before Launch

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

1. Open a preview link for each variant 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. Check the preview bar reads Active on the pages where the test should run.
4. Verify the change appears, on desktop and mobile viewports.

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.
• 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 match targeting. The screenshot still shows the variant’s CSS, because the capture adds it itself — but a preview link on that page reads Inactive URL, which means real visitors there won’t see the variant. Fix the targeting or pick a different Preview URL.

Next Steps

• Write the targeting rules a preview checks: URL Targeting.
• Run through the checks before you launch: Launch checks.