Split Test Shopify Theme Designs

Introduction

If you want to test out diverse design changes in Shopify, read the steps below. You can test new product page designs, and have it stick across all product pages for the duration of the test.

Select Shopify Themes

You can select two different Shopify themes or duplicate the existing theme, then make changes as needed in the duplicate theme. You should add the following CSS:

.shopify-preview-bar { display: none }

The line of code removes the preview text at the bottom insert by Shopify, so users in the variation do not see it.

Find Shopify Preview Theme ID

Preview the new theme from within the Shopify admin, then view the source code in the head to get the theme’s ID. In the below example, we see the ID is 65568381:

<script>
//<![CDATA[
     var Shopify = Shopify || {};
     Shopify.shop = "store.myshopify.com";
     Shopify.theme = {"name":"[LIVE] My Goods","id":65568381,"theme_store_id":null,"role":"main"};
//]]>
</script>

Then, what we need to do is append ?preview_theme_id=65568381 as a variation for a URL test so that the new design loads for 50 per cent of people who visit the store.

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.

Create Split URL test

Create a Split URL test.

Insert on the Original URL Field the following code:

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

Use the following as the Variation 1 URL, where the preview_theme_id variable is what you discovered from the source code. This code appends the preview_theme_id variable to load a new theme:

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


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

Then enable “Support Regular Expressions”. Your test variations will look like:

save image

Site Area

Make sure that the Site Area includes all the pages in your website:

Could be something like this:

And exclude pages when the query string contains: preview_theme_id=65568381. 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.

MissingShopifySplitTestImage.png

Hide Shopify Preview Bar

Important
Have more questions? Submit a request

Comments