Developer’s guide to Magento 2 checkout changes

January 10, 2017 by Leah Na'aman

There are many reasons why eCommerce customers abandon their carts and while some are out of your hands, there are a significant number that fall on the shoulders of web developers. One core element of customer conversion is an optimized checkout experience. Shoppers should be able to navigate the process quickly and efficiently, completing their purchase with ease. Thankfully, the Magento 2 checkout was designed specifically for this purpose.

With Magento 1, the checkout journey was extended over six steps, making it time-consuming and often confusing for customers who were trying to place an order. Thankfully, the Magento checkout has been given a significant makeover with the release of Magento 2. The new platform’s out-of-the-box features make it much easier for developers to build a checkout that is sleek in design and effective in converting.

Magento 2 Checkout: The big fundamental change

With these new features come a lot of time-saving benefits for web developers; however, there is a new operating system to get to grips with and this does require some study in the beginning.

Magento 2’s checkout now runs on Javascript and KnockoutJS. You’ll see KnockoutJS featured on the backend of most of the platform’s pages, but it’s main arena is the checkout page. This section is now automatically split into two steps, each containing multiple KnockoutJS components, which are defined, along with any dependencies, in an XML file.

This file is run through the layout processor and initialized in the main checkout template file. The new system is a learning curve, but you’ll find a great guide to navigating it here.

The Magento 2 checkout features that will stop people abandoning their carts

An average 68% of shoppers abandon their carts, causing eCommerce stores to lose around $18 billion annually. This is a big problem for online retailers, as well as the developers trying to optimize the online stores. But it’s clear that Magento has listened to what its community needs and has implemented a number of positive changes and methods for the newest platform.

Improvement #1. Minimum step process

The checkout process has been significantly simplified. When using Magento 1, customers would need to go through a six-step procedure before an order was completed and now, it’s just two. The customer’s information is acquired during Step 1, followed by their billing information in Step 2. Quick and simple, just like an optimized checkout should be.

Improvement #2. Minimalist design

In the same way too many steps can bore or frustrate a customer, pages with an overload of information on them can also send shoppers running. In the Magento 1 design, there are numerous links to distract customers from their desire to make a purchase – something that also made pages look unpolished and less trustworthy.

Magento 2’s basic design is much better. All a customer sees on their checkout pages is the company’s header and the information required from them. Again, this creates a more simplified experience and lessens the likelihood of them clicking away.

Improvement #3. Automatic guest status

With Magento 2, it’s no longer necessary for a customer to create an account just to make a purchase. Shoppers are automatically logged as guests and allowed to complete their order by entering the necessary information.

There is an option to register an account on the Order Success page after the payment has been approved, using the information entered for the order. This means retailers still have a chance to encourage shoppers to sign up, but not at the expense of a sale.

Improvement #4. Email recognition

This is another great out-of-the-box feature. If a customer has registered with the eCommerce store, their shipping and billing information will be automatically inserted once they enter their email address during the checkout process. Again, this is a time saver that reduces the steps a customer needs to take by removing the need to officially sign in.

Improvement #5. Delivery cost calculation

Magento really made usability and design a priority when building checkout features for their latest platform. This version calculates delivery costs during the checkout process and displays options for the customer to choose from. Once a choice is made, the order form automatically updates to incorporate the selected option, giving the customer clarity and making the process easier.

Improvement #6. Helpful order summary

Another way Magento 2 has provided extra clarity for customers is its new order summary section. The block is visible during the checkout process, displaying products along with their images and important details, such as color. This means customers are made aware of the exact items in their basket and don’t need to click away to ensure they selected the right product.

Improvement #7. More payment options

The latest version comes with more in-built payment options, reducing the amount of third-party extensions developers need to incorporate manually. Both PayPal and Braintree are included features, meaning you’re less likely to lose a customer who has to go hunt for a credit card and then decides the purchase isn’t worth it.

Shoppers can pay with PayPal without leaving your online store, while Magento Enterprise provides Braintree support that allows credit card information to be submitted directly from the checkout page to Braintree.

Improvement #8. Intelligent flow

With Magento 1, customers were asked to enter their billing address before their shipping information, which caused quite a bit of confusion and even resulted in failed payments. On the newer platform, billing addresses are only required if the method of payment specifically needs it and once that payment method is selected, the form appears below.

Another issue with Magento 1 was that discount code submission sections were located before the checkout process. In Magento 2, the box has been placed under the payment options, allowing for a smoother, more natural customer journey.

Conclusion

We’re big fans of Magento 2 here at Shoppimon and the changes made to the checkout process are long overdue and very welcome. On the technical side, the new JavaScript system is much more structured and components are organized efficiently making it far easier to adjust functionality when needed. Like most elements of Magento 2, this will require some upskilling, but the time is well spent and will result in a smoother store building and maintenance process down the line.

Aside from that, there are so many great out-of-the-box features included that developers have a lot less to do when it comes to designing an optimized order processing system that makes the checkout experience an enjoyable one for customers. Magento 2’s checkout is definitely a winner.

Facebookgoogle_pluslinkedin

Author

You may Also Like