How to customize for Hyvä theme

On the stock Hyvä theme the extension needs no customization at all: from version 2.6.0 Hyvä support ships inside mirasvit/module-cataloglabel, and the blocks that carry the labels are wired onto the theme's own product page and product listing by layout. This page is for a custom Hyvä theme whose templates differ from the stock ones.

Product page

The extension places the labels inside the gallery's <div id="gallery-main"> wrapper, which the stock Hyvä gallery template provides and which is already position: relative. If your theme renamed that element or removed it, the labels are omitted — the gallery is never broken, it simply has nothing overlaid on it.

To restore them, render the child block yourself. Add the code below inside the gallery container, and give that container the relative class:

<?php if ($labels = $block->getChildBlock('product.labels')): ?>
    <?= $labels->toHtml(); ?>
<?php endif ?>

Product listing

In most cases product listings need no adjustment. The one requirement is that the product item's anchor <a> carries a position: relative CSS rule — in Hyvä that means the relative class on the anchor.

If labels still do not appear in listings, override Magento_Catalog::product/list/item.phtml and add the code below after the <img> element, inside the anchor <a> tag:

<?php if ($labels = $block->getChildBlock('labels')): ?>
    <?= $labels->setProduct($product)->setViewCode('list')->toHtml(); ?>
<?php endif; ?>

Tailwind

The extension ships its own Tailwind source, which is where the eleven placeholder positions and the two label directions are defined. Register it with the theme's build once, and rebuild after every upgrade:

bin/magento hyva:config:generate

cd /path/to/theme/web/tailwind/
npm run build-prod

Without it a label still renders and still carries its classes; it just sits in the document flow under the image instead of on it.