Erstellen Sie in Sekunden ein produktionsbereites Child Theme für PrestaShop. Mit einem Child Theme passen Sie das Erscheinungsbild Ihres Shops an, Farben, Schriften, Templates, JavaScript, ohne das Parent Theme zu verändern. Ihre Änderungen bleiben bei Theme-Updates erhalten.
Was ist ein PrestaShop Child Theme?
Ein Child Theme übernimmt alle Templates, Styles und Funktionen eines Parent Themes (z. B. Classic oder Hummingbird), erlaubt aber das Überschreiben einzelner Dateien. Wenn das Parent Theme aktualisiert wird, bleiben Ihre Anpassungen erhalten, weil sie in separaten Dateien liegen.
Ohne Child Theme werden CSS-Änderungen oder Template-Anpassungen, die Sie direkt in Dateien des Parent Themes vornehmen, beim nächsten Theme-Update überschrieben, und Ihre Arbeit geht verloren.
Was dieser Generator erstellt
- config/theme.yml – Theme-Konfiguration mit Parent-Vererbung, Asset-Registrierung und Layout-Definitionen. Enthält available_layouts, das vom PrestaShop-Theme-Importer benötigt wird.
- assets/css/custom.css – Eine sofort editierbare Stylesheet-Datei mit kommentierten Beispielen für Farben, Typografie, Header, Produktseiten und Footer. Hummingbird-Themes enthalten CSS-@layer-Beispiele für korrekte Spezifität.
- assets/js/custom.js – JavaScript-Datei mit Beispielen für PrestaShop-Event-Listener, updatedProduct, updateCart, changedCheckoutStep, und einem DOMContentLoaded-Wrapper.
- preview.png – Das tatsächliche Vorschaubild aus dem Parent Theme. Ersetzen Sie es nach Ihren Änderungen durch einen Screenshot Ihres angepassten Shops.
- Template-Overrides – Optionale Beispiel-Overrides für Produktseite und Header mit Smarty {extends} und parent:-Präfix für sichere, gezielte Block-Overrides.
- SCSS-Build-Setup – Optionale package.json mit Dart-Sass-Compiler sowie Build- und Watch-Skripten für einen professionellen CSS-Workflow.
Unterstützte Parent Themes
- Classic – Das Standard-Theme von PrestaShop seit 1.7. Bootstrap 4, jQuery und breite Kompatibilität mit PS 1.7.x und 8.x. Die sicherste Wahl für bestehende Shops.
- Hummingbird – Der moderne Standard für PrestaShop 9. Bootstrap 5.3, CSS Layers und mit Webpack 5 kompiliertes TypeScript. Am besten für neue PS-9+-Projekte mit modernen Browsern.
- Warehouse – Beliebtes Premium-Theme von iqit mit umfangreichen Anpassungsoptionen. Wählen Sie „Other“ und geben Sie einen beliebigen Verzeichnisnamen für andere Marketplace- oder Custom-Themes ein.
Installation
- Laden Sie die ZIP-Datei über das Formular herunter
- Laden Sie den ZIP-Inhalt per FTP in /themes/ auf Ihrem Server hoch oder nutzen Sie Back Office > Design > Theme & Logo > Import a theme
- Aktivieren Sie das Child Theme unter Design > Theme & Logo
- Bearbeiten Sie assets/css/custom.css, um mit der Anpassung zu beginnen
Mehr erfahren
- Vollständiger Child-Theme-Leitfaden – detaillierte Anleitung zur Erstellung von Child Themes, Template-Overrides, dem custom.css-Pattern, CSS-Anpassung und Debugging häufiger Probleme
- PrestaShop /themes/ im Detail – wie Template-Auflösung, Asset-Pipeline, CCC-Cache und Smarty-Rendering intern funktionieren
- PrestaShop-Architektur-Serie – Ordner-für-Ordner-Aufschlüsselung der gesamten PrestaShop-Codebasis für Entwickler und Shopbetreiber