By A/B testing Shopify themes, you can pit an outdated or poorly adapted theme against a significantly better alternative. This allows you to find out which design and layout is best received by your customers, increases the conversion rate and ultimately increases your sales.
By testing different themes, you gain valuable insights into the behavior and preferences of your users. On this basis, you can continue with targeted, more detailed optimizations after the theme tests. In this blog post, we'll show you how you can use strategic testing to create the ideal basis for your Shopify store and for further optimizations. A/B testing in Shopify and exploit the full potential of your online store.
1. create a Varify.io® A/B testing account with 30 days free trial phase
Visit https://varify.io/registrierung and create an account for your store. As soon as you have confirmed the welcome email, you can log in and start the setup. The trial phase is usually sufficient to carry out your Shopify Theme A/B test.
2. connect Varify.io® with your Shopify Store
There are three different ways to connect your store to Varify.io®:
1. insert the snippet into the Theme.liquid file (recommended)
Copy the Varify.io snippet from the dashboard and paste it as high up as possible in the theme.liquid file of your store. To do this, go to "Online Store"-> "Themes" in the Shopify backend and click on "edit code"
You can then insert the Varify.io snippet as in the following example. Please do not change anything in the snippet, even if Shopify makes suggestions for changes - changes can lead to flicker effects or the A/B test no longer works.
2. implement the snippet alternatively with the Google Tag Manager (not recommended). You can find out how here.
3. download the Varify.io A/B Testing Shopify app and enter your account ID(coming soon).
And so it goes on:
After the snippet has been implemented, open one of your product detail pages in the Varify.io dashboard. If the editor opens in your store, the implementation was successful.
3. find the theme ID of the new theme you want to test
We need the theme ID to tell Shopify which theme the test participants should see. Here is a step-by-step guide on how to find the theme ID from the preview link:
1. go to: Sales channels > Online store > Themes > Theme library.
2. select the theme you want to test.
3. click on: Actions.
4. right-click on Preview and copy the link.
Your preview link will look something like this: https://deinshop.myshopify.com/?preview_theme_id=1234567890
The number at the end of the link (1234567890) is the theme ID you need.
4. create the experiment
Open any page of your store with the editor. Next, you need to add the following JavaScript to the experiment. IMPORTANT: Please do not forget to replace the theme ID from the previous step.
This JS code must be inserted at the top right under "JavaScript" - with the theme ID that we found earlier.
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('varify-mode') !== 'edit') {
var themeName = 'newTestTheme', themeQueryParam = {
_ab: 0,
_fd: 0,
_sc: 1,
preview_theme_id: 123456789876 // add theme ID here
};
var updateQueryStringParameter = function (uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
if (value === undefined) {
if (uri.match(re)) { return uri.replace(re, '$1$2'); } else { return uri; }
} else {
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
var hash = '';
if (uri.indexOf('#') !== -1) { hash = uri.replace(/.*#/, '#'); uri = uri.replace(/#.*/, ''); }
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
return uri + separator + key + "=" + value + hash;
}
}
};
var themeUrl = window.location.href;
for (var key in themeQueryParam) {
themeUrl = updateQueryStringParameter(themeUrl, key, themeQueryParam[key]);
}
if (!(sessionStorage.getItem('theme-' + themeName) == 'true')) {
sessionStorage.setItem('theme-' + themeName, 'true');
window.location.href = themeUrl;
}
};
Next, we add the following CSS to the CSS function to hide the preview bar in Shopify:
#preview-bar-iframe{display: none !important;}
In the editor, it will then look like the following image. Once you have successfully saved both snippets in the experiment, you can click on "Finished" and give the experiment a name.
5. targeting and quality assurance
After you have implemented the JavaScript and CSS and saved the experiment, you can save your store URL in the page targeting of the experiment. You can also use the "Preview" links to check whether the redirect works and whether all settings have been made correctly.
A tip: If the redirect does not appear immediately, but you see the current theme for a moment, you should check whether you can move the snippet from step 2.1 further up.
6. start the A/B test
Now start the experiment with "Start Experiment". In a few moments, the first visitors to your store will appear to be directed to the new theme. Varify.io® will now track how many users have purchased in the original and new theme. After some time you will recognize which theme performs better.
More articles about A/B testing
- User Testing: Methods, Processes & Metrics
Explore how real user feedback leads to better decisions through targeted user testing.
- All about the confidence interval in A/B testing
Explained clearly: Confidence interval and confidence level in the context of A/B tests.
- A/A tests explained: Validation for reliable data
Why A/A tests are important to validate your testing setup and ensure data quality.
- Effective optimization through multivariate testing
Learn how to test multiple elements simultaneously to identify the best combination.
- 10 red flags in A/B testing that you should avoid
The most common mistakes in A/B testing and how to avoid them.
- Big Query A/B Testing
How to efficiently analyze A/B tests at data level with BigQuery and Varify.io.
- Server-side tracking with GTM & GA4
More control over your data through server-side tracking with Google Tag Manager and GA4.
- A/B Testing for Shopify: Everything you need to know
Smart strategies and technical tips for successful A/B testing in Shopify stores.
- Split tests explained simply: definition, application, implementation
How split tests work and how to use them specifically.
- WordPress A/B testing
How to effectively integrate A/B testing into your WordPress website.
