How to split-test Shopify themes and not ruin anything

Conversion rate optimization (CRO) is a structured, systematic approach to increasing the percentage of users who perform a desired action on your website. Typically, CRO focuses on persuading existing traffic to take a desired action. One way to ensure that happens is by generating hypotheses and validating them by comparing them through A/B testing. 

If your website is built on Shopify, you can avail a few advantages during A/B testing:

You can:

  • Use Shopify-provided AJAX API on your A/B test to implement different functionality.
  • Set up your Google Analytics in the most efficient and easiest way possible with this simple guide. 
  • Test your Shopify theme before publishing it live for everyone. (Yes, you heard right! You can test a theme using any A/B testing tools before making it live for the world.)

When Should You Test a Theme?

There are so many themes! Finding one that suits your business is tough. You don’t need a theme that just looks good—it also needs to perform well in conversions. To see which theme maximizes your sales, you can do A/B tests between your chosen themes.

Sometimes, you can do many things using an A/B testing tool that might take more effort to implement in Shopify. But sometimes it’s the reverse. You may want to test a functionality/feature that’s not possible to implement by an A/B testing tool. Or it may possible but will take a lot of time to implement that functionality or feature directly from A/B Testing tools.

The best solution: implement that feature in a cloned version of your live Shopify theme, and A/B test it with your current live theme.


How to Split-Test a Shopify Theme

This is the ultimate guide for testing a Shopify theme using any A/B testing tool in the market. In this guide, we’ll walk you through every step you need to take to test your Shopify theme.

We’re assuming that you’ve already installed your A/B testing tools in both themes you want to test. If not, you can do so using this best-practices guide.

Once that’s done, complete these steps, starting with finding your Shopify theme:


1. Find the Theme ID.

You can find your theme using one of the two approaches shown below:

From the Admin URL

Go to: Sales Channels > Online Store > Themes > Theme Library

Select the theme you want. Then, go to: Edit Code and copy ID from URL.

theme library

From the Preview Link

Go to: Sales Channels > Online Store > Themes > Theme Library

Select the theme you want. Then, go to: Actions. Right-click on Preview and copy the link.

preview link for website

Your preview link will look something like this:

https://example.com/?fts=0&preview_theme_id=120660852782

Extract the theme ID from the theme preview link. For the example above, the theme ID is “120660852782


2. Create an A/B Test.

Now you need to create an A/B test, in whatever A/B testing platform you are using for experimentations. ( Not as a split URL test/redirect test.)

We are using Google Optimize to illustrate on this article:

  • Create the A/B test.
a/b testing
  • Add provided custom JavaScript.

Whatever A/B testing tools you are using, you’ll find an option to add custom JavaScript, and that’s where you’d add the aforementioned code.

You’ll need to make small changes to the provided code: add your theme ID and option theme name. Your theme name could be anything. See the screenshot below to understand where to add your theme ID and name

You can copy the code by clicking here: Copy Code

coding

Note: If you’re using Convert, you’ll need to modify a bit more of the code. Otherwise, you may see a discrepancy in traffic distribution.

modify code

Update the code to match the screenshot above.

  • Set your experiment targeting, audiences, and objectives.
optimize a/b testing

Targeting, audiences, and objectives are customizable based on your needs.


3. Hide the Shopify theme preview bar.

Now, you need to hide your theme preview bar.

If you launch your experiment now, you’ll see a theme preview bar saying that you are viewing a theme preview template. It could be annoying for visitors and may raise concerns that you are running a test on your website.

Hide Preview Bar from the Store

Go to: Sales Channels > Online Store > Themes > Theme Library

Select the theme you want. Then, go to: Edit Code > Assets > theme.liquid

hide preview bar on website

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

Add the following line of CSS code to your CSS file. It will hide the theme preview bar everywhere except on the checkout page.

Hide Preview Bar from the Checkout Page

Go to: Sales Channels > Online Store > Themes > Theme Library

Select the theme you want. Then, go to: Edit Code > Layout > checkout.liquid

checkout page

Add the following line of CSS code to your checkout file:

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

The bad news: You need to be a Shopify Plus Store to be able to access edit in checkout.liquid and hide your theme preview bar from the checkout.


4. Launch the experiment.

You’re ready to launch your A/B test!

Before you publish your experiment and make it live, I suggest performing the proper QA first.

You can follow the following guidelines for QA if you are using Google Optimize or Convert.

If the approach feels difficult to you, feel free to reach out to us: one of our CRO experts or an A/B test developer will help you out.



SUMMARY:

  • Find the Theme ID from the Shopify store.
  • Create your A/B Test on your A/B testing tool.
  • Hide the Shopify theme preview bar form your store and checkout.
  • QA your experiment and launch it when you’re happy with it.

By Md Zahidul Islam

Experimentation Program Manager | AB Testing Expert | Optimizely/VWO/AB Tasty/Convert/DY/AT Expert | JavaScript Developer

Leave a Reply

Your email address will not be published.

Get Our Optimization Checklist

Boost Conversion Rates with this 12-Point Product Page Checklist

Learn how well your product page is performing now and how you can improve it to get more conversions.

Recent Posts