Close
Type at least 1 character to search
Back to top
By

Make custom A/B testing with shopify

One of the most popular methods of UX optimization is A/B testing. Also called bucket tests or split-run testing, A/B testing is a controlled experiment with two variants, A and B. As the name implies, two versions are directly compared. This type of testing is most efficient when variants are identical except for one changed element that might affect user’s behavior.

This tutorial is created primarily for Shopify users, but the same concept and javascript code can be used in any project.

In this example, we will make two pages for the same product in Shopify and compare their conversion rate. So let’s get started!

Problem statement

We want to improve the conversion rate on the product page and the hypothesis is that adding a sticky “Add to cart” button will help with that. Naturally, we would test this hypothesis before making this change in production. In this controlled test, Variant A is the default product page and variant B is changed layout with added sticky “Add to Cart” button.

Create a new template

In your themes editor create a new product template and name it “product.split_test.liquid“. If you’re not sure how you can check out the Shopify tutorial. Put the following code in your new template file.

{% comment %}
The contents of this template
can be found in /sections/product-split
templates A and B
{% endcomment %}
<div class="split-unit visually-hidden">{% section 'product-split-A' %}</div>
&nbsp;
<div class="split-unit visually-hidden">{% section 'product-split-B' %}</div>

As we can see, the code is calling for two files in the sections folder so go on and create them now. The file named “product-split-A.liquid” should be the exact copy of your current product page (you can find it in existing sections) and “product-split-B.liquid” will be your alternated template you want to test out.

Adding javascript

I mostly prefer to create a standalone js file and include it in the files where it’s needed. However, in this case, we will use the script in this file only so it’s better to add the script as a part of the template file and reduce the files clutter. So in your “product.split_test.liquid” file put this script below the previous code.

<script>
 
var decrease_increase=0

var counterdate=new Date()
var currenthits=counterdate.getTime().toString()
currenthits=parseInt(currenthits.substring(2,currenthits.length-4))+decrease_increase

if (localStorage.pagecount)
 {
 localStorage.pagecount=Number(localStorage.pagecount) +1;
 }
else
 {
 localStorage.pagecount=currenthits;
 }
document.write("Visits: " + localStorage.pagecount + " time(s).");
 
$( document ).ready(function() {
   
  var splitUnit = document.getElementsByClassName('split-unit');
  console.log(splitUnit);

  var suA = splitUnit[0];
  var suB = splitUnit[1];
  console.log(suA);
  console.log(suB);

  if(localStorage.pagecount & 1) {
    suA.remove();
    suB.classList.remove("visually-hidden");
    //document.cookie = "split_test=Template B";
  }
   
  else {
    suB.remove();
    suA.classList.remove("visually-hidden");
    //document.cookie = "split_test=Template A";
  }  
});
 
//var templateCookie = document.cookie;
//console.log(templateCookie);
 
</script>

The script will result in showing different templates (A or B) on every visit or page refresh. If you want to keep the same template per session, just uncomment the cookie-related lines in the code and use the condition “if the cookie exists” to get the cookie value and show the same template.

CSS

If the CSS class “visually-hidden” is not in your CSS, add this in your main CSS file.

.visually-hidden {
display: none;
}

Template marker

To actually know which template performed better, you can pass the template marker value as a product line item property. This property will be added to the cart and passed on to checkout ending up in your report. In the end, you can just generate a report from the admin or export CSV and simply compare how many conversions were marked as “Split test unit A” vs. “Split test unit B”. So let’s set up the code needed for this.

Open up your “A” and “B” section files, find your add to cart submit button and just above the button code add respectively:

Code for section “A”:

<p class="line-item-property__field visually-hidden"><label for="your-name">Split unit name</label>
<input id="your-name" name="properties[_Split Test Unit]" type="text" value="A" /></p>
}

Code for section “B”:

<p class="line-item-property__field visually-hidden"><label for="your-name">Split unit name</label>
<input id="your-name" name="properties[_Split Test Unit]" type="text" value="B" /></p>
}

And there it is, you have your own A/B testing functionality. As mentioned before, this tutorial is created primarily for Shopify, but the same concept and javascript code can be used in any project.

Coding