Split Test Shopify Theme Designs


If you want to test out diverse design changes in Shopify, read the steps below. You can test new product page designs, and have them 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:

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

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 percent 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. 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.

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:


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

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:
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.


Hide Shopify Preview Bar

Need assistance? Start a conversation with our Support Team.

Reliably Convert More Site Visitors, Even If Everything Else is Changing in Your Business.

✓ No Credit Card  ✓ Easy Set-Up  ✓ Access All Features