Custom Code

​

When to use it

• Style a test group beyond what the editor offers. A price test’s Variant A hides the compare-at price on the blue snowboard product page with three lines of CSS.
• Render something the theme does not have. A shipping test’s Variant A draws a free shipping bar above the header, reading the visitor’s threshold from the JavaScript API.
• Send the assignment to a tool that has no integration. Push one event to a tag manager for the test group the visitor landed in.
• Run a helper in every test group. Control can carry code too, so a tracking snippet or a shared helper runs for the whole test.

​

When NOT to use it

• You want to edit text, images, or links on the page. Use a visual editor test instead. Its changes are scoped to the element, hide it until the change lands, and need no code.
• The change belongs to one page only. Custom code runs on every page in the test. Scope the test with page targeting first, or use a template test.
• The code changes a price, a shipping rate, or an offer. Those are the test itself. Use a price test, a shipping test, or an offer test, and read the result from the JavaScript API if you need to render it.

​

How it works

1. The test’s script resolves the visitor’s test group.
2. The test group’s CSS is added to the page head at once.
3. The test group’s JavaScript runs at the time you chose: before the page shows, or after the page loads.

​

Setup

​

Reading the test from your code

window.ABConvertQueue = window.ABConvertQueue || [];
window.ABConvertQueue.push(function (ABConvert) {
  var bar = document.querySelector('.shipping-bar');
  if (!bar) return;
  bar.hidden = false;
  bar.textContent = 'Free shipping on orders over $75';
});

​

Common mistakes

• Reading an element that is not on the page yet. Code that runs before the page shows can run before the page has a <body>. Build the elements you render into inside the window.ABConvertQueue callback, or choose After the page loads.
• Waiting for the page to load before changing what the visitor sees. The visitor sees the original until the wait is over. Put styling in CSS, which applies before the page shows, and change an element the moment it appears, for example with a MutationObserver, rather than on DOMContentLoaded.
• Putting the same code on every variant. If every test group runs it, put it on Control too, or the test measures the code instead of the change.
• Testing code only on the page you wrote it for. Custom code runs on every page in the test. Check a collection page and the cart before launch.

​

FAQ