Installation (Hyvä)

Loki Checkout is out-of-the-box compatible with Hyvä Themes through an additional module LokiCheckout_Hyva. It requires Alpine 3 and Tailwind CSS 3, which are supported by Hyvä Themes as well.

WARNING: Note that Alpine.js 2 does not work with LokiCheckout. If you are using a theme based on Hyvä Themes 1.1 or older, upgrade that theme first. Alpine.js 3 is required.

Composer installation and module setup

Install the LokiCheckout_Hyva module:

composer require loki-checkout/magento2-hyva

Note that dev-main or specific commits do not work via the composer.yireo.com API. If you want to use the latest development version, use @dev.

Enable the relevant modules (and their dependencies):

bin/magento module:enable LokiCheckout_Hyva LokiCheckout_Core Loki_CssUtils Loki_Components Loki_FieldComponents Loki_MapComponents Yireo_CspUtilities Yireo_HyvaThemeAutoRegistration

If you want to enable all Loki-related modules that you have installed via composer, you might also just run the following command:

bin/magento module:enable `bin/magento module:status | grep Loki`

Configuration

Make sure to rebuild the Hyvä configuration file first. This should add the Loki modules to the file app/etc/hyva-themes.json:

bin/magento hyva:config:generate

Next, rebuild the Tailwind CSS of your own theme. After this, your compiled CSS should now also include the CSS classes included with Loki.

cd app/design/frontend/Foo/bar/web/tailwind/
npm run build

When making use of the Hyva_ThemeFallback module, make sure that the setting Apply fallback to requests containing does not include checkout/index.

About Yireo_HyvaThemeAutoRegistration

The main LokiCheckout_Core module has a dependency with a helper module Yireo_HyvaThemeAutoRegistration. Normally, every single Magento module that wants to integrate its HTML into Hyvä would need to listen to an event hyva_config_generate_before to add its own module name to the file app/etc/hyva-themes.json. Within the Loki Checkout, this helper module takes care of the registration of any module that starts with LokiCheckout_*.

File etc/di.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Yireo\HyvaThemeAutoRegistration\Observer\RegisterModuleForHyvaConfig">
        <arguments>
            <argument name="modulePrefixes" xsi:type="array">
                <item name="LokiCheckout_" xsi:type="string">LokiCheckout_</item>
            </argument>
        </arguments>
    </type>
</config>

Combining the Hyvä Checkout and the Loki Checkout in the same instance

Note that the Loki Checkout is not based upon Hyvä Checkout and a clean setup would not have both installed. When developing your own extensions, you might want to have both the Hyvä Checkout and the Loki Checkout installed. In development, we highly recommend you to disable the Hyvä Checkout module, when working with the Loki Checkout modules. And vice versa.

We do not support having both modules enabled in production. It doesn't make sense. It shouldn't be done.

If you really want to enable the Hyvä Checkout module and the Loki Checkout module at the same time, use the following configuration:

  • Loki > Loki Checkout > General > Enabled (loki_checkout/general/enable): Configure this to be "Yes" (1) when working with the Loki Checkout and "No" (0) when working with the Hyvä Checkout.

  • Hyvä Themes > Checkout > General > Checkout (hyva_themes_checkout/general/checkout): Configure this to be "Magento Luma (original)" (magento_luma) when working with the Loki Checkout and another value when working with the Hyvä Checkout.

  • Hyvä Themes > Theme Fallback > General Settings > Apply fallback to requests containing: Make sure to remove any entry starting with checkout/* or disable the fallback mechanism entirely (set hyva_theme_fallback/general/enable to 0).

Last modified: August 28, 2025