Split Test Shopify Plus Theme Designs

This Article Will Help You:

• Introduction
• Select Shopify Themes
• Install Convert Tracking Code in both Themes
• Find Shopify Preview Theme ID
• Create Split URL test
• Locations
• Hide Shopify Preview Bar
• Redirect issues

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” only.  "Transfer Original URL variables to the variation URL" should not be enabled. Your test variations will look like this (except the theme ID will be different). In this example showing two variation themes.

Locations

Make sure that the Locations includes all the pages on 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.

Redirect issues

If you notice any redirect issues with the above setup you need to add a dummy query parameter to your variation.

Simply use for Original the regex formula as described below 

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

Use the following as the Variation URL, where the preview_theme_id should match your own and append on the end a dummy query pamareter, here we used test=1:

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

Then in Locations you need also to exclude that query parameter together with your preview_theme_id: