May 30, 2024

How Hyva Checkout Modernizes Magento E-Commerce Stores

Elena Pashkovskaya

Technical copywriter

Hyva theme

Hyva Checkout: Features, Advantages and Installation How-to

Elena Pashkovskaya

Technical copywriter

Hyva theme

Hyva Checkout: Features, Advantages and Installation How-to

You probably heard about Hyva, a Magento 2 frontend theme that proves to be simple, fast, and efficient, winning the hearts of developers around the world for over 3 years. Last year, in 2023, the Hyva team introduced the Hyva Checkout module, which completely shifts the look and feel of the Magento 2 checkout process. Let's see how.

What is Hyva Checkout?

Hyva Checkout is a Magento 2 module that allows users to build a customizable checkout page with the Hyva theme frontend. The Hyva theme is being used on 3,709 websites, and we expect Its usage to increase as it is fast, responsive, and customizable.

OneStep Layout of the Hyvä Checkout

Note that Hyva Checkout is not the only option available for the Hyva theme. The other checkout modules include Luma checkout (Magento 2 standard checkout) or React checkout, an open-source module enabled by the React JavaScript library. Nevertheless, Hyva Checkout offers multiple advantages, including:

  • Multiple layout options: Сustomize your checkout page for desktop and mobile users, providing the best possible shopping experience.
  • Speed-optimization: Сompared to standard Magento 2 Luma checkout, Hyva checkout is 13 times faster on mobile devices with fast 3G.
  • Mobile-friendliness: Hyva Checkout includes a set of layouts especially for mobile checkout, making it not only customizable but also exceptionally fast.
  • Regular updates: With Hyva Checkout, you won't have to worry about updates — they are frequent and ensure the module's high performance.
  • Extensive documentation: Hyva Checkout developers provide comprehensive documentation for their products to ensure that you won't get lost during installation and maintenance.
  • Developer-friendliness: Hyva Checkout has a straightforward structure, a clear, logical chain, and fewer files, reducing the development workload.

Advantages for businesses include improved conversion rates and increased customer satisfaction. A great checkout page contributes largely to cart abandonment rate decrease and improves overall user experience, making shopping enjoyable and easy. Additionally, seamless, fast, and personalized checkout can make your store stand out from the competition and increase revenue.

TwoStep Layout of the Hyvä Checkout

It is worth noting that Hyva Checkout is a separate module and does not come with the Hyva Theme license — you should purchase it separately. The one-time fee for the Hyva Checkout module is €1000, and it includes one year of support and updates. If you do not have a Hyva Theme yet, the license will cost an additional €1000.

Technical Features

Hyva Checkout uses Magewire, AlpineJS, and Tailwind CSS technologies to provide a fast, seamless checkout experience and has several system requirements you should know about before purchasing.

Still not sure about it? Seeing is believing: take a look at the Hyva Checkout demo and appreciate all its advantages and features yourself.

The initial conditions for the module are:

  • Magento Open Source / Adobe Commerce 2.4.3 or higher
  • PHP 7.4 or newer
  • Hyvä Themes 1.1.16 or newer

Remember that Hyva Checkout is compatible only with stores using the Hyva Theme and is not yet completely compatible with all B2B capabilities of Adobe Commerce.

Hyva Checkout Key Functionality

  • Fast checkout process with an intuitive interface, which works great on desktop and mobile devices;
  • Outstanding customization options: from adding new steps, personalizing based on customer groups, and adjusting the layout to inserting steps to refine the flow;
  • One-page checkout, that simplifies customers' journey and allows entering their details, shipping, and billing information without going through other pages;
  • Order comments that increase interaction with the customers and help to fulfill orders better;
  • The guest checkout option is available for those who prefer shopping directly. Great feature, as its absence is one of the most common reasons for cart abandonment,
  • Address validation and checkout fields autocorrect make the checkout process easy and help to avoid mistakes and enhance customer experience;
  • Multiple payment methods out-of-box support: PayPal, Braintree, Stripe, Mollie, and Adyen.

How Hyva Checkout differs from Magento checkout 

Several things make Hyva Checkout stand out.

1.   Checkout customization options. Customizing the checkout page for standard Magento 2 checkout was nearly impossible.

2.   Better checkout page load speed and overall performance, reached by considerably fewer server requests while loading the page, and the use of Magewire components.

3.   Checkout mobile optimization allows you to tailor the customer experience depending on the device: a one-page checkout for desktops and multiple screens for mobile devices.

Implementing Hyva Checkout for Your E-Commerce Store

As Hyva Checkout is just another module for your store, the Hyva team ensures its quick and easy upload and installation. The comprehensive documentation on that matter and a supportive community will help you even if you face challenges at that stage.

Overall, the Hyva checkout implementation process looks like this:

Installation

To install Hyvä Checkout, you'll need your Hyvä license key from packagist.com.

  1. Run the command

composer require hyva-themes/magento2-hyva-checkout

  1. Disable the Magento HTML minification in the configuration setting

Advanced > Developer > Template Settings > Minify Html, or run

bin/magento config:set dev/template/minify_html 0

This step is only needed if HTML minification is enabled (it is turned off by default).

  1. Run the command

bin/magento setup:upgrade

  1. Execute tailwind to generate the styles for the checkout, replacing

vendor/hyva-themes/magento2-default-theme/web/tailwind/ with the path to your theme's web/tailwind folder:

npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ ci

npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ run build-prod

Admin configuration

The admin configuration is available at Stores > Configuration > Hyvä Themes > Checkout.

Take a look at the "Checkout" settings. Luma checkout is the default option for this box. Choose "Hyvä Default" and save changes.

Hyvä Checkout also offers an optional mobile-friendly experience. When enabled, it automatically detects mobile devices and presents a checkout flow optimized for smaller screens.

It can mean using multiple steps for easier navigation on the phone, compared to a single-page checkout that might be better suited for desktops. You can even customize which devices trigger the mobile checkout by adjusting the settings in Hyvä Themes > Checkout > Developer.

Real-Life Success Stories: My 1stYears

With over 12+ years of Magento development, NEKLO monitors market trends and implements top-notch technologies, including Hyva development and support. Our client, a luxury kidswear brand, asked the team to conduct a comprehensive web store audit and provide technical support, as well as third-party integrations. The store had a Hyva Theme as a frontend solution, which required bug fixing and customization.

TwoStep Layout of the My 1st years Checkout

After a thorough revision, the NEKLO team made major customizations to the e-commerce store.

  1. We developed a brand-new custom solution for international shipping;
  2. Applied latest security patches and fixed bugs;
  3. Updated order processing flow, ensuring seamless work of the "Next day delivery" feature;

…and most importantly, we significantly updated the Hyva theme and checkout, achieving the store's smooth functionality and top performance. After work was performed, the website performance was improved by 75% on average, while traffic increased X2. The checkout page performance and SEO were enhanced up to 90 points, representing remarkable yet anticipated growth.

Why Choose NEKLO for Your Hyva Project

NEKLO is an experienced Magento development services provider with over 180 projects delivered, has a precise focus on e-commerce domain and specifically Magento.

Particularly, our team specializes in Hyva, and the facts are:

  • NEKLO experts have deep expertise in Hyva-related technologies, such as Alpine JS, Tailwind CSS, and Vanilla JS.
  • Our team has been working with the Hyva theme since its release in 2021.
  • We have vast experience working with huge Magento stores.
  • NEKLO accomplished various projects with Hyva, focusing on its development, setup, customization, and optimization.

Feel free to contact NEKLO to implement Hyva for the first time or improve your Hyva-based Magento web store.