Skip to content

Overview

The Hyvä Checkout is a stand-alone commercial product, currently available through an Early Access program.

Can I join the Hyvä Checkout Early Access?

Yes, you can, if you already own a Hyvä Theme license!
A Early Access Checkout license can be purchased at hyva.io/hyva-checkout-early-access.html.

Hyvä Checkout is the prime checkout for Hyvä Themes. It features the best integration and customizability.
To get started, it can be used with selected store views only, while keeping other checkout solutions in place for other store views.

Documentation status

The Hyvä Checkout documentation is still being completed. Please check back frequently.
If you have any questions, please reach out on in Slack.

System requirements

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

Tailwind JIT only

The deprecated Tailwind AOT mode is not supported, the JIT mode that is available since Tailwind v2 has to be used with the Hyvä Checkout.

Installation

Hyvä Checkout can be installed through your Hyvä packagist.com license key.

  1. Run the command 

    composer require hyva-themes/magento2-hyva-checkout

  2. 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 is only required if HTML minification is currently turned on (it is turned off by default).

  3. Run the command 

    bin/magento setup:upgrade

  4. 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 can be found at
Stores > Configuration > Hyvä Themes > Checkout.

Opt-in checkout

In the General section, the setting for "Checkout" defaults to "Magento Luma (original)".
To use the Hyvä Checkout, you need to change the selection to "Hyvä Default" and save the configuration.

If you create custom checkouts based on Hyvä Checkout, they will also be listed as options.

Mobile Checkout configuration

If the optional "Mobile" checkout is enabled in the Hyvä Checkout system configuration, it will be used when a visitor's user agent matches a known mobile device.

This allows presenting a different checkout experience that is optimized for mobile use.
For example, multiple steps can provide a better customer experience on a phone, while a one-page checkout can work better for visitors using a desktop browser.

The regular expression for matching mobile user agents can be customized in the
"Hyvä Themes > Checkout > Developer" section.

After changing any setting, be sure to flush the cache.

Further settings

For now, please explore the other Hyvä Checkout configuration options on your own - most will be rather self-explanatory.
All configuration options will be added to the documentation over time.

Getting started with development

  1. Unless you already are familiar with Magewire, we suggest you first read the Magewire Introduction,
  2. and then the Hyvä Checkout Developer Documentation.

Please post any questions to an appropriate channel of the Hyvä Slack.

Measuring success

If Hyvä Checkout is introduced to an existing shop, it can be useful to compare how it performs compared to an existing Luma based checkout.

Elgentos published a small open source module to do A/B testing: elgentos/magento2-hyva-checkout-ab-test.
It is quick to set up, but do consider a large data set is to get meaningful A/B test results.