Wenn Sie einen Magento Shop mit Luma- oder Blank-Theme betrieben haben, haben Sie wahrscheinlich die Frustration über langsame Seitenladevorgänge, komplexe Frontend-Templates und aufgeblähtes JavaScript gespürt. Das Magento Hyvä Theme wurde genau zur Lösung dieser Probleme entwickelt – und Ladenbesitzer und Entwickler, die den Wechsel vorgenommen haben, blicken selten zurück.
Dieser Leitfaden führt Sie durch die komplette Hyvä Theme-Installation auf Magento 2 von der Lizenzierung und den Serveranforderungen über die Aktivierung des Themes, die Erstellung eines untergeordneten Themes bis hin zur Lösung der häufigsten Probleme. Egal, ob Sie als Entwickler dies für einen Kunden einrichten oder als Ladenbesitzer mit einem Hyvä Theme-Entwicklungsteam zusammenarbeiten, diese Ressource bietet Ihnen alles, was Sie brauchen.
Umsatzorientiert Steigern Sie Ihren Magento Umsatz um 30 %!
Steigern Sie Ihren Magento Umsatz um bis zu 30 % mit blitzschnellem Checkout und intelligenten Konvertierungstools.
Was ist das Hyvä Theme für Magento 2?
Hyvä (ausgesprochen „hoo-vah“, finnisch für „gut“) ist ein Frontend-Theme-Framework für Magento 2, das den standardmäßigen RequireJS/KnockoutJS/jQuery-Stack durch Alpine.js und Tailwind CSS ersetzt. Es wurde 2021 vom niederländischen Entwickler Willem Wigman veröffentlicht und hat sich zu einer der am weitesten verbreiteten Frontend-Lösungen im Magento Ökosystem entwickelt.
Hier erfahren Sie, warum das Magento 2 Hyvä Theme zum Branchenstandard für Performance-First-Shops geworden ist:
- Google Lighthouse erzielt im Auslieferungszustand einen Wert von 90–100, verglichen mit 20–40 bei Luma
- Zero RequireJS, wodurch komplexe Abhängigkeitsketten eliminiert werden
- Das Tailwind CSS Utility-First-Styling ermöglicht eine schnellere und konsistentere Frontend-Anpassung
- Alpine.js ersetzt KnockoutJS und bietet eine schlanke reaktive Benutzeroberfläche
- Deutlich kleinere JavaScript-Bundle-Größen, oft bis zu 10x kleiner als Luma
- Schnellere Zeit bis zum ersten Byte und verbesserte Core Web Vitals, entscheidend für die SEO-Leistung
- Sauberere und besser wartbare Codebasis für Hyvä Theme-Entwickler
Voraussetzungen vor der Installation des Hyvä Magento Themes
Bevor Sie einen einzelnen Befehl ausführen, stellen Sie sicher, dass Folgendes vorhanden ist.
Kompatibilität der Magento Version
Das Magento Hyvä Theme unterstützt Magento Open Source und Adobe Commerce. Die aktuelle Kompatibilitätsmatrix lautet:
Systemanforderungen:
- Magento CE 2.4.4-p9, 2.4.5-p8, 2.4.6-p7, 2.4.7-p1 oder höher
- Eine gültige Lizenz für Hyvä Themes (https://hyva.io/license)
- Für Lizenznehmer: Ein privater Packagist-Schlüssel
- Für Partner: Zugang zu Hyvä GitLab
- PHP 7.4, 8.1, 8.2, 8.3 oder 8.4
Überprüfen Sie immer das offizielle Hyvä Änderungsprotokoll auf hyva.io auf die neueste Versionsunterstützungsmatrix, bevor Sie fortfahren.
Server- und PHP-Anforderungen
- PHP: 8.1, 8.2 oder 8.3 (PHP 8.3 empfohlen für Magento 2.4.7+)
- Composer: Version 2.x (Composer 1.x wird nicht unterstützt)
- Node.js: 16+ (erforderlich für Tailwind CSS-Kompilierung)
- NPM oder Garn für Frontend-Build-Tools
- Standard-Magento-2-Server-Stack: MySQL 8.0+, Elasticsearch oder OpenSearch, Redis (optional, aber empfohlen).
Was kostet die Hyvä Lizenz?
Für Lizenznehmer beachten Sie bitte Folgendes Link.
Eine einzelne Lizenz deckt eine Produktionsdomäne sowie unbegrenzte Staging-/Entwicklungsumgebungen ab. Agenturlizenzen sind verfügbar für Hyvä Themenentwicklungsunternehmen Arbeit an mehreren Kundenprojekten.
Wichtig: Verwenden Sie niemals gelöschte oder gecrackte Versionen von Hyvä. Über das offensichtliche rechtliche Risiko hinaus fehlen ihnen Sicherheitsupdates und offizielle Kompatibilitätspatches.
Erstellen Sie Ihr Hyvä Konto und erhalten Sie Komponisten-Anmeldeinformationen
Nach dem Kauf:
- Melden Sie sich bei Ihrem Hyvä Portal unter hyva.io an
- Navigieren Sie zu Lizenzen und erstellen Sie eine neue Lizenz für Ihre Domain
- Gehen Sie zu API-Tokens und generieren Sie ein Composer-Token
- Notieren Sie sich Ihren Lizenzschlüssel, da dieser während der Installation benötigt wird
So installieren Sie Hyvä Themes in Magento 2.4.x
Schritt 1: Fügen Sie das Hyvä Composer-Repository hinzu
Navigieren Sie auf Ihrem Server (oder Ihrer lokalen Entwicklungsumgebung) zu Ihrem Magento 2 Stammverzeichnis und führen Sie Folgendes aus:
composer config repositories.hyva-themes composer
https://packages.hyva.io/dist/
Geben Sie Folgendes ein, wenn Sie zur Authentifizierung aufgefordert werden:
- Benutzername: E-Mail-Adresse Ihres Hyvä Kontos
- Passwort: Das API-Token, das Sie im Portal generiert haben
Um zu vermeiden, dass Sie jedes Mal dazu aufgefordert werden, können Sie Anmeldeinformationen direkt speichern:
composer config http-basic.packages.hyva.io your@email.com YOUR_API_TOKEN
Dadurch werden die Anmeldeinformationen in Ihre auth.json-Datei geschrieben. Stellen Sie sicher, dass diese Datei vorhanden ist .gitignore und niemals der Versionskontrolle verpflichtet.
Schritt 2: Fordern Sie das Hyvä Themenpaket an
Wenn das Repository konfiguriert ist, installieren Sie die Kernpakete des Hyvä Themas:
composer require hyva-themes/magento2-default-theme
Dadurch werden die folgenden Schlüsselpakete installiert:
- hyva-themes/magento2-theme-module – Das Kernmodul von Hyvä
- hyva-themes/magento2-default-theme – Das Basis-Frontend-Theme von Hyvä
- hyva-themes/magento2-reset-theme – Eine Reset-Basis, die sich unterhalb des Standardthemas befindet
- hyva-themes/magento2-icons – HeroIcons-Integration
Composer zieht alle Abhängigkeiten automatisch. Dieser Schritt kann je nach Verbindungsgeschwindigkeit einige Minuten dauern.
Schritt 3: Aktivieren Sie die Hyvä Module
Sobald Composer fertig ist, registrieren Sie sich und aktivieren Sie die neuen Module in Magento:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
php bin/magento cache:flush
Führen Sie diese Befehle nacheinander aus. Der Setup:Upgrade Der Befehl registriert alle neuen Module und aktualisiert das Datenbankschema. Der setup:di:compile Der Befehl generiert Abhängigkeitsinjektionskonfigurationen neu.
Profi-Tipp für Produktionsfilialen: Laufen Sie immer setup:static-content:deploy mit Ihren spezifischen Gebietsschema-Flags, um die Bereitstellung unnötiger Gebietsschemas zu vermeiden. Zum Beispiel: php bin/magento setup:static-content:deploy en_US -f
Schritt 4: Weisen Sie das Hyvä Theme im Admin-Panel zu
- Melden Sie sich bei Ihrem Magento 2 Admin-Panel an
- Gehen Sie zu Inhalt → Design → Konfiguration
- Klicken Sie neben der Store-Ansicht, die Sie aktualisieren möchten, auf Bearbeiten
- Wählen Sie unter „Angewandtes Design“ die Option „Hyvä Standard“ aus der Dropdown-Liste aus
- Klicken Sie auf Konfiguration speichern
- Leeren Sie den Cache mit: php bin/magento cache:flush
An dieser Stelle die Basis Hyvä Thema ist in Ihrem Shop aktiv. Wenn Sie das Frontend besuchen, sehen Sie das Standardlayout von Hyvä – sauber, schnell und minimalistisch.
Schritt 5: Konfigurieren Sie Ihren Hyvä Lizenzschlüssel
Das Hyvä Lizenzmodul validiert Ihren Schlüssel, um die Einhaltung sicherzustellen. Um es zu konfigurieren:
- Gehen Sie im Admin zu Stores → Konfiguration → Hyvä Themes → Lizenz
- Geben Sie Ihren Lizenzschlüssel über das Hyvä Portal ein
- Legen Sie die Produktionsdomäne auf die URL Ihres Live-Shops fest
- Speichern Sie die Konfiguration und leeren Sie den Cache
Alternativ können Sie es über die Umgebungsvariable oder env.php festlegen – nützlich für CI/CD-Pipelines:
// In app/etc/env.php
'system' => [
'default' => [
'hyva_theme_license' => [
'license_key' => 'YOUR_LICENSE_KEY'
]
]
]
Schritt 6: Erstellen Sie ein Hyvä Child-Theme (dringend empfohlen)
Passen Sie das Basis-Hyvä Theme niemals direkt an. Bei jedem Composer-Update werden Ihre Änderungen überschrieben. Erstellen Sie stattdessen ein Hyvä Kinderthema – das ist der professionelle Ansatz, den jeder seriöse Anbieter verfolgt Hyvä Themenentwicklungsunternehmen.
6.1 Erstellen Sie die Theme-Verzeichnisstruktur
mkdir -p app/design/frontend/YourVendor/hyva-child/web/tailwind
mkdir -p app/design/frontend/YourVendor/hyva-child/Magento_Theme/layout
6.2 theme.xml erstellen
<!-- app/design/frontend/YourVendor/hyva-child/theme.xml -->
<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>YourVendor Hyvä Child</title>
<parent>Hyva/default</parent>
</theme>
6.3 Registration.php erstellen
<?php
// app/design/frontend/YourVendor/hyva-child/registration.php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::THEME,
'frontend/YourVendor/hyva-child',
__DIR__
);
6.4 Tailwind CSS einrichten
Kopieren Sie die Tailwind-Konfiguration aus dem übergeordneten Theme als Ausgangspunkt:
cp vendor/hyva-themes/magento2-default-theme/web/tailwind/tailwind.config.js \
app/design/frontend/YourVendor/hyva-child/web/tailwind/tailwind.config.js
cp vendor/hyva-themes/magento2-default-theme/web/tailwind/package.json \
app/design/frontend/YourVendor/hyva-child/web/tailwind/package.json
Install Node dependencies and compile CSS:
cd app/design/frontend/YourVendor/hyva-child/web/tailwind
npm install
npm run build-prod
6.5 Anwenden des Child-Themes
Kopieren Sie die Tailwind-Konfiguration aus dem übergeordneten Theme als Ausgangspunkt:
- Gehen Sie im Admin-Bereich zu Inhalt → Design → Konfiguration
- Wechseln Sie das angewendete Design von „Hyvä Default“ zu „YourVendor Hyvä Child“.
- Speichern Sie die Konfiguration und leeren Sie den Cache
Schritt 7: Bereitstellen und überprüfen
Führen Sie die vollständige Bereitstellungssequenz noch einmal aus, während Ihr untergeordnetes Thema aktiv ist:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy en_US -f
php bin/magento cache:flush
Überprüfen Sie dann Ihre Installation wie folgt:
- Besuchen Sie das Schaufenster und bestätigen Sie das Hyvä Layout lädt korrekt
- Offen Browser DevTools → Registerkarte „Netzwerk“. und überprüfen Sie Nr RequireJS-Bundles werden geladen
- Führen Sie a aus Google PageSpeed Insights testen und auf Verbesserungen prüfen Leistungsbewertungen über Luma
- Überprüfen Magento Administrator → System → Indexverwaltung um sicherzustellen, dass alle Indizes vorhanden sind gültig
Schritt 8: Hyvä Kompatibilitätsmodule für Erweiterungen von Drittanbietern.
Hier wird die Installation des Magento 2 Hyvä Themes oft schwierig. Für Luma erstellte Magento Erweiterungen verwenden KnockoutJS-Vorlagen (.html-Dateien mit Datenbindungsattributen), die in Hyvä nicht gerendert werden.
Damit Erweiterungen von Drittanbietern mit Hyvä funktionieren, benötigen Sie Kompatibilitätsmodule. Das Hyvä Ökosystem bietet mehrere Optionen:
Offizielle Hyvä Kompatibilitätsmodule
| Verlängerung | Kompatibilitätspaket |
|---|---|
| Hyva Extension Entwicklung | Überprüfen Sie hyva-themes/magento2-compat-module-fallback |
| Zur Kasse gehen (Standard) | hyva-themes/magento2-hyva-checkout (separate Lizenz) |
| GraphQL/PWA | Verwenden Sie stattdessen den REST-basierten Ansatz von Hyvä |
Das Hyvä Kompatibilitäts-Fallback-Modul
Bei Erweiterungen ohne dedizierte Hyvä Kompatibilitätsschicht ermöglicht das Fallback-Modul das Rendern von Komponenten im Luma Stil in einem Iframe innerhalb der Hyvä Seite. Dies ist zwar nicht ideal für die Leistung, sorgt aber dafür, dass der Store funktionsfähig bleibt, während Sie die richtige Kompatibilität beschaffen oder erstellen.
composer require hyva-themes/magento2-compat-module-fallback
php bin/magento setup:upgrade
php bin/magento cache:flush
Was ist der Unterschied zwischen Hyvä Checkout und dem Magento Standard-Checkout?
| Besonderheit | Magento Standard-Checkout | Hyvä Checkout |
|---|---|---|
| Technologie | KnockoutJS-basiert | Hyvä native (Alpine.js + minimales JS) |
| Performance | Langsameres, schweres JavaScript | Schnell, leicht, optimiert |
| Kompatibilität mit Hyvä | Erfordert Fallback-Module oder benutzerdefinierte Korrekturen | Vollständig kompatibel |
| Benutzererfahrung | Komplexer und langsamerer Checkout-Ablauf | Reibungslos, schnell und konvertierungsorientiert |
| Wartung | Komplex und schwieriger zu verwalten | Sauberer und einfacher zu pflegen |
| Empfehlung | Nicht ideal für Geschäfte in Hyvä | Für eine vollständige Optimierung dringend empfohlen |
Die 5 häufigsten Fehler bei der Installation des Hyvä Themes und wie man sie behebt
Fehler 1:
- Fehler: Paket hyva-themes/magento2-default-theme konnte nicht gefunden werden
- Ursache: Das Hyvä Composer-Repository fehlt oder die Anmeldeinformationen sind falsch
- Fix: Fügen Sie das Hyvä Repository hinzu, überprüfen Sie die Anmeldeinformationen und führen Sie das Composer-Update aus
Re-run composer config repositories.hyva-themes composer https://packages.hyva.io/dist/ and verify your auth.json credentials match the token in your Hyvä portal.
Fehler 2:
- Fehler: Ungültiger Lizenzschlüssel
- Ursache: Der Lizenzschlüssel ist falsch oder einer anderen Domäne zugeordnet
- Fix: Melden Sie sich bei hyva.io an, überprüfen Sie die korrekte Domänenzuordnung und kopieren Sie den Lizenzschlüssel erneut aus dem Portal
Fehler 3:
- Fehler: Leere Seite oder CSS wird nach der Bereitstellung nicht geladen
- Ursache: Tailwind CSS wurde nicht kompiliert oder statischer Inhalt wurde nicht bereitgestellt
- Fix: Führen Sie den Frontend-Build aus (npm install && npm run build) und stellen Sie dann statische Inhalte mit bereit
php bin/magento setup:static-content:deployund Cache leeren
bash
cd app/design/frontend/YourVendor/hyva-child/web/tailwind
npm run build-prod
php bin/magento setup:static-content:deploy en_US -f
php bin/magento cache:flush
Fehler 4:
- Fehler: Tailwind-CSS-Klassen gelten nicht für benutzerdefinierte Inhalte!
- Ursache: Die Inhaltsbereinigungskonfiguration von Tailwind umfasst nicht Ihre benutzerdefinierten Vorlagendateien.
- Fix: Fügen Sie Ihre Vorlagenpfade zu tailwind.config.js im Inhaltsarray hinzu: und leeren Sie den Cache
content: [
'../../**/*.phtml',
'../../**/*.html',
// Add your custom paths here
]
Then rebuild: npm run build-prod
Magento 2 Hyvä Theme vs. Luma: Leitfaden zum Leistungsvergleich für 2026
| Metrisch | Luma Thema | Hyvä Theme |
|---|---|---|
| Google Lighthouse (Mobil) | 15–40 | 85–100 |
| JavaScript-Bundle-Größe | ~300–500 KB | ~30–80 KB |
| Zeit für Interaktivität | 8–15 Sekunden | 1–3 Sekunden |
| Core Web Vitals (LCP) | Scheitert oft | Wird normalerweise bestanden |
| CSS-Framework | CSS/WENIGER | Rückenwind-CSS |
| Reaktive UI-Bibliothek | KnockoutJS | Alpine.js |
| Template-Engine | PHTML + KO HTML | PHTML + Alpine |
| Lernkurve für Entwickler | Hoch | Medium |
Wenn Sie einen detaillierten Vergleich zwischen dem Hyvä Thema und dem erkunden möchten Magento Luma Theme, siehe Abschnitt unten.
Häufig gestellte Fragen zum Hyvä Theme Magento 2.
Ja. Hyvä 1.3.x ist mit Magento 2.4.4 bis 2.4.7 kompatibel. Überprüfen Sie immer die Kompatibilitätsmatrix, bevor Sie ein Upgrade von Magento oder Hyvä durchführen.
Ja, Hyvä unterstützt sowohl Magento Open Source als auch Adobe Commerce. Einige Adobe Commerce spezifische Funktionen wie Page Builder erfordern zusätzliche Hyvä Kompatibilitätsmodule.
Nein. Hyvä und PWA Studio sind separate Ansätze für die Magento Frontend-Entwicklung. Hyvä wird serverseitig mit einem progressiven Verbesserungsansatz gerendert, während PWA Studio eine vollständige Headless/SPA-Architektur ist. Sie sind nicht austauschbar.
Das Hyvä Theme deckt alle Seiten außer der Kasse ab. Hyvä Checkout ist ein separates Produkt, das den Standard-Magento Checkout durch eine Hyvä native Implementierung ersetzt. Für beide gibt es separate Lizenzen, manchmal sind jedoch auch Bundle-Preise verfügbar.
Indien verfügt über ein wachsendes Ökosystem qualifizierter Hyvä Themenentwickler, und einige Agenturen haben sich durch zertifiziertes Fachwissen und bewährte Projektabwicklung ausgezeichnet. Zu den Top-Namen gehört iCreative Technologies – eine zertifizierte Hyvä Bronze Partner-Agentur mit Sitz in Indien und einem Expertenteam aus Hyvä Theme-Entwicklern und Hyvä Spezialisten.
