Custom Code Testing - Getting Started
Learn how Custom Code Testing can unlock unlimited possibilities and test any modification you can imagine.
Custom code testing lets you inject custom JavaScript and CSS into your store and measure the impact. This is the most flexible experiment type in Elevate — if you can build it with code, you can test it.
What Is a Custom Code Experiment?
A custom code experiment injects custom JS and CSS into specific pages (or all pages) of your store for visitors assigned to each variation. This lets you make changes that go beyond what templates, themes, or the visual editor can do — entirely custom modifications that are tracked and measured like any other experiment.
What Can You Test?
Custom code experiments are open-ended. Common use cases include:
Custom UI components — Add a sticky add-to-cart bar, a floating announcement banner, or a custom product comparison widget
Layout modifications — Rearrange, hide, or restyle page elements using CSS and JS
Third-party script testing — Test the impact of adding or removing a third-party tool (chat widget, popup, exit-intent overlay)
Dynamic content — Inject personalized content, countdown timers, or conditional messaging based on visitor behavior
Advanced A/B tests — Anything that requires code changes beyond what the visual editor or page templates support
How It Works
You create variations, each with its own custom JavaScript and CSS
You specify which pages the code should run on (specific URLs, patterns, or all pages)
When a visitor is assigned to a variation, the Elevate theme extension injects that variation's code into the page
The control variation has no code injected — visitors see your store as-is
Elevate tracks all behavior and attributes conversions to the correct variation
The code runs client-side after the page loads. Each variation's code is isolated — changes to one variation don't affect others.
Code Structure
Each variation has three configurable parts:
JavaScript
Custom JS that executes on the page. Use it to manipulate the DOM, add elements, modify behavior, or inject widgets.
CSS
Custom styles applied to the page. Use it to restyle existing elements, hide content, or change layout.
Pathnames
Which pages the code runs on. Use * for all pages, or specify paths like /products/* or /collections/sale. You can also exclude specific paths.
What You'll Need
Before creating a custom code experiment:
JavaScript and/or CSS ready — Have your code written and tested before setting up the experiment. The code editor in Elevate is for entering code, not for development — use your browser's dev tools to prototype and debug first.
The Elevate theme extension enabled — Custom code experiments require the theme extension to inject code into the storefront. If it's not enabled, Elevate will prompt you during setup.
A clear hypothesis — What change are you making with the code, and what do you expect it to do?
Custom code testing works on all Shopify plans.
Important Considerations
Test Your Code Before Launching
Unlike other experiment types where Elevate handles the implementation, custom code experiments run your code. Bugs in your JS or CSS will affect visitors in that variation. Always:
Test the code in your browser's dev tools first
Check for JavaScript errors in the console
Verify the code works on mobile and desktop
Make sure the code doesn't conflict with your theme's existing JS
Page Targeting
Be precise with your pathname configuration. Running code on pages where it's not intended can cause unexpected behavior. Use specific paths when possible, and use the exclude pathnames option to prevent code from running on sensitive pages (like checkout or account pages).
Performance
Keep your code lightweight. Heavy DOM manipulation or large script injections can affect page load time and visitor experience. The control variation (no code) will naturally be faster, so minimize the performance impact of your variations to ensure a fair comparison.
Next Steps
How to Create a Custom Code Experiment — Step-by-step setup guide
Audience Targeting — Control which visitors see your experiment
Last updated