Okay, let's keep this simple. We are not going to bombard you with a lot of hard-to-understand technical jargon. We are going to show you the simplest and most correct way to run a site-wide AB test in Shopify.
When we say site-wide AB test, we simply mean that we want to have different versions of an element across the entire website, not just on the product page or homepage.
Usually, this can be the header or footer. In other cases, this can be the Add to Cart button or any other element that is present on all pages of the website.
From a technical point of view, there is a big difference. We can't use template files to achieve this because we would end up creating a new template for each page type of the website, and this is not a good idea at all.
Let's say we want to test 2 different versions of the website header. We will create 2 different versions of the header and show one of them to one user and the other to another user.
Basically, those 2 versions will be present in both versions of the website, but we will use CSS to hide one of them.
We can just use class names for each version. We will add a class to control the version as ab-test-version-1 and we will add ab-test-version-2 to the other version.
Example:
<header class="site-header ab-test-version-1">
<!-- Version 1 of the header -->
</header>
<header class="site-header ab-test-version-2">
<!-- Version 2 of the header -->
</header>Now in the CSS, we will hide one of the versions:
.ab-test-version-1 {
display: none;
}
.ab-test-version-2 {
display: none;
}We will hide them both by default, and we will show one of them to the user based on which version of the test the user is in.
Let's talk theoretically. Our goal is to add a class to the body tag of the website, then use that class to select the correct version of the header.
<body class="ab-test-version-1">
<!-- Content of the website -->
</body>Now we have that class on the body tag, we can use it to show the correct version of the header.
.ab-test-version-1 .ab-test-version-1 {
display: initial;
}The same for the second version:
.ab-test-version-2 .ab-test-version-2 {
display: initial;
}It is very simple, right? No need to complicate things. Agencies and freelancers like to use complicated words for simple things to make them look smarter, but in reality, it is very simple.
Okay, back to the topic, how to add that class to the body tag?
In real life, we will use an AB testing tool, but to understand how it basically works, we will show a simple custom solution.
Basically, we need to split the traffic into 2 groups and show a different version of the header to each group. We will use simple JS to do that, at the very top of the website, right after the opening <head> tag.
<script>
var abTestVersion = localStorage.getItem("abTestVersion");
if (!abTestVersion) {
abTestVersion =
Math.random() < 0.5 ? "ab-test-version-1" : "ab-test-version-2";
localStorage.setItem("abTestVersion", abTestVersion);
}
document.body.classList.add(abTestVersion);
</script>So what we did here is check if the user already has the version of the test. If not, we generate a random number, and based on that number, we set the version of the test.
Then we add that class to the body tag.
Well, okay, I did it. Then how do I collect the data? How do I know which version is better?
We will use Google Analytics for that. We will create a custom event, and we will send the version of the test to Google Analytics.
<script>
var abTestVersion = localStorage.getItem("abTestVersion");
if (!abTestVersion) {
abTestVersion =
Math.random() < 0.5 ? "ab-test-version-1" : "ab-test-version-2";
localStorage.setItem("abTestVersion", abTestVersion);
}
document.body.classList.add(abTestVersion);
// Send the version of the test to Google Analytics
gtag("event", "abTest", {
event_category: "abTest",
event_label: abTestVersion,
});
</script>That's it. Now you can see the data in Google Analytics, and you can see which version is better.
If you are using an AB testing tool, you can use the same approach, but you will use the tool to split the traffic and collect the data.
When you set up the experiment in the tool, we will add that class to the body inside the experiment settings. The AB testing tool will do the rest.
To ensure the success of your AB tests, it's crucial to follow AB Testing Best Practices. These practices will help you design more effective experiments and interpret results accurately.
Site-wide AB testing is just one aspect of what a conversion rate optimization agency does for Shopify stores. By implementing various strategies, you can significantly improve your store's performance and increase sales.
If you need professional help with implementing AB tests or other Shopify development tasks, consider our Shopify Development Services. Our team can assist you in setting up complex tests and optimizing your store for better conversions.
Regular maintenance is key to keeping your Shopify store running smoothly. Our Shopify Website Maintenance Subscription can help ensure your store, including your AB tests, are always up-to-date and functioning correctly.
To stay ahead in the e-commerce game, it's important to keep an eye on Ecommerce Trends. These trends can inform your AB testing strategy and help you focus on the most impactful changes for your store.
Understanding the platform you're working with is crucial. If you're interested in the background of Shopify, check out our Shopify History page. This knowledge can provide valuable context for your optimization efforts.
For more in-depth information on various e-commerce topics, including AB testing, CRO, and Shopify optimization, be sure to explore our Guides section. These resources can help you deepen your understanding and improve your Shopify store's performance.
Once changes are live, monitor your results closely. Use analytics tools to track how conversions change over time. If your conversion rate improves, dig into what worked and why. If it doesn’t, re-evaluate and test other changes. Consistent monitoring ensures that your site continues to perform well. CRO audits should be done regularly to ensure that your site adapts to evolving customer behavior. Learn how to track conversions effectively here.
For example, you might test two different versions of your checkout page—one with a single-step process and another with multiple steps. Whichever version results in more completed transactions should be the one you implement permanently. Continuous testing is key to refining your site and improving your results. Learn more about the future of ecommerce testing trends.
A site-wide AB test involves testing different versions of an element across the entire website, not just on a single page. This approach is part of a broader Conversion Rate Optimization strategy for Shopify stores.
You can implement a site-wide AB test in Shopify by creating different versions of an element and using CSS and JavaScript to control which version is displayed to the user. For more complex implementations, consider our Shopify Development Services.
Yes, you can use an AB testing tool to split traffic and collect data, making the process easier and more efficient. It's important to follow AB Testing Best Practices when setting up your experiments.
The frequency of AB tests depends on your store's needs and resources. Regular testing is part of ongoing Shopify website maintenance. It's important to stay updated with ecommerce trends to inform your testing strategy.