Magento Checkout: Customization, A/B Testing, Optimization

Jun 3, 2020

332 Raman Kapanets

Magento Checkout: Customization, A/B Testing, Optimization

Here you will learn about checkout process in Magento 2 – its basic and more advanced customization capabilities. We also list the differences between Magento 1 and Magento 2 checkouts and share proven-to-work tips about checkout optimization and A/B testing.

Checkout in Magento 1 vs Magento 2: What are the differences?
How to customize Magento checkout: Add an extra step
Magento Checkout A/B Testing
Best Marketing Tips: How to Optimize Your Checkout Process

Checkout in Magento 1 vs Magento 2: What are the differences?

The checkout process in Magento 2 has been significantly improved compared to Magento 1. Now, user navigation is much easier – instead of six steps that a user had to go through in Magento 1, the second version offers a simple Magento two step checkout.

Before:

 

magento 1 checkout

 

After:

 

magento two step checkout

 

There is also a Magento guest checkout available now (if Yes is selected in website settings). Besides that, Magento 2 can automatically search for the existing registered clients, analyzing their emails. The optimization of order-making process and the use of popular payment gateways allowed speeding up the checkout process by 38%.

So, the overall opinion is that in Magento 2, the checkout process has become simpler, faster and more user-friendly.

On top of that, Magento 2 offers higher scalability. More up-to-date technology stack allows the platform to process about 250,000 orders per hour which is 117% more than Magento 1 could possibly process. The newer second version is also able to handle over 2 million catalog views per hour.

Migration to Magento 2 can reduce cart abandonment rate due to the shorter and simpler checkout as well as provide you with an access to some useful modern features, including:

  • Non-use of outdated PHP versions
  • Extended SEO capabilities (Meta tags, canonical urls, mobile-friendly interface)
  • Extended search capabilities, including the use of Elasticsearch
  • Additional payment gateway features
migration to magento 2

Migration to Magento 2

Take your online store to the next level with BelVG Magento Migration

Migrate today

How to customize Magento checkout: Add an extra step

There are a variety of third-party modules that assist in checkout process customization and help make it simpler and more convenient for the end user. Most of these modules allow creating a Magento one step checkout. You can find some of the ready-made solutions at the official marketplace.

You can also add an extra custom step manually. This step should be implemented as a UI component. To ensure compatibility, easy updates and simple maintenance, you should not edit Magento code which means that an extra step should be implemented as a separate module.

Step #1. Let’s create a view part for implementing a new checkout step:

1. First, it is necessary to create a directory for modules – all the user modules should be stored there. For correct work, the new module should have a dependence on the Magento_Checkout module. You should not use Ui as a part of the name of the custom module as the use of %Vendor%_Ui may cause an error.
2. You need to create a .js file that implements the view module.
3. Then, you need to create an .html template for a component.

Here is a more detailed instruction of Step #1:

Add a JS file that implements a new step

New checkout step should be implemented as a UI component which means that its JS implementation should be a JavaScript module. Another important point is that this file should be located at the <your_module_dir>/view/frontend/web/js/view directory. <your_module_dir> here shows the path to the module directory from the root directory. It will be either app/code/<YourVendor>/<YourModule> or vendor/<yourvendor>/module-<module>-<name>.

For example, <your_module_dir>/view/frontend/web/js/view/example-step.js:

Add an .html template.

At the module directory, you should add an .html template for a component. It should be located at the <your_module_dir>/view/frontend/web/template directory.

For example, example-step.html:


Step #2. Add your step to checkout page layout.

To make your new step visible on the page, you should declare it at the checkout page layout which is defined in checkout_index_index.xml.

That is why you need to add an extensible checkout_index_index.xml file here: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

checkout_index_index.xml example looks like this:

Magento Checkout A/B Testing

To evaluate the effectiveness of the implemented changes, you can use A/B testing. The whole point of it is in classifying website visitors into segments randomly. One of the segments will see no changes – it is a control A segment. We will evaluate the effectiveness of the implemented changes based on the data from this segment. Website visitors that belong to the B segment will see the adjusted website version.

Then, you need to decrease the influence of external factors by making sure that the users see pages at the same period of time. It is also important not to mix up the segments.

A/B testing works well for the following cases:

1. Magento Guest checkout vs. Member checkout

Member and guest checkouts are quite different. When website visitors sign up, they gain some advantages, including order history and simpler checkout process in the future. Also, the user can get various notifications, for example, about good deals. It seems attractive but there is also one disadvantage – one more checkout step. Doesn’t it scare off potential customers? Thanks to A/B testing, you can find out and compare conversion rates with guest or member checkouts.

2. Trust and security signs

With the help of A/B testing, you can evaluate how trust and security signs influence conversion rate. A user may assume that particular signs on a checkout page mean that the data will be stored safely. It can encourage this user to order a product from the website without hesitation.

3. Remove any point of friction along the checkout way

If you delete elements that can distract a user from the checkout process, it may also raise the number of successfully completed orders. For example, you can test whether a navigation panel or live chat influence the number of people that complete the checkout process.

4. One step vs Multi page checkout

It can also be useful to find out how changing the number of checkout steps influences whether people complete the order or not and when they leave the page if they do.

5. Calls To Action

CTAs are used to navigate website users and encourage them to perform a specific action: to read, download, share, buy or others. The main goal here is to make your CTAs clear. If you simply add Continue or Send buttons, it may not make any difference for a user. You can experiment with colors, icons, their sizes and button locations to find the best combination.

Vlad Yunusov

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Vlad

Best Marketing Tips: How to Optimize Your Checkout Process

  • No surprise costs

Your potential customers may not become actual ones if they encounter extra costs by the end of the checkout process. Shipping costs, taxes and fees are one of the most common reasons for checkout abandonment. The statistics prove this point – 61% of users that leave the order incomplete, do it due to the high extra costs [1]. So it should become your first step in checkout optimization process.

 

  • 6-8 fields maximum

Too long checkout process discourages 26% of potential shoppers [2]. If you keep it simple for any website visitor, it is likely to increase your conversions among those who value their time too much to waste over 5 minutes to complete a single order.

There is a proven-to-work way to reduce the number of unnecessary fields that make your checkout way too long. First of all, you can create a single Name field instead of First Name and Last Name. Secondly, you can set the billing address the same as the shipping address by default. But be careful with this point, you should still leave an opportunity for a user to change this default option.

 

  • No distractions, no other products, no sale ads

It may come across to be a good idea to showcase some of your best-selling products to a person who is about to purchase something else. However, in most of the cases, it won’t work out well or increase your average cart value.

Let’s imagine a situation – you sell shoes and a person who wants to purchase a pair from you sees other nice sandals at the checkout page. Then, your potential customer may leave the checkout page to take a look at this other pair more in detail. It makes customers go back – further from the final step – actual checkout.

So, you’d better not showcase random or the same items. However, there is chance that you could actually more, placing a correct product on a checkout page depending on the customer’s initial interest. But you need to approach this strategy smart and learn more about up-selling, cross-selling and related products. Consult our guide here.

 

  • Capture the user’s email address as early as possible

In case a customer leaves the checkout page anyway, you will have an opportunity to remind them of a product they used to be interested in. But – only if you get customers’ email before they leave. Following up a potential customer with an abandonment email has several advantages.

Firstly, you know for sure that the person was or still is interested in the product. Secondly, there is a chance that they forgot about the purchase because they simply got distracted. So, if you remind them of it, they will just complete the order. Another important advantage is that email marketing in general is not really resource-intensive in terms of both money and time. The email sending programs are not that expensive to install and maintain and a lot of work there can be put on automation.

 

  • Multiple payment gateways

Any user will feel like home at your checkout page when they see a familiar payment method. This step is especially important for your checkout optimization journey if you ship internationally. You should carefully consider what payment gateways are most commonly used in a country which market you target and offer different options like PayPal, Authorize.Net, Braintree, Klarna or any other.

Wrapping it up

Checkout page is where it all begins and ends. Your goal as an online merchant should be to design and build this page in such a way that your customers will never want to shop anywhere else. Consult our guide and all the steps described above to reach a desired result and deliver user-oriented shopping experience. Thank you for reading! In case you want to learn more about other payment gateways, different online store customization options or get some Magento development tips, stay tuned with our ecommerce development blog.

Vlad Yunusov

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Vlad

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *