Custom Code

​

When to use it

• Add an element the theme does not have. A shipping test’s Variant A shows a free shipping progress bar in the cart drawer that fills as the cart grows. The script reads the visitor’s threshold from the JavaScript API, so each test group’s bar matches its own shipping rate.
• Change how the page behaves. A visual editor test’s Variant A shows a sticky Add to cart bar on mobile once the visitor scrolls past the Add to cart button on the blue snowboard product page.
• Restyle part of the page. A price test’s Variant A hides the compare-at price on the blue snowboard product page with three lines of CSS.

​

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 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.
• You want to send assignments to another tool. A script in your theme reads every test’s assignment from the JavaScript API on every page, so you write it once instead of adding it to each test. See Send assignments to another tool.

​

How it works

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

​

When the code runs

• Theme, template, URL redirect, visual editor, and price tests usually assign the visitor before the page shows. The code is on the page before the visitor sees anything.
• A test that targets visitors by country needs a country lookup on the visitor’s first visit. If any test group has CSS, or JavaScript set to run before the page shows, the page stays hidden for every test group, Control included, until the lookup returns. After a few seconds the page shows anyway, and the code runs once the lookup returns.
• Shipping, offer, and checkout tests assign the visitor after the page loads, to keep the storefront fast. Their code runs on the page the visitor already sees.

​

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, which runs after the page has parsed. If the code does not change the layout, choose After the page loads instead.
• 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.
• Running a popup or a listener before the page shows. It holds the page until it finishes, and on a test that targets visitors by country it keeps the page hidden until the country lookup returns, though it changes nothing the visitor first sees. Choose After the page loads for it.

​

FAQ