Skip to content

Installation & Configuration

The Hyvä Checkout is a stand-alone commercial product, currently available to Hyvä Themes licensees only.

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).

!!! tip "HTML minification can be enabled since v1.1.6, even though we still recommend it being disabled."

  1. Run the command 

    bin/magento setup:upgrade

  2. 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.