How to A/B Test Product Images on Shopify with Google Optimize

When a shopper views a product page, first impressions matter. And nothing creates a bigger impact than the product image that they see. How can we experiment with that image in a structured way? This guide walks you through an A/B testing process.

Update (August 2023): With Google Optimize being sunset, I’m now using a new approach to A/B test images. If you’d like help with that please connect with me on LinkedIn.

Pre-requisites

We’ll use Google Optimize to implement our A/B test, so you’ll need to make sure you have that integrated with your store. There are plenty of tutorials for this, but the process typically looks something like this:

1. create a Google Optimize account
2. get your Google Optimize snippet tag
3. paste the tag into your theme.liquid file (or use Google Tag Manager if you already have that)
4. ensure you have a Google Analytics property set up and connected to your store, which you will also connect to Google Optimize

Approach

True A/B testing of an image on Shopify is difficult because together with your chosen theme they control all code that determines when images are loaded.

In order to make the test simple we will use the following approach:

• Test only 1 product, and the first image
• Test only on the product detail page (i.e. not homepage, collection, etc)
• We will actually always have both images, in the first and second positions
• Therefore, our test will actually be to vary the order of the images

This is a good approach because it can be set up in under an hour, and yet still give you a clear idea about which image is better — whichever image is first will have the majority of the image on conversion.

Implementation

Step 1

In your Shopify Admin, ensure the product you want to test has the two images that you want to test as the first and second in the sequence.

I recommend you choose two images of quite different nature (e.g. one serious, one playful), in order to try and generalize the results for the rest of your store.

Step 2

In Google Optimize, create a new “experience”, give it a name like “Image Switch”, put in your product detail page URL, and choose the type “A/B test”.

Step 3

Click “Add Variant”, and ensure the “editor page” and “page targeting” rules are limited to the product detail page of your product.

Step 4

Click edit for your new variant, and you will see a preview of your product detail page.

Step 5

We now need to understand the changes that will switch the order of the first 2 images.

The exact approach here will vary depending on the shopify theme that you are using. I am using the “Refresh” theme, but going through the following process will work for most themes.

We need to reverse the process that happens when the second image is selected. To understand this, you’ll need to inspect the page code. Right-click on the main image, and the thumbnail images, select “inspect code”, and examine the differences before and after you click on the second image. In my case, I see the following:

the first “li” element has the class “is-active”, while the second doesn’t

the second thumbnail has the property aria-current=”true”, while the first doesn’t

• there are actually two main images, one shown and one hidden, the class “is-active” is added or removed to show/hide them
• the thumbnails are buttons, which when selected have an outline, and then when deselected the outline is removed

To summarise, we need to make 3 changes:

1. change which image is shown as the main image
2. re-order the thumbnails
3. change the presentation of the thumbnails so that the first has no outline but the second does

If you can’t figure out which changes are needed for your theme, please drop a comment below with a product page link and I’ll happily help you!

Step 6

Let’s create the changes from step 5.

Reorder the thumbnails

Click on each of the thumbnails, then click the grid icon in the top left and copy the values of the “element selector” for each.

Then with the second thumbnail selected, click “Add Change” and choose “Reorder”. Then paste in the two “element selector values” with the second one first, and choose “before”.

Change thumbnail presentation

Select the first thumbnail, click the grid icon in the top left, add change, and “Attribute”. Set the Attribute as “aria-current” and the Value “true”.

For the second thumbnail, we need to remove the aria-current attribute (it doesn’t work to simply set it to false), so instead of edit attribute we use run javascript on the element:

Show/hide main images

Use the same approach to show/hide the main image.

Change the class attribute of the second main image as follows:

And finally, change the class attribute of the original first main image to remove the “is-active” class:

Step 7

That should be all the changes! You can leave the editor page now and go back to the experiment overview and hit “preview” for your variant to check that the image order switch is done correctly.

Set Objective & Go Live

Ensure your Google Analytics property is linked to Google Optimize, and then choose an experiment objective from the list. I recommend you choose something corresponding to either add to basket, or check out completion.

Then hit “Start” in the top right to go live!

Analyzing the Results

You can jump over to the “Reporting” tab and you’ll see something like this, which will initially not have any data.

As your visitors experience the test, this will populate and Google Optimize will guide you on which variant (i.e. image) is the winner!

Next Steps

I hope this has been a helpful and relatively simple first step to experimentally optimizing your product images on Shopify.

If you’re interested in generalizing this approach, my agency Permutable offers a series of AI-powered experiments for eCommerce stores.