The LokiCheckout uses CSS variables (CSS custom properties) in a couple of places. This page explains which ones are there and how the block loki-checkout.utils.css-variables of the core module LokiCheckout_Core fits in.

CSS variables per field in the address grid

The most important CSS variables are set per field in an address form: --loki-sort-order, --loki-col-span and --loki-md-col-span. These are added as inline styles by LokiCheckout\Core\Util\Block\CssStyleParser\GridStyleParser, based on the grid layout (etc/loki_checkout.xml) and the block arguments sort_order, col_span and md_col_span. The CSS class loki-col-span (in LokiCheckout_Core::tailwind/global.css) then turns them into a grid-column rule.

These variables are not set via the loki-checkout.utils.css-variables block. See Changing the grid of field blocks for the details.

The loki-checkout.utils.css-variables block

The layout handle loki_checkout adds a block to the container before.body.end:

<referenceContainer name="before.body.end">
    <block
        name="loki-checkout.utils.css-variables"
        template="LokiCheckout_Core::utils/css-variables.phtml"/>
</referenceContainer>

The template utils/css-variables.phtml creates an instance of the ViewModel LokiCheckout\Core\ViewModel\CssVariables and outputs its variables in a <style> element with a :root selector. The ViewModel offers the following methods:

  • set(string $name, string $value): void - Add or replace a variable (via LokiCheckout\Core\ViewModel\CssVariables\CssVariableFactory);
  • add(CssVariable $cssVariable): void - Add or replace a LokiCheckout\Core\ViewModel\CssVariables\CssVariable object;
  • get(): array - Return all CssVariable objects, indexed by name.

Each CssVariable simply holds a name (getName()) and a value (getValue()).

With the current version of LokiCheckout_Core, this block outputs an empty :root {} rule. The template creates a new ViewModel instance via $viewModelFactory->create(), so variables set on another instance of CssVariables are not picked up. On top of this, the template prints -- followed by a space before the variable name, which would make the CSS invalid. Until this is changed, do not rely on this block, but use your own template as explained below.

Adding your own CSS variables

To output your own CSS variables on the checkout page, replace the template of the block via the XML layout and pass the variables as a block argument. In your module or theme, add a file view/frontend/layout/loki_checkout.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <body>
        <referenceBlock name="loki-checkout.utils.css-variables" template="Vendor_Module::css-variables.phtml">
            <arguments>
                <argument name="css_variables" xsi:type="array">
                    <item name="checkout-primary-color" xsi:type="string">#0e7490</item>
                    <item name="checkout-radius" xsi:type="string">0.5rem</item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Next, create the template view/frontend/templates/css-variables.phtml:

<?php
declare(strict_types=1);

use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;

/** @var Escaper $escaper */
/** @var Template $block */

$cssVariables = (array)$block->getData('css_variables');
?>
<style>
    :root {
    <?php foreach ($cssVariables as $name => $value): ?>
        --<?= $escaper->escapeHtml($name) ?>: <?= $escaper->escapeHtml($value) ?>;
    <?php endforeach; ?>
    }
</style>

Because this is regular XML layout, you can also set different values per skin (for instance, in loki_checkout_skin_onestep.xml) or per country (see Country-specific layout handles).

Finally, use the variables in your CSS, for instance in the Tailwind source of your theme:

.loki-checkout a {
    color: var(--checkout-primary-color);
}

Note that the template outputs an inline <style> element (just like the original template). If you are using a strict Content Security Policy for styles, check that inline styles are allowed on the checkout page.

Removing the block

Because the original block does not output any variables right now, you can also remove it if you do not need it:

<referenceBlock name="loki-checkout.utils.css-variables" remove="true"/>
Last modified: November 11, 2026