Split Test Shopify Plus Theme Designs

A Step-by-Step Guide to A/B Testing Shopify Themes Using Convert’s Split URL Testing Feature

This Article Will Help You:

• Understand how to split test Shopify Plus theme designs
• Select and configure Shopify themes for testing
• Install the Convert tracking code in both themes
• Find the Shopify preview theme ID for your variation theme
• Create a Split URL test in Convert
• Set up location rules to prevent redirect issues
• Hide the Shopify preview bar for a seamless user experience
• Troubleshoot and resolve potential redirect issues

Introduction

Shopify offers a wide variety of themes to enhance the look and functionality of your online store. But have you ever wondered how a different theme might impact conversions?

With Convert’s Split URL testing, you can compare two or more Shopify themes in a structured experiment and identify the one that performs best for your business.

This guide will walk you through setting up a Split URL test to compare Shopify themes effectively.

💡 Note: These steps apply only to Shopify Plus users. Due to Shopify’s platform limitations, third-party scripts cannot run on checkout pages in Shopify Basic. This means that hiding the preview banner on checkout pages will not work for Basic users.

Step 1: Select Your Shopify Themes

To begin, choose two Shopify themes:

• Main Theme → This is the live theme currently displayed to all visitors.
• Variation Theme → This is an unpublished theme that you will test against the live one.

The variation theme will remain in preview mode and will only be visible to visitors assigned to that variation in the test.

Step 2: Install Convert Tracking Code in Both Themes

Before starting the experiment, install the Convert tracking code in both themes.

For accurate experiment tracking:

• Add the Convert tracking code to both the main and variation themes.
• For revenue tracking, install Convert’s tracking code on checkout pages using Google Analytics, webhooks, or manual revenue tracking.

Step 3: Find the Shopify Preview Theme ID

To retrieve the preview theme ID for your variation:

1. In your Shopify admin panel, go to Online Store > Themes.
2. Click Customize on the unpublished theme.
3. Check the browser URL—it will contain /admin/themes/xxxxxxxx. The number (xxxxxxxx) is your preview theme ID.

💡 You will need this ID to create the Split URL test. The test will load the variation theme by appending ?preview_theme_id=xxxxxxxx to the store URL.

Step 4: Create a Split URL Test

• In Convert, create a Split URL test.
• Under "Edit Split URL Variations", enter:
• • Original URL field:

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

• • Variation URL field:
    Use the format below, replacing 123456 with your actual preview theme ID:

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

• • The resulting variation URL will look like this:

http://www.store.com?preview_theme_id=123456&

• Enable Support Regular Expressions (Regex).
• Disable Transfer Original URL variables to the variation URL.

Your final test setup should look like this (except with different theme IDs for each variation):

Step 5: Set Up Location Rules (Prevent Redirect Loops)

Ensure that the experiment applies to all pages of your website.

✅ Location Settings:

• Include all pages on your website:

https://www.store.com/*

• Exclude pages where the query string contains the preview_theme_id:

preview_theme_id=123456

Step 6: Hide the Shopify Preview Bar

When an unpublished theme is previewed, Shopify displays a banner indicating that it is a preview template.

You can hide this banner by adding CSS:

How to Remove the Shopify Preview Bar

1. In Shopify, go to Online Store > Preferences > Google Analytics.
2. Add the following JavaScript inside the Google Analytics field:

(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);

Step 7: Resolve Redirect Issues

In some cases, Shopify might redirect the preview theme back to the original store URL, causing an issue with the Split URL test.

To fix this:

• Modify the Variation URL by appending a dummy query parameter

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

• • The test=1 parameter prevents Shopify from automatically redirecting users back to the live theme.

• Exclude the dummy query parameter in Locations

  • Exclude pages where the query string contains:

preview_theme_id=123456

• Also exclude the dummy parameter:

test=1

💡 This ensures visitors do not get stuck in an infinite redirection loop.

By following these steps, you can successfully compare Shopify themes in Convert and determine the best-performing design for your store.

🚀 Want to Start Now?
⏩ Start your free trial at Convert.com and optimize your web experimentation today!