eCommerce

How to A/B Test Shopify’s Checkout with Google Optimize

Learn how to a/b test your Shopify checkout in 6 easy steps.

How to A/B Test Shopify’s Checkout with Google Optimize

The ability to customize Shopify’s checkout is quite limited (as you are probably well aware of!).

It would be nice to fine-tune the checkout where I see friction points through continual a/b testing.

Now you can!

With our guide on installing GTM that works across every page (yes, including checkout) for Shopify and Shopify Plus stores, you can now take advantage of using Google Optimize to test your own checkout too.

Here’s how to a/b test your Shopify checkout in 6 steps:

Step 1: Install Google Tag Manager

This is a required step because we implement the Google Optimize page flickering tag via GTM. We also have more potential tests to run if we have the functionality that GTM provides us in each step of the checkout process.

The short version is: copy your GTM Javascript tag, without the opening and closing <script> tags (<== very important), in your Google Analytics additional script setting here:

shopify gtm

If you haven’t already, read our guide on implementing GTM in your own store that supports checkout pages as well.

Step 2: Install Google Optimize

If you haven’t signed up for Google Optimize yet then you can sign up here.

Once you’ve signed up, you’ll need to deploy Google Optimize to your store in two steps:

a) Include the required ga(‘require’, ‘GTM-ABC123’) snippet that is in step 1 of the setup process here (you’ll notice this is just below the GTM snippet from Step 1 above):

shopify-optimize-snippet

b) Implement the page flickering snippet in Google Optimize step 2 via GTM custom HTML tag. Once you copy this snippet from Google Optimize, head on over to GTM and here is what the tag looks like in GTM.

note: change out the GTM-xxxxxx to be YOUR OWN GTM CONTAINER ID (I’m not yelling, promise ūüôā ). By default this is your Optimize ID, but this needs to be your GTM ID.

optimize-page-flicker

Read our complete guide on implementing Google Optimize on Shopify.

Step 3: Analyze your Checkout Funnel

We’re looking to find out¬†what your overall checkout to checkout success rate is and more specifically your step by step progression success rate.

For example: let’s say you’ve had 2,000 conversions in the last month and 4,000 unique users enter your checkout. This means your checkout success rate is 50% (x=2,000 / 4,000).

There’s a lot of potential revenue there if you get this up to a 60% success rate!

This step can be accomplished in one of many ways:

  1. Google Analytics > Conversions > eCommerce > Checkout Behavior (not likely to have)
  2. Google Analytics > Conversion > Goals > Funnel Visualization (you might have if you’ve set up a checkout success goal)
  3. Google Analytics > Behavior > Events > Event Action contains “Viewed Checkout” (you’ll definitely have access to this)

Unless you’ve customized the Checkout Labeling steps as part of your Enhanced Ecommerce analytics (not common) then option 1 probably won’t give you anything other than checkouts started and checkouts completed.

If you’ve configured a checkout funnel Google Analytics goal (see how here) then you should have a funnel view as part of option 2. This report gives you % of sessions that continued through each step of the checkout.

Finally, the last option is to use your native custom event data. Inside of GA > Behavior > Events > Filter by “Viewed Checkout” which should end up looking something like this:

ga-events-viewed-checkout

You can then determine which steps have the highest drop off of sessions to help in hypothesizing what tests you should be running…

Step 4: Create Test Hypothesis

This is the fun part! Utilizing GA data + existing customer feedback + your own innovative/gut feeling on what would help your checkout perform better.

While this email won’t go into too much detail on analyzing data in GA or how to evaluate qualitative feedback¬†from customers, you may want to start by asking yourself what friction points are¬†causing users to exit:

  • Lack of shipping and return details¬† (so users exit in search of this)
  • Lack of live chat or other customer support options
  • No customer confidence builders reinforcing security and privacy
  • Customers leaving in search for coupons

In the example below, I’m going to hypothesize that there are too many users exiting step 1 for alternative payment options (Paypal, Amazon) that result in their own exits prior to completing the transaction. Additionally, based on my persona types I’m going to include a Norton Trust confidence badge near my order total block in the right column.

Step 5: Create A/B Test Variant(s)

I’m going to make an assumption that you have some familiarity with Google Optimize (or have reviewed our guide linked above in step 2).

This step will show you how to create a variant targeting changes to your checkout.

Once logged into Google Optimize then > Create a New Experiment > Create New Variant.

Be sure to navigate to your own checkout in another tab and copy the URL to be used in the editor page URL shown here:

editor-page

Here is my variant before making any changes:

baseline-test

Now you’ll want to use your cursor to find the area(s)¬†that you want to edit.

This screen shows me selecting the area where alternate payment options exist and then clicking “Remove” in the content editor seen in the bottom right corner of the page.

remove-paypal-option

In this next step I’m going to select the subtotals block where I want to include my Norton badge and click “Insert HTML”:

insert-html

Then I select “After” in the Insert HTML modal:

select-after-option

And then I include my Norton badge image (that I uploaded to my store’s image files) with an <img> tag that is wrapped in a <div>:

append-confidence-builder

And now I see my final variant that is hiding additional payment options and displaying the Norton badge:

variant-final

In this example test, the Norton badge will repeat on every step without any further edits needed. If you are testing different changes on each step then you’ll have to navigate through the checkout steps to make similar updates.

Step 6: Complete Required Google Optimize Steps

Now you’ll need to set your Objectives for the experiment and finalize the targeting URLs.

For page Objectives, I suggest utilizing the built-in Transactions and Revenue along with any other custom goals you might have specific to your test:

google optimize objectives

For targeting URLs, you’ll want to create a regex matching rule for your checkout like this:

google optimize url targeting

The pattern is:  .*\/checkouts\/.*

Step 7: Start Experiment & Monitor Results

Now you’re ready to launch your test!

Depending on your traffic, you will want to wait for at least 1-2 weeks for your test to run before making any conclusions.

Happy testing!

If you have any questions just leave a comment below!

DIY eCommerce UX Audit

Download our FREE 117 point UX audit that you can apply to your own website.


Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

  1. So, if you add different product, and proceed to checkout, the checkout page is different? right?

    So this methods is only valid if i have particular product in my shopping cart?

    1. Hi Matthew,

      This method will work with any product that you are checking out with unless you have conditions set for specific products. Otherwise the variation would be the same experience for all products.

  2. Hey Brad,

    I tried adding a trust badge exactly as you have done, but the checkout page gets into an endless refreshing loop as it says ‘calculating taxes’.

    I’ve tried on diferent browsers, cleared cookies etc, but no luck. Did you have any such issues while setting it up?

    Thanks for the great tips ūüôā

    1. Hi Jeremy – interesting. No, I haven’t run into that issue personally. What is your site URL? I can take a quick look. I assume you don’t see this issue with the optimize test not running?

  3. Hey Brad,

    i don’t know why if i do everything wrong.
    But i always get an error in my – Chrome Tag Assistant Extension when loading the Optimize.

    Error: Analytics configuration mismatch

    I’ve read that its not possible to load install Optimize if Google Analytics is setup within the shopify buildin Google Analytics implementation.

    Do you know if its right?

    regards and thanks

  4. Great information Brad! However, has anyone been able to get Google Optimizer to work on Shopify especially for mobile and tablet? I have tried to get it working and when setting up experiments I get an error “This page uses security features that are incompatible with Optimize mobile editing.” I can’t setup experiments for mobile or tablet especially for the navigation as it switches the navigational layout and I’m unable to account for the changes within Optimizer due to the error.

    It works great for desktop just not the majority of our traffic.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Talk with Us

Please complete the form to request a demo, discuss our solutions, or to just say hi!



Some of our clients