In Kapitel 3 haben wir die zwei Kern-Dateien eines Themes bereits kurz gesehen. Jetzt schauen wir uns die vollständige Verzeichnisstruktur an, die ein Hyvä-Child-Theme über die Zeit annimmt, und was jede Datei konkret bewirkt.

Die Pflichtdateien eines Themes

• registration.php - meldet das Theme bei Magentos ComponentRegistrar an. Ohne diese Datei kennt Magento das Theme gar nicht.
• theme.xml - enthält Titel, Parent-Theme und Vorschaubild. Der <parent>-Wert ist hier der wichtigste Teil.
• composer.json - macht das Theme zu einem eigenen Composer-Paket, inklusive Abhängigkeit auf das Hyvä-Parent-Theme.

view.xml: Bildgrößen und Galerie-Konfiguration

etc/view.xml definiert unter anderem Bildgrößen (Produktbilder, Galerie-Thumbnails) und Konfiguration für den Bild-Optimierer. Hyvä-Themes bringen bereits sinnvolle Defaults mit - eigene Anpassungen (z. B. andere Bildbreiten für die neue Team-Seite, die wir später bauen) kommen in die view.xml des Child-Themes.

app/design/frontend/Mironsoft/default/
├── registration.php
├── theme.xml
├── composer.json
├── etc/
│   └── view.xml
├── Magento_Theme/
│   ├── layout/
│   │   └── default.xml
│   └── templates/
│       └── html/
│           └── header.phtml
├── Magento_Catalog/
│   └── templates/
│       └── product/
│           └── list.phtml
└── web/
    ├── tailwind/
    │   ├── tailwind.config.js
    │   ├── package.json
    │   └── src/styles.css
    └── images/
        └── logo.svg

Die Modul-Ordner-Konvention: Magento_Theme, Magento_Catalog, ...

Auffällig ist, dass Templates und Layout-XML nicht flach im Theme liegen, sondern in Unterordnern, die exakt wie Magento-Module heißen (Magento_Theme, Magento_Catalog, Magento_Checkout, ...). Das ist keine Hyvä-Spezialität, sondern normale Magento-Konvention: Ein Theme überschreibt Templates pro Modul, und der Ordnername zeigt an, welches Modul betroffen ist.

Ein eigenes Modul wie das spätere Mironsoft_TeamPage (Kapitel 17-22) bringt seine Templates dagegen normalerweise selbst mit - im Modul unter view/frontend/templates/ -, nicht im Theme-Ordner. Das Theme überschreibt nur, wenn nötig.

web/tailwind: der CSS-Quellcode

Der Ordner web/tailwind/ enthält den Tailwind-Build: package.json mit den npm-Abhängigkeiten, tailwind.config.js (bzw. bei Tailwind v4 primär die @theme-Direktive direkt im CSS, siehe Kapitel 5 und 11) und die CSS-Quelldatei, aus der die finale styles.css gebaut wird. Dieser Ordner wird nicht direkt an den Browser ausgeliefert - er ist reiner Build-Input.