A/B Theme Testing

Step 1: Install App

Create a Custom App in Shopify Admin → Settings → Apps → Develop apps. Set the App URL and install it. The app auto-injects the A/B testing script into your storefront.

Step 2: Prepare Your Theme B

Create your alternative product page as a standalone HTML page hosted anywhere (e.g., on this server). Include a "Buy Now" button that adds to Shopify cart:

<a href="https://your-store.myshopify.com/cart/VARIANT_ID:1">Buy Now</a>

<!-- Or use AJAX add to cart: -->
<script>
fetch('https://your-store.myshopify.com/cart/add.js', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({items: [{id: VARIANT_ID, quantity: 1}]})
}).then(() => window.location = 'https://your-store.myshopify.com/checkout');
</script>

Step 3: Create A/B Test

Create a test, set the redirect URL for Theme B variant. Use {handle} as placeholder for the product handle.

Example redirect URL: https://ab.campkitchen.us/landing/{handle}

Step 4: Start & Monitor

Start the test and monitor results in the dashboard. Wait for 95%+ confidence before declaring a winner. Recommended: at least 100 visitors per variant.

Tracking on Landing Pages

When visitors are redirected to Theme B, tracking params are added to the URL: _ab_exp, _ab_var, _ab_vis. Use the tracking pixel to track events from your landing page:

<!-- Add to your landing page to track page views -->
<img src="YOUR_APP_URL/snippet/pixel.gif?eid=EXP_ID&vid=VAR_ID&vis=VISITOR_ID&t=PAGE_VIEW" style="display:none">

<!-- Or use JavaScript (reads params from URL automatically): -->
<script>
(function() {
  var p = new URLSearchParams(window.location.search);
  var eid = p.get('_ab_exp'), vid = p.get('_ab_var'), vis = p.get('_ab_vis');
  if (eid && vid && vis) {
    // Track page view
    navigator.sendBeacon('YOUR_APP_URL/snippet/event',
      new Blob([JSON.stringify({experimentId:eid,variantId:vid,visitorId:vis,type:'PAGE_VIEW'})],{type:'application/json'}));
    // Track add-to-cart on buy button click
    document.querySelectorAll('.buy-btn').forEach(function(btn) {
      btn.addEventListener('click', function() {
        navigator.sendBeacon('YOUR_APP_URL/snippet/event',
          new Blob([JSON.stringify({experimentId:eid,variantId:vid,visitorId:vis,type:'ADD_TO_CART'})],{type:'application/json'}));
      });
    });
  }
})();
</script>