Individuelle Anpassungen mit der ThemeWare® Customizing App (Cloud)
In dieser Anleitung erfährst du, wie du individuelle Anpassungen mit der "ThemeWare® Customizing App" in der Shopware Cloud vornehmen kannst.
Wie du das Erscheinungsbild von ThemeWare® in der Shopware 6 Cloud mittels einer individuellen Anpassung und mit unserer kostenfreien "ThemeWare® Customizing App" verändern kannst, erfährst du in diesem Artikel.
Tipp: Das erstellen eines ThemeWare® Duplikates ist für SCSS- bzw. Template-Anpassungen nicht notwendig.
Hinweis: Nutze in Shopware 6 (self-managed) bitte das "ThemeWare® Customizing Plugin".
Einleitung
Für individuelle Anpassungen brauchst du in Shopware 6 ein eigenes Theme oder eine separate Erweiterung (Plugin oder App) und nicht – wie bei Shopware 5 – eine Theme-Ableitung.
Prüfe ob es im Shopware Community Store bereits eine passende Erweiterung gibt.
Alternativ kannst du die folgende Methode mit der "ThemeWare® Customizing App" nutzen.
Nachfolgend erklären wir dir den Weg über unsere "ThemeWare® Customizing App".
Hilfreiche Grundlagen
Dieser Artikel richtet sich an erfahrene Anwender. Wir gehen in diesem Artikel daher davon aus, dass du die Grundlagen für Anpassungen via SCSS und Twig bereits verinnerlichst hast.
Falls du nicht erfahren im Umgang mit SCSS und Twig bist findest du hilfreiche Grundlagen zum Thema individuelle SCSS- und Template-Anpassungen findest du in den folgenden Artikeln:
Individuelle Anpassungen mittels SCSSIndividuelle Template-Anpassungen (Twig, HTML)Tipp: Bist du unerfahren im Umgang mit SCSS und Twig empfehlen wir dir Unterstützung zu suchen. Gern können wir dich natürlich auch bei individuellen Anpassungen unterstützen: Anpassungen anfragen
Anpassungen mit der ThemeWare® Customizing App integrieren (für erfahrende Anwender)
Wichtig: Die Möglichkeit Apps manuell in der Cloud installieren zu können ist noch ganz frisch und derzeit in der Beta-Phase!
In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround eine kleine kostenfreie "ThemeWare® Customizing App" für die Integration von individuellen Anpassungen und eigenen Dateien in der Shopware 6 Cloud entwickelt.
Alle Informationen zur "ThemeWare® Customizing App", der Installation und den Download-Link findest du im folgenden Artikel:
ThemeWare® Customizing App (Cloud)1. App vorbereiten (nur bei der ersten Verwendung nötig)
Lade die Zip-Datei unserer App herunter
Entpacke die Zip-Datei mit "Hier entpacken"
2. Anpassungen integrieren
SCSS-Anpassungen
Öffne die Datei "base.scss"
Pfad: "
Resources/app/storefront/src/scss"
Füge deinen gewünschten SCSS-Code ein
Speichere die Änderung der Datei
Template-Anpassungen
Erstelle eine neue Template-Datei und leite darin die gewünschte Quelldatei ab
Pfad: "
Resources/views/storefront"Tipp: Orientiere dich bezüglich Datei-Benennung einfach an der Quelldatei.
Hinweis: Erstelle benötigte oder fehlende Ordner.
Füge deinen gewünschten Twig-Code ein
Speichere die Änderung der Datei
3. App installieren/aktualisieren
Deaktiviere und deinstalliere die "ThemeWare® Customizing App" falls du dies bereits installiert und aktiviert hast
Zippe den Ordner "
TcinnCustomizingApp"Lade die App über Shopware 6 Erweiterungs-Verwaltung in deinen Shop
Installiere und aktiviere die App danach
4. Theme kompilieren (bei SCSS-Änderungen stets nötig)
Öffne das aktive ThemeWare® in der Theme-Verwaltung und speichere die Einstellungen unverändert ab, damit das Theme kompiliert wird und deine Änderungen in die Storefront übertragen werden.
5. Cache leeren (bei Template-Änderungen stets nötig)
Leeren den Browser-Cache
Windows: STRG + F5
Mac: Command + Shift + R
Die Änderung sollte nun in deiner Storefront sichtbar sein.
Tipps
CSS-Hierarchie
Du kannst die CSS-Hierarchie beim Überschreiben von CSS/SCSS-Anweisungen ganz einfach mit der "Body-Klasse" in der ThemeWare® Konfiguration beeinflussen. Dadurch kannst du unschöne !important Anweisungen vermeiden.
Mehr Informationen dazu findest du in folgender Anleitung:
CSS-HierarchieTemplate-Hierarchie
Seit Shopware 6.4.12 kann man der Konfiguration storefront.template-load-priority die Renderreihenfolge von Erweiterungen bestimmen (Default: -1).
Damit du mit der "Customizing App" andere Erweiterungen überschreiben kannst, musst du die Priorität über eine Konfiguration in der manifest.xml ändern:
Last updated
