Split Test Shopify Plus Theme Designs

Introduction

While the idea behind using Shopify is to create a website and use their shopping cart to sell, ship, and manage your products, it often strikes us as to how one Shopify theme on your website would perform against the other, especially knowing that Shopify now offers a wide range of themes.

Using Convert’s Split URL option, you can put two or more Shopify themes (applied to your website) to compete against one another. 

Now, let us go through the stepwise flow of setting up a Split URL experience to test one Shopify theme against another. 

The instructions below are for Shopify Plus subscriptions. These instructions cannot work on Shopify basic subscriptions as Shopify implemented changes to their platform that prevents third-party scripts from running on checkout pages, thus you will not be able to hide the preview banner on the checkout pages.

Select Shopify Themes

You can select two different Shopify themes. The main theme will be the one you are showing live to the Shopify store visitors, while the other that you want to test against will be in preview mode (not published).

Install Convert Tracking Code in both Themes

You should follow the instructions and install Convert tracking code in both Shopify themes that you want to Split Test.

You can also install the Convert tracking code on checkout pages to be able to track revenue by GA, or our manual revenue tracking code or via webhooks.

Find Shopify Preview Theme ID

Edit the code of the unpublished theme from within the Shopify admin.

Then, you can copy the theme ID from the admin URL, /admin/themes/xxxxxxxx.

You will need this ID so that you can append ?preview_theme_id=xxxxxxxx as a variation URL for the Split URL test (that we describe on the next section).

Create Split URL test

Create a Split URL test.

In the "Edit Split Url Variations" section insert on the Original URL field the following code:

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?

Use the following as the Variation URL, where the preview_theme_id variable is what you discovered from the previous step (you should replace 123456 with your own preview theme ID):

$1$3$5?preview_theme_id=123456&$7

The resulting URL will be something like this http://www.store.com?preview_theme_id=123456&.

Then enable “Support Regular Expressions” and "Transfer Original URL variables to the variation URL". Your test variations will look like this (except the theme ID will be different):

Site Area

Make sure that the Site Area includes all the pages in your website. It could be something like this:

And exclude pages when the query string contains: preview_theme_id=123456. This is very important, so when you activate the experiment, it does not cause a loop. If you see a loop, you will know what you missed.

Hide Shopify Preview Bar

When the preview theme template is enabled there is a banner that appears specifying that it is a preview template.

However, this can be removed with CSS added to Shopify. In the section Online Store / Preferences / Google Analytics, add the following code:

(function() {
 var css_override = document.createElement("style");
 document.getElementsByTagName("head")[0].appendChild(css_override);
 })();

var css = 'iframe#preview-bar-iframe { display: none !important; }', 
head = document.head || document.getElementsByTagName('head')[0], 
style = document.createElement('style'); 
style.type = 'text/css';

if (style.styleSheet) { 
 style.styleSheet.cssText = css; 
} else { 
 style.appendChild(document.createTextNode(css)); 
} 
head.appendChild(style);

Note that on slow network connections, the preview banner may still show for a split-second, but in most cases does not.