How and Why You Should Create A/B Tests of Your E-commerce Landing Pages

I remember, a long time ago, the first time I walked down Chicago’s main shopping avenue, Michigan Avenue, I was absolutely amazed by the store windows of more than one store. The Nike store was a great tribute to Michael Jordan, the F.A.O. Schwarz toy store was a spectacular mini-amusement park, and so on. You went in and ended up taking something with you, just to get a souvenir of the experience 😅

The equivalent of a physical store window in your online store is your Landing Page. A landing page is a crucial page of your website: in many cases it is the first page a visitor will see after doing a Google search or after reading a post on your blog.

People often think that the landing page is the home page of your website and, therefore, that there is only one. Nothing could be further from the truth. This type of pages are those pages that we design as entry points to our website. It’s what attracts the visitor’s attention, keeps them on our site, and starts their shopping experience. So, for example, on our Nelio website, some of the landing pages we have to show Nelio A/B Testing are:

• Nelio A/B Testing’s home page
• Nelio A/B Testing for your business
• Nelio A/B Testing for e-commerce
• etc

Each of these pages presents our product from a slightly different perspective to respond to the different types of profiles that may be interested in our product. Thus, for example, the landing page for an e-commerce emphasizes features or functionalities of websites that have an e-commerce. They are created for the purpose of converting potential customers. And it is for this reason that your main purpose on these pages is to optimize your conversion rate.

In this post we will see the main characteristics of a landing page and the best practices to improve their conversion rate.

Features of an E-commerce Landing Page

As you have already seen, an e-commerce landing page is a stand-alone web page created specifically for marketing purposes. It is the page on which a visitor “lands” when they click on a link, either from an ad, a search engine result, or a promotional campaign.

The purpose of a landing page is to get customers to complete a certain action, which in the case of an e-commerce is mainly to make a purchase. One of the main differences of a landing page from others that you may have on the web is, on the one hand, that it is customized to suit a specific visitor profile: the titles, texts, images and testimonials are specific for that profile so that someone with this profile is encouraged to buy. And, on the other hand, a landing page always includes one or more calls to action.

For example, if a person searches how to optimize the conversion rate in their e-commerce and after seeing the different results they clicks on the link of Nelio A/B Testing for e-commerce (you can see a partial screenshot in the image above), when they lands on the page they’ll see a headline that matches the search, they’ll find an image of a store, and a text and call to action that invite them to start creating A/B tests. The page also explains how they can optimize the presentation of the products in their store and includes a testimonial to give more confidence to the visitor. Finally, there are a couple of sections explaining how they can increase sales thanks to the data and, of course, additional information on why they can trust us.

As you can see in the example above, the goal of any landing page is for the potential buyer to find exactly what they are looking for in a matter of seconds. The content of the page is tailored to the buyer persona, including important product features (again, written with a specific audience in mind), adding confidence, and making it easy for the visitor to buy.

The great advantage of having different landing pages is that you can target specific customers much better. The design, value proposition, and call to action can be much more tailored to a market segment.

Why and What Tests Should I Create on a Landing Page

One may wonder why go to the trouble of A/B testing instead of simply implementing the features mentioned above. Well, one thing is what you may believe will improve the conversion of your users and another, very different, is what really happens on your website. The only way you can check what works and what doesn’t is by performing A/B tests.

As you may already know, an A/B test starts with an improvement hypothesis (for example, we might think that a redistribution of the Landing Page to better display certain relevant information will lead to more conversions), implements the hypothesis in a variant, and tests if this variant performs better than your original page. Technically, the A/B test will show one variant or the other to each of your visitors, track what they do, and determine which one is the best (if any).

This guarantees that any change you end up applying to your site will have a better conversion rate, because you verified with real data whether said change is an actual improvement or not.

Keep in mind, as I will show you with an example, that the results obtained in an A/B test may be different from those expected, and that is why it is so important to perform them. In addition, A/B tests must be performed continuously and be part of what is known as the conversion rate optimization process or CRO.

Let’s take a look at some of the best practices that you can start using on your website’s landing pages.

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

Simplify the Page

A landing page should be simple and easy to follow. Make sure the visitor isn’t overwhelmed by too much text or gets lost and can’t find the “Buy Now” button. Some tips to simplify the page are:

• Show concise and direct headlines
• Display clear and visible calls to action
• Eliminate navigation links that do not lead to the checkout page
• Show product details with bullet points
• Reduce the text showing only the essential information

Think of a landing page as a page where you first take a quick glance to decide whether to stay on it or try to find something better. Avoid unnecessary text and limit yourself to answering what adds value to the visitor.

Although the theory is fine, the most important thing is to create the A/B test that confirms that the simplification you have created on your page is indeed the one your visitors prefer. For example, we wanted to simplify our Nelio Software home page and created an A/B test of it. Our goal was to design a simpler, more visual, and more concise alternative version to increase conversion.

We run the test and, surprisingly, the new variant we created was not a better solution to improve conversion. Had we not tested it, we would have applied a page that we thought was better but actually wasn’t. You will find the details of the A/B test that we performed in this post.

But as you can see in the following image, we didn’t stop there and we continued testing different variants of our Nelio’s home page. The design our home page has at the time of writing this post is very different from the previous proposals: it’s clearer, simpler, and tidier. And it performs better!

The First Fold of Your Landing Page

The first fold of your landing page is the most important section. It’s the first thing every visitor who lands on that page will see. Whether they continue browsing your website, scroll down to see more, or flee to the Google search engine in less than two seconds depends on it.

Unfortunately, you can’t have all the information in this first fold: you must choose carefully what you put in there. What’s the most important piece of information you need to tell a visitor? Creating A/B test of the first fold can have a great impact on improving the conversion of your website.

For example, in the Nelio A/B Testing landing page in which the product is described and whose conversion objective is to get the user to visit the product pricing page, we tested different versions of its first fold. Hover over the block and move the slider around to compare both versions:

In the variant we changed the title and instead of the product name, which already appears in the logo, we added a message that would arise the visitor’s curiosity. A different color? A different shape for the buttons? An alternative location for it all?

Following on from this, we changed the subtitle to something that indicates that we have the solution to satisfy their curiosity: “create and test different versions of your WordPress to discover what your audience likes the most and improve your conversions”. And finally, we changed the text of the action button by adding a point of urgency: “Start now”. In addition, the first section of the website would take up the entire first fold. The goal was to focus on the message.

In this case, the results of the A/B test were different for the English version than for the Spanish version. While in the English version we obtained a conversion improvement of more than 12%, in the Spanish version we were unable to obtain conclusive data. For more details on this experiment, click here.

This example shows you once again the importance of A/B testing your landing pages. You cannot know what impact any change will have on your website until you test it.

Featured Images

Among the elements of the first fold of a website that most affect the visitor’s perception, the feature image we use is key. As it is the first thing they seen, if the general feeling of the visitor is one of rejection, we will have lost them. In addition, featured images play an important role when the content is shared on social media.

For this reason, something as easy as creating an A/B test of featured images can bring a smile to your face when you see the conversion results. On the Nelio Contents landing page, whose conversion goal is that our users end up visiting the pricing page, we performed an A/B test of its featured image.

On this page, the first fold contains a featured image showing a smiling man with a post-it on his forehead and a thick beard, in front of a computer. On the computer monitor we see the editorial calendar of Nelio Content. We decided to create an A/B test with two additional variants: the first alternative is a more conventional image showing a team of people working in front of a laptop. In the second option we showed a screenshot of the editorial calendar, to which we had applied a blur effect to make the text above it more readable.

In this case, was any image better than the rest? What do you think? Will the bearded gentleman be able to beat the other two featured image variants?

Well, curiously there was a winning image. Here’s the full test results page:

Specifically, the image with the group of people in front of the computer had a 25% better conversion than the bearded man with almost 90% confidence in the Spanish version and a percentage improvement of almost 15% in the winning English version, now with an even higher statistical reliability, exceeding 95%.

As you see, it is very difficult to guess what will work best if you have not created an A/B test to corroborate your hypotheses. You will find more details about this test here.

And in the same way that we test different featured images, another interesting type of test to try is whether it is better to change an image for a video. In this post we explain more details about this experiment.

Call to Action Buttons

Another type of test that you should try on a landing page is testing different styles of call to action buttons on it. You test the size of the button, its style, and its text.

Following some of the theories about what color is best for a call to action button, decided to do an A/B test on the color of the buttons on the Nelio Content landing page. In this case, we performed a CSS styles test with Nelio A/B Testing.

Here is what the action buttons look like when viewed from the CSS style editor for each variant of the A/B test we performed. First you have the original version, with the buttons in orange. The other two variants include the CSS to set the buttons in green and red, respectively:

In this case, the results we obtained (you can see here more details about this experiment) were that green is the color that worked best for our English audience of the Nelio Content pages. However, for our Spanish audience, we have not been able to find a color that works better than the one we already had.

How Do I Create These A/B Tests?

Creating an A/B test is very easy if you use an A/B Testing tool. In particular, if you use Nelio A/B Testing, a fully integrated WordPress plugin, you will be able to create the variants of any test as easily as making modifications to a page with the block editor.

In addition, as you have already seen in some of the previous images, you also have the results in WordPress itself and you have no need to have any coding knowledge or use a tool external to WordPress.

In this complete guide I explain how to create A/B tests with the WordPress block editor.

Start Improving The Conversion of Your E-commerce

Improving the conversion in your e-commerce is as or more crucial than increasing the number of visits to your website. Landing pages are the pages that your visitors reach and getting them to convert should be your main priority. You have already seen that all of them have some common characteristics but only if you create A/B tests will you know how to improve them. We have shown some examples, but instead of copying them, make your own hypotheses and start experimenting.

Our experience creating A/B tests continuously has allowed us to increase sales with very little effort. What are you waiting for to improve the conversion on your website?

Featured image by Igor Miske on Unsplash.