Test Shopify themes with Varify.io
Table of contents
In short
Use the "Shopify Theme Preview" function to easily A/B test a new Shopify theme with Varify.io. Create a new experiment and use the JavaScript code provided. Customize it with your new theme ID and test the new theme before converting your store.
Why test Shopify themes
A new Shopify theme should be A/B tested before switching to ensure that it does not degrade store performance. Changes in design can affect customer behavior and KPIs such as conversion rate. A/B testing enables a data-supported check as to whether the new theme delivers better or worse results.
Step 1: Insert Varify.io snippet into the theme.liquid file
💡Note: We recommend integrating the Varify snippet via the themes.liquid file for testing themes. Step 1 only needs to be carried out if the Varify snippet is not yet installed on your site.
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"
Step 2: 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. search for the theme you want to test.
3. click on the three dots (Actions)
4. 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.
Now do the same for your current theme and copy the theme ID here too.
Step 3: Create experiment
Create a new experiment. Simply enter the homepage of your store as the editor URL in the Varify dashboard. Then click on "Add JS" and add the following JavaScript to the experiment.
// Wait until the theme instance is present on the page…
window.varify.helpers.waitFor(
'[data-theme-instance-id="143807480072"]',
(themeElement) => {
// …then run your redirect logic.
(function () {
const url = new URL(window.location.href);
const params = url.searchParams;
const shadow = document.querySelector('div#varify-shadow-root');
// only redirect when the variation-param is missing AND the shadow-root isn't present
if (!params.has('pb') && !shadow) {
params.set('preview_theme_id', '178703466760');
params.set('pb', '0'); // hide the preview bar
// replace so you don’t add a new history entry
window.location.replace(url.toString());
} else {
console.log('Redirect skipped:', {
hasVarifyVariation: params.has('varify-variation-id'),
varifyShadowRootExists: !!shadow
});
}
})();
}
);
As soon as the code snippet has been customized with the new theme IDs, you can click on "Finished" and give the experiment a suitable name. Then open "Page Targeting" in the experiment and change the "Match Type" from "Simple Match" to "Contains". Then click on "Save Page Targeting".
Step 4: 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.
Step 5: Start the experiment
Now start the experiment with "Start Experiment". From now on, 50% of your visitors will be directed to the new theme and 50% will continue to see the old theme. The visitors always remain assigned to the same variant for the duration of the experiment. This means that the theme they have seen once, they will see again during the experiment. After some time, you will recognize which theme performs better.