A/B split testing is super interesting and can result in data that will help merchants make more informed choices about their storefronts. Generally these tests are best left to apps there's still ways to do this within your Shopify store with some Theme code alone - let's take a peek.

Before we get too far into this I would suggest that you check out a Shopify article about simple A/B testing. It's far more eloquent on the subject that I would be here, so take 5 minutes and give it a read.

You should probably use an app.

I am all for avoiding apps if possible but for this kind of testing they are just damn handy for setting up and managing the tests. Also, they do much better job of compiling data for each tests.

With your DIY hat on you could customise parts of your Google Analytics to improve the tracking of your tests. It might not be super detailed but any extra data is awesome. I won't be going into any Analytics setup here. Just a long winded ramble, and some simple code to demonstrate an idea.

Take a peek at an example

First view the experiment site as it was intended which should have a sparse looking home page that looks something like this (assuming I've not tinkered with it since writing this post):

Now visit the site using our special A/B Testing url (being the normal url with a querystring: ?braveheart) If the code works, you should see the homepage reload and a new magic home page image shown in it's place. Now disable JavaScript and refresh the page and you'll see the image still remains. Congrats, you just saw my magic braveheart A/B test. 

Tired of seeing the braveheart pic? You can clear the test as needed.

Instead of swapping an image you might choose to:

• Add / Modify small bits of text. Obvious example is the add to cart button text.
• Add inline css to override the colour of something. So if your action buttons are blue, you might want to see what happens if they are green.
• Move the position of certain elements. A good example would be swapping the product description to above or below the add to cart button. 
• Enable / Disable core theme features like "quick views". 
• Or even more drastically, show an entirely different design. (but really, don't do this)

For this kind of low budget A/B test you don't want to do anything complex. Keep any tests really simple. Run them for a decent timespan and see if there's any conversion trends in any direction. Make notes, tweak and repeat.

The code

Coming soon...
You could just steal the js parts from the example site but hang ten whilst I make a pretty look gist file. It's a long weekend here, so the priority is on the bbq...

So what's happening in that code?

Not much to be honest. When site has the special url it's is adding a cart attribute with a custom property. The cool thing about doing it this way is that orders made whilst during this mode will be marked as such on the actual order. If you suddenly see a massive influx of orders and they all have the cart attribute you *might* have just tested something successful. 

It also works without JavaScript enabled so that's nifty too...