loki Documentation

Product images in sidebar

Within the sidebar, the cart items are being shown - each with their corresponding product image. This playbook shows you how to customize things.

Changing image proportions

Create a file view/frontend/layout/loki_checkout.xml and add the following:

<?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.sidebar.items.item">
            <arguments>
                <argument name="size" xsi:type="number">80</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

This changes the size, which correspondingly changes the width and height.

If you want to change the width and height independent of each other, use the following:

<?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.sidebar.items.item">
            <arguments>
                <argument name="width" xsi:type="number">40</argument>
                <argument name="height" xsi:type="number">70</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
Last modified: October 16, 2025