shopify app
A/B testing is a as a data-driven approach to testing and measuring different content and experiences to help you make smart, impactful improvements to your site or app. Leveraging A/B testing on your product pages helps you choose the most appealing product images and descriptions.
In this tutorial, we'll show you how to create and run an A/B test on your product page. Although the example we are using product pages, these techniques can be applied to any of the other page types in your store. Let's dive in!
👉Tip: This tutorial covers how to A/B test your product page, but you can follow these same steps to A/B test your collection page!
Starting in theme studio, select + New Page in the left sidebar and click Edit next to the product page you want to test. If you haven't imported your existing product page, check out our article about importing pages or start by creating a new one.
In order to leverage A/B testing, you first want to create different variations of a page or piece of content in order to measure metrics between the two. To do that, click on the A/B Tests tab right above the preview in the Builder editor and then select "Add A/B test variation." Once you click on that, the new content is created and we can start making changes!
You can rename your new variation (titled Variation 1 by default), adjust the test ratio. You can click Add A/B Test Variation to create more variants.
👉Tip: The default variation is the "control" meaning it will be exposed to search engines, users with javascript off, and/or tracking disabled
Notice that in that tab we are also able to choose the percentage of new visitors that see a particular variation using the sliders.
Now let's go back and edit our variation to include an alternate product image. Click on the Edit tab to go back to the editor and then click edit on the image block to upload a new image. If you also wanted to modify the text, or button, or anything else on the page that you think will help drive conversions, you could do that now too.
Some common test variants to try:
- different product copy
- choosing different images
- adjust your product description
- adjust the order, placement, or layout of elements
Once we have made all the changes we want, we can toggle between the different versions of our page by clicking the dropdown located by "Targeting" at the very top of the editor. This is a quick way to flip between the variations we have to make sure they are looking correct.
When ready, click publish to start the test or you can schedule it to publish later. You can learn more about scheduling here.
Now that we have two versions of the homepage, the next step is to publish our changes using the green button in the upper right corner and wait for the results to roll in. For an A/B test to be an effective tool to determine what modifications to your site are actually working to drive up conversion rate, you need to get see how many people are becoming paying customers based on what version of the page they see. This means you will need to wait to get enough visitors to your site before making any decisions.
To determine how your test is performing, click on the A/B Tests tab, and then click the "View Results" button underneath the sliders. This will take you to the insights tab, where you can see results for the test. At first you will not see many visitors or much of anything there, because the test has not been running long enough. But after a while, you will see some statistics on how your tests are doing.
- 0 performance impact. Unlike any other a/b testing tool, our ab tests do not block and slow down your site
- The Builder editor serves as a single source of truth between its easy drag and drop interface and metrics page
- SEO friendly!
- No DOM blocking manipulation or flashing of unwanted content ever
