Content Testing Docs

Overview

Change what visitors see on your store, without touching your theme code.

Content testing lets you modify text, headlines, button labels, descriptions, and any visible element on your Shopify storefront for different visitor groups. You can test entirely different messaging, copy, and layouts to find what converts best.

Unlike price tests, content tests are display-only. They change what visitors see on the storefront but have no impact on checkout pricing or Shopify admin data.

What can you test with content experiments?

Content tests are designed for testing the elements that shape how visitors experience your store:

• Headlines and subheadlines — test different value propositions, hooks, or angles

• Product descriptions — test short vs long copy, benefit-led vs feature-led descriptions

• Button text — test "Add to Cart" vs "Buy Now" vs "Get Yours Today"

• Promotional banners — test different offers, urgency messaging, or seasonal callouts

• Section ordering — use custom CSS to reorder or hide sections for specific groups

• Visual styling — change colours, fonts, layout spacing, or element visibility per group

When to use content testing

Content tests are the right choice when you want to test changes to messaging, copy, or layout on an existing page — without building a completely separate page.

If you're testing a fundamentally different page structure, a Page Split Test is usually a better fit. If you're testing pricing, use a Price Test (which handles checkout pricing automatically).

Content tests are ideal when you believe the page structure is sound but the words, positioning, or visual hierarchy could be improved.

How it works at a high level

1. You create a Content Test and select which page to run it on.

2. You use the Visual Editor to click on elements and type new content for each variant group. You can also add custom CSS or JavaScript per group.

3. When a visitor lands on the page, AB Genius assigns them to a group and applies the corresponding modifications.

4. Results are tracked automatically: conversion rate, revenue per visitor, AOV, add to cart rate, and more.

Content changes are applied client-side after the page loads. The original page HTML is served by Shopify as normal, and AB Genius modifies the relevant elements for the visitor's assigned group. Visitors in the Control group see the original page with no changes.

Content tests vs price tests — key differences

Content tests only change what's displayed on the storefront. They have no impact on actual pricing, checkout values, or Shopify admin data.

Price tests change both the displayed price and the actual checkout price (via the Cart Transform Function). If you want to test pricing, always use a Price Test — not a Content Test that changes the price text visually. A visual-only price change would show one price on the product page but charge the original price at checkout.

Using the Visual Editor

Point, click, edit — no code required.

The Visual Editor is the primary tool for building content test variations. It lets you click on any element on your live storefront and type replacement content directly.

How to open the Visual Editor

1. Open your Content Test experiment in the test wizard.

2. Go to the Modifications tab.

3. Click Open Visual Editor.

Your live store opens in a new browser tab with an editor overlay panel floating on top. You're now in editing mode.

How to make changes

1. Click any element on the page to select it. Selected elements will glow to indicate they're active.

2. A floating editor panel appears. Type the new content you want this element to display for the selected test group.

3. Select which test group this change applies to (e.g. Variant A).

4. Click Save.

5. Repeat for each element you want to modify.

Each saved modification records three things: the CSS selector of the element, the original content, and the new content for the specified group. This is how AB Genius knows what to change and for whom.

Tips for using the Visual Editor

Be specific with your selections. Click directly on the text element you want to change, not a parent container. The more specific the CSS selector, the more reliable the modification will be.

Test one change at a time per element. If you want to test two different headlines, create two variant groups with different headline text — don't try to layer multiple changes on the same element within one group.

Check your changes on mobile. The Visual Editor opens your desktop storefront by default. After saving changes, preview the experiment on mobile to make sure the modifications render correctly on smaller screens.

Save frequently. Each modification is saved individually. If you navigate away or close the tab before saving, unsaved changes will be lost.

What if the Visual Editor doesn't load?

The Visual Editor requires the experiment ID to be in the URL. Always access it through the Open Visual Editor button in the Modifications tab — not by navigating to your store directly.

Also ensure your browser allows popups from the app domain. Some browsers block the new tab by default.

Custom CSS & JavaScript Per Group

Advanced modifications for teams that want full control.

Beyond the Visual Editor's point-and-click interface, AB Genius lets you inject custom CSS and JavaScript for specific test groups. This gives you complete flexibility to change anything on the page — colours, fonts, layout, element visibility, animations, or even interactive behaviour.

Adding custom CSS

1

How to add custom CSS

1. Open your Content Test experiment in the test wizard.

2. Go to the Modifications tab.

3. Each test group has its own CSS input field.

4. Enter your custom CSS. This CSS is only injected for visitors assigned to that specific group.

This CSS is injected as a

Examples

.product-reviews-section {
  display: none;
}

.product-form__submit {
  background-color: #FF6B35;
  color: #FFFFFF;
}

Adding custom JavaScript

Each test group also has its own JavaScript input field. Custom JS is injected as a <script> tag in the page <body>.

Use JavaScript for modifications that CSS can't handle — for example:

• Dynamically changing image sources

• Adding or removing DOM elements

• Triggering custom analytics events

• Modifying interactive elements or sliders

JavaScript modifications are powerful but should be used carefully. Poorly written scripts can break page functionality or cause errors. Always test thoroughly in preview before launching.

Important notes

• Custom CSS and JS are applied only to visitors in the specified group. Control group visitors and visitors in other groups are not affected.

• If you're using both the Visual Editor and custom CSS/JS on the same experiment, make sure they don't conflict. For example, don't use the Visual Editor to change a headline's text while also using CSS to hide that same headline.

• Custom CSS/JS modifications are not validated by AB Genius. You're responsible for testing that your code works correctly across browsers and devices.

Creating a Content Test

Step-by-step guide to building a content experiment.

1

Create the experiment

Go to Tests → Create New Test. Enter a name (e.g. "Homepage Headline Test — Benefit vs Feature-Led"), add an optional description, and select Content Test as the type.

2

Set up your test groups

In the Test Groups tab, you'll see a Control group and one Variant group. You can add up to 3 variant groups (4 groups total including control).

Set the traffic weight for each group. For a simple A/B test, use 50/50. Use Auto-Balance to split evenly across all groups.

3

Create your modifications

In the Modifications tab, you have two options:

Option A — Visual Editor: Click Open Visual Editor, click on elements on your storefront, type replacement content, assign to a group, and save. Repeat for each change.

Option B — Custom CSS/JS: Enter custom CSS or JavaScript in the input fields for each group. Use this for styling changes, layout modifications, or advanced DOM manipulation.

You can combine both approaches — use the Visual Editor for text changes and custom CSS for styling.

4

Configure targeting (Pro plan)

In the Targeting tab, set any audience restrictions: device type, visitor type, traffic source, or country. Leave defaults for all visitors.

5

Choose your primary metric

In the Metrics tab, select the metric AB Genius should use to determine the winner. For content tests, Conversion Rate or Revenue per Visitor are typically the most relevant.

6

Preview and launch

Preview each variant using the Preview tab. Verify all modifications appear correctly on desktop and mobile. Then start the experiment.

Preview & QA

Check your content modifications before going live.

Content tests change what visitors see on your storefront. Getting the QA step right ensures your modifications look correct and don't break anything.

Preview checklist for content tests

1

1. Check each variant on desktop

Open the preview link for each variant group in an incognito window. For every modification you made, verify:

• The new content appears correctly in place of the original.

• The text fits within its container — no overflow, no truncation, no broken layout.

• Fonts, colours, and styling are consistent with the rest of the page.

2

2. Check each variant on mobile

Repeat the desktop checks on a mobile device or using your browser's responsive mode. Some elements render differently on mobile — text that fits perfectly on desktop may overflow on a smaller screen.

3

3. Check the Control group

Open the control preview link. Verify that the original page appears exactly as it normally does — no modifications applied, nothing broken.

4

4. Check for CSS/JS conflicts

If you've added custom CSS or JavaScript, check for unintended side effects. Your custom styles might affect elements beyond the ones you intended. Look for:

• Layout shifts or broken spacing

• Elements that have disappeared unexpectedly

• JavaScript errors in the browser console (open developer tools with F12)

5

5. Test across browsers

At minimum, check Chrome and Safari. If a significant portion of your traffic uses Firefox or Edge, check those too.

Common preview issues

My content change isn't showing: Check that the experiment is in Draft or Running status, the app block is enabled in your theme, and you're using the preview link in an incognito window.

The change appears on desktop but not mobile (or vice versa): The CSS selector saved by the Visual Editor may target an element that only exists on one viewport. Some themes use different DOM structures for mobile and desktop. You may need to add a separate modification targeting the mobile-specific element.

The change flickers or appears briefly before reverting: Another script on your page (from your theme or another app) may be overwriting the modification. Check for JavaScript conflicts.

The Visual Editor selected the wrong element: If the CSS selector captured a parent container instead of the specific text element, the modification might replace more content than intended. Delete the modification and redo it, clicking more precisely on the target text.

Troubleshooting Guide

Common content test issues and how to fix them.

Content changes are not appearing on the storefront

Check in this order:

1. Is the experiment status Running? Draft experiments don't serve to visitors.

2. Is the AB Genius app block (ab-live) enabled in your Shopify theme? Go to Online Store → Themes → Customise → App Embeds and verify it's ON.

3. Are you testing in an incognito/private window? Admin sessions are excluded from experiments.

4. Is the CSS selector still valid? If you've updated your theme since creating the modification, the selector may no longer match any element on the page. Re-open the Visual Editor and redo the modification.

The modification works on one page but not another

The Visual Editor captures CSS selectors based on the specific page you edited. If your product pages use different templates or layouts, the selector from one page may not work on another. You may need to create separate modifications for different page templates.

Custom CSS isn't applying

1. Check for typos in your CSS. Open the browser developer tools and look for the injected <style> tag to verify your CSS is present.

2. Check CSS specificity. Your custom styles may be overridden by more specific selectors in your theme. Try adding !important to your declarations if needed.

3. Verify you entered the CSS for the correct test group.

Custom JavaScript is throwing errors

1. Open the browser developer tools (F12) and check the Console tab for errors.

2. Make sure your script doesn't depend on elements that haven't loaded yet. Wrap your code in a DOMContentLoaded listener if needed.

3. Check for conflicts with your theme's JavaScript or other installed apps.

Content test is affecting elements I didn't intend to change

The CSS selector may be too broad. For example, if the Visual Editor captured a selector like .product-title and that class appears in multiple places on the page, all instances will be modified. Re-do the modification with a more specific selector, or use custom CSS with a more targeted selector.

Need help with content testing? Contact us at [e-mail]