How to A/B test Shopify Theme Designs

Created by Donald Ng, Modified on Fri, 23 Aug at 1:43 PM by Donald Ng

Using Mida's Split URL testing, 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.

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 Mida Tracking Script

You should follow the Shopify installation instructions and install Mida script in both Shopify themes that you want to Split Test.

Find Shopify Preview Theme ID

Go to customize the unpublished theme from within the Shopify admin.

Once the page have loaded, now you can find the theme ID in the page URL, just copy the number part of the URL and it should look something like:

> https://admin.shopify.com/store/fake-store-url/themes/ 234567890 /editor

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

IMPORTANT

Once you end your experiment, DO NOT DELETE ANY OF THE THEMES that you are testing! Otherwise, the visitors that were bucketed on the themes will see a 404 error when trying to browse the site or checkout. Leave all the themes you were testing in Draft after you end the test to prevent the experiment visitors from seeing the 404 errors when they try to browse your site or go to the checkout. If you delete any of the themes you tested, we cannot prevent showing the 404 errors when visiting your site or checkout, because of the missing Shopify theme.

Create Split URL Test

In the "New URL Split Test Profile" section insert on the Base Variation URL field the following code:

yourshopifystore.com/*

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

yourshopifystore.com/*?preview_theme_id=234567890

Your setup should look something like this:

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 your new Theme (unpublished). Just go to your theme.liquid page, add this code in the HEAD section (just like how you add Mida script):

<style>iframe#preview-bar-iframe { display: none !important; }</style>

And thats all you need to do!