Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Hyvä installieren und einrichten: Parent-Theme, eigenes Child-Theme anlegen

Hyvä installieren und einrichten: Parent-Theme, eigenes Child-Theme anlegen

~8 Min. Lesezeit Zuletzt aktualisiert am 9. August 2026

Hyvä wird nie direkt "als Theme" auf einer Seite aktiv, sondern immer über zwei Ebenen: ein Parent-Theme (das eigentliche Hyvä-Kernpaket) und ein eigenes Child-Theme, in dem dein Projekt seine Anpassungen ablegt. Das ist die gleiche Vererbungslogik, die Magento-Themes generell nutzen - nur dass das Parent-Theme hier eben von Hyvä statt von Luma kommt.

Welche Parent-Theme-Variante?

Hyvä bietet zwei Varianten des Standard-Themes an: hyva-themes/magento2-default-theme (ohne eingebaute CSP-Unterstützung) und hyva-themes/magento2-default-theme-csp. Für Projekte, die eine Content-Security-Policy durchsetzen wollen - was generell empfehlenswert ist -, ist die CSP-Variante die richtige Wahl. In diesem Tutorial und im mironsoft-Projekt selbst ist das der Parent-Theme:

hyva-themes/magento2-default-theme-csp

Achtung: Die CSP-Variante ist kein optionales Extra, das man später nachrüstet - sie bestimmt von Anfang an, wie Inline-Skripte registriert werden müssen (siehe Kapitel 9). Wer mit der Nicht-CSP-Variante beginnt und später wechselt, muss unter Umständen jedes Inline-Skript im Projekt nachträglich anpassen.

Installation per Composer

Alle Composer-Befehle laufen im mironsoft-Projekt über den Wrapper bin/composer statt direkt - so läuft der Befehl garantiert im Docker-Container mit der passenden PHP-Version. Zuerst das Hyvä-Modul und das CSP-Theme selbst:

bin/composer require hyva-themes/magento2-theme-module
bin/composer require hyva-themes/magento2-default-theme-csp

magento2-theme-module bringt Hyvä-eigene Magento-Module mit (unter anderem für die CSP-Integration selbst), magento2-default-theme-csp ist das eigentliche Parent-Theme mit allen Standard-Templates.

Eigenes Child-Theme anlegen

Als Nächstes legen wir das Child-Theme an, in dem alle projektspezifischen Anpassungen landen - in diesem Projekt liegt es unter src/app/design/frontend/Mironsoft/default/.

Grundstruktur eines Hyvä-Child-Themes

app/design/frontend/Mironsoft/default/
├── registration.php
├── theme.xml
├── composer.json
└── web/
    └── tailwind/
        ├── tailwind.config.js
        ├── package.json
        └── src/
            └── styles.css
app/design/frontend/Mironsoft/default/registration.php
<?php

declare(strict_types=1);

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/Mironsoft/default',
    __DIR__
);
app/design/frontend/Mironsoft/default/theme.xml
<?xml version="1.0" encoding="UTF-8"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Mironsoft Default</title>
    <parent>hyva-themes/default-csp</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Der <parent>-Eintrag ist die entscheidende Zeile: Er sagt Magento, dass unser Theme alle Templates, Layout-XML und die Grundkonfiguration von hyva-themes/default-csp erbt, solange wir nichts explizit überschreiben (Kapitel 10 zeigt die Überschreib-Konventionen im Detail).

Theme registrieren und aktivieren

bin/magento cache:clean
bin/magento setup:upgrade
bin/magento config:set design/theme/theme_id 2  # ID des neuen Themes

Die konkrete Theme-ID erfährst du entweder aus der Admin-Oberfläche unter Content > Design > Themes oder per CLI. Alternativ lässt sich das Theme auch direkt im Admin unter Content > Design > Configuration für den gewünschten Store auswählen.

Tipp: Direkt nach der Theme-Aktivierung sieht die Seite noch "kaputt" aus - es fehlt schlicht das gebaute Tailwind-CSS. Das ist normal und wird im nächsten Kapitel behoben, sobald wir die Theme-Struktur verstanden und in Kapitel 5 den Build-Prozess einmal durchlaufen haben.