In diesem Artikel erfährst du alles über ThemeWare® Theme-Duplikate in Shopware 6.

Was ist ein ThemeWare® Duplikat?

Eine Theme-Duplikat ist im Grunde nichts anderes als ein weiterer Eintrag in der Shopware 6 Datenbank. Dies ermöglicht es dir eine alternative bzw. separate Theme-Konfiguration (z.B. für weitere Verkaufskanäle) zu speichern.

Das Theme-Duplikat erbt bei der Erstellung die aktuelle Konfiguration vom Basis-Theme bzw. Parent-Theme (häufig auch "Eltern-Theme" oder "Mutter-Theme" genannt). Dies ähnelt der Handhabung von Variantenartikeln. Mehr zur Konfiguration erfährst du weiter unten in diesem Artikel.

Parent-Theme vs. Basis-Theme

Im Prinzip meint Parent- bzw. Basis-Theme das selbe Theme. Basis-Theme ist quasi das "Original"-Theme, welches du gekauft oder gemietet hast. Wir nutzen den Begriff Parent-Theme im nachfolgenden um klar zu stellen, dass es auch ein Theme-Duplikat vom Basis-Theme gibt.

Basis-Theme oder Parent-Theme + Theme-Duplikat

Unterschied zur Theme-Ableitung von Shopware 5

Theme-Ableitungen in Shopware 5 haben neben dem Eintrag in der Datenbank für die Konfiguration auch Ordner und Dateien auf dem Server angelegt, über welche dann individuelle Anpassungen realisiert oder weitere Dateien (z.B. Schriften) eingebunden werden konnten.

Ein Theme-Duplikat in Shopware 6 stellt dir (derzeit) leider keinen Ordner und keine Dateien für Anpassungen zur Verfügung.

Wie oben erklärt, lassen sich individuelle Anpassungen (z.B. über Templates) nicht mit Duplikaten realisieren.

Sortierung von Konfigurationsfeldern

Eine weitere Einschränkung ist ein Shopware Bug, der die Sortierung von Konfigurationsfeldern in Theme-Duplikaten betrifft:

Durch diesen Bug ignorieren Theme-Duplikate die vom Hersteller festgelegte Reihenfolge für Konfigurationsfelder und stellen diese leider in einer "zufälligen" Reihenfolge dar.

Dies betrifft leider alle Themes.

Hinweis: In Shopware 6.4.8.0 wurde dieser Bug von Shopware behoben.

Neue Konfigurationsfelder des Basis-Themes fehlen im Duplikat

Zudem gibt es einen weiteren Shopware Bug in Shopware 6 wodurch neue Konfigurationsfelder bei Updates vom Parent-Theme nicht automatisch auf Duplikate übertragen werden.

Dies betrifft leider alle Themes.

Tipp: Wie du fehlende Konfigurationsfelder auf dein Duplikat übertragen kannst, erfährst du in unserem Artikel .

Hinweis: In Shopware 6.4.8.0 wurde dieser Bug von Shopware behoben.

Seit Shopware 6.4.8.0 funktionieren die Theme-Duplikate deutlich besser als zuvor. Die von uns an Shopware gemeldeten Issues wurden von Shopware endlich gefixt und so gibt es derzeit keine weiteren Einschränkungen bei der Verwendung von Theme-Duplikaten.

• Neue Konfigurationsfelder werden bei Updates des Parent-Themes nun auch in Theme-Duplikate übernommen.

• Die Sortierung der Konfigurationsfelder entspricht nun der Sortierung vom Parent-Theme.

Natürlich kannst du einfach loslegen und das Basis-Theme konfigurieren. Du kannst jederzeit ein Duplikat erstellen und die Konfiguration vom Basis-Theme ggf. zurücksetzen.

Wenn du eine separate Konfiguration (z.B. für einen weiteren Verkaufskanal) benötigst, solltest du dies über ein Theme-Duplikat lösen. Es ist nicht nötig eine weiteres Theme dafür zu kaufen/mieten.

Parent-Themes lassen sich nicht über den "Theme-Manager" löschen und haben darum ein kleines Schloss-Icon neben dem Namen.

Theme-Duplikate hingegen lassen sich über den "Theme-Manager" löschen und haben daher nicht diese Icon:

Dies ist so auch über das Kontextmenü über den Kontext-Button jedes Themes ersichtlich. Zudem kann man vom Duplikaten keine weiteren Duplikate erstellen und Basis-Themes nicht über die Theme-Verwaltung löschen:

Zudem gibt es in der Theme-Konfiguration einen Hinweis, dass es sich bei diesem Theme um ein Duplikat vom Theme XY handelt:

Wie du ein ThemeWare® Theme-Duplikat erstellen kannst, erfährst du im Artikel:

Wie du ein ThemeWare® Theme-Duplikat umbenennen kannst, erfährst du im Artikel:

Konfigurationsfelder in einem Theme-Duplikat sind ausgegraut. Das bedeutet, dass dieses Konfigurationsfeld vom Basis-Theme abgeleitet wird und damit dem Konfigurationsfeld aus diesem entspricht.

Die Handhabung vererbter Konfigurationsfelder kennst du vermutlich von Variantenartikeln.

Wenn du ein Konfigurationsfeld abweichend konfigurieren möchtest, klicke einfach auf das "Anker"-Icon "Vererbung entfernen".

Möchtest du für ein Konfigurationsfeld wieder den Wert aus dem Basis-Theme nutzen, also dieses wiederherstellen, klicke auf das "Anker"-Icon "Vererbung wiederherstellen".

Bis Shopware 6.4.8.0 gibt es ein paar Einschränkungen in Theme-Duplikaten aufgrund von Shopware Bugs. Diese wurden mit Shopware 6.4.8.0 endlich behoben.

Mehr dazu findest du im Abschnitt .

In der Konfiguration des Themes im Theme-Manager stehen dir verschieden artige Feldtypen zur Verfügung. Im Folgenden geben wir dir eine Übersicht und erklären, wie welcher Feldtyp verwendet wird und welche Werte er enthalten kann.

Übersicht

• Nummernfeld

• Farbauswahl

Das Nummernfeld kann ausschließlich Zahlen enthalten. Die möglichen Zahlen können vom Feld limitiert sein.

Beispiel-Werte: 10, 0, -10, etc.

Über die Farbauswahl kannst du ganz bequem eine Farbe auswählen. Alternativ kannst du auch direkt einen eintragen.

Beispiel-Werte: #000000 oder rgba(0, 0, 0, 0.9)

In der Regel wird der Wert einer Farbkonfiguration als CSS-Eigenschaft color (ggf. background-color) genutzt. Diese Eigenschaft kann folgende Werte annehmen:

• Farbnamen (red, blue, black, …)

• Hex-Werte (#ff0000)

• none ist kein valider Wert für die CSS-Eigenschaft color (Textfarbe)

Hier kannst du über die Medienverwaltung ein Bild hochladen (wenn noch nicht vorhanden) und dann auswählen.

Beispiel-Werte: "Medium selektiert" oder "Medium zurückgesetzt"

Bei dem Select (Dropdown-Auswahl) kannst du einen der zur Verfügung stehenden Werte auswählen.

Beispiel-Werte: -

Ein einzeiliges Textfeld, welches theoretisch jeden Inhalt erlaubt. Hier kommt es darauf an, in welchem Zusammenhang der Inhalt verwendet wird. Häufig werden hier Abstände oder Breiten angegeben, die dann zusätzlich "px" oder "%" angehängt benötigen. In seltenen Fällen kann hier HTML hinterlegt werden.

Beispiel-Werte: Text, <html>..</html>, 10px, 50%, etc.

Ein Konfigurationsfeld "Schriftart" kann eine CSS Eigenschaft enthalten. Die hier eingetragene Schrift muss für den Besucher verfügbar sein und entweder zu den websicheren Fonts (z.B. Times, Times New Roman, Georgia, Helvetica, Arial, Verdana) gehören oder als in die Storefront eingebunden sein.

Beispiel-Werte: 'Inter', sans-serif

Hier kannst du ein Datum und eine Uhrzeit auswählen

Beispiel-Werte: 2021-01-01 01:00

• Anleitung:

• Anleitung:

In der Theme-Konfiguration kannst du in Farbfeldern neben Theme-Variablen auch einfache SCSS-Funktionen verwenden. Mit solchen Funktionen kannst du beispielsweise Farben abdunkeln oder aufhellen.

SCSS-Funktionen verwenden

Wichtig ist ein fehlerfreier Syntax, um Fehler in der Storefront zu vermeiden, darum empfehlen sich diese Funktionen eher für erfahrene Anwender.

Nützliche SCSS-Funktionen

Nachfolgend stellen wir dir ein paar nützliche SCSS-Funktionen vor. Mehr Informationen dazu findest du in der offiziellen SASS-Dokumentation.

Zum Abdunkeln von Farben kannst du die Funktion "darken" verwenden:

darken(#0c7ebb, 10%)
darken($sw-color-brand-primary, 10%)

Zum Aufhellen von Farben nutze die Funktion "lighten":

Darüber hinaus gibt es noch weitere SCSS-Funktionen, welche genutzt werden können:

Es können auch mehrere SCSS-Funktionen in einem Farbfeld kombiniert werden. Im folgenden Beispiel wird die Sekundärfarbe um 15% aufgehellt und die Sättigung um 5% reduziert:

In Shopware 6 gibt es keine Child-Themes wie in Shopware 5 mehr. Shopware 6 bietet dir die Möglichkeit ein Duplikat des Basis-Themes zu erstellen. Mit diesem Duplikat kannst du eine separate Konfiguration, beispielsweise für einen zusätzlichen Verkaufskanal erstellen.

Mehr Informationen zu Theme-Duplikaten findest du hier:

Template-Anpassungen sind mit Theme-Duplikaten nicht möglich, da Duplikate keine eigene Dateiebene haben. Template-Dateien müssen daher in eigenen Themes oder mit Erweiterungen realisiert werden.

Mehr Informationen dazu findest du hier:

1. Öffne die Administration deines Shops

2. Wechsel über die Hauptnavigation in die "Theme-Verwaltung" ("Inhalte" => "Themes")

   • Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.

3. Klicke nun auf den Kontext-Button oben rechts im Vorschaubild deines ThemeWare® Basis-Themes um das Kontextmenü zu öffnen

4. Klicke auf "Duplikat erstellen"

5. Es erscheint erneut ein Pop-up in welchem du den Namen für das Duplikat eingeben kannst

6. Bestätige die Erstellung mit "Duplikat anlegen"

Nun hast du ein ThemeWare® Theme-Duplikat erstellt und kannst es unabhängig vom Parent-Theme konfigurieren.

In der ThemeWare® Konfiguration findest du diverse Farbkonfigurationsfelder (Farbauswahl). Im Tab "Layout" findest du beispielsweise den Bereich "Hauptfarben".

Mehr Informationen zum Thema "Farbkonfiguration" findest du in der ThemeWare® Einführung: Farben konfigurieren und im Grundlagen-Artikel: Farbkonfiguration.

1. Öffne die Administration deines Shops

2. Wechsel über die Hauptnavigation in die "Theme-Verwaltung" ("Inhalte" => "Themes")

In der ThemeWare® Konfiguration findest du zwei Schriftkonfigurationsfelder (Textfelder vom Typ ) im Tab "Layout" => Bereich "Typografie" => Abschnitt "Text". Hier konfigurierst du die Schrift für Headlines und für Text.

Mehr Informationen zum Thema "Schriftkonfiguration" findest du in der ThemeWare® Einführung: und im Grundlagen-Artikel: .

In der Theme-Konfiguration wirst du gelegentlich Variablen in Farbfeldern finden. Dies vereinheitlicht das Farbbild deiner Storefront und erleichtert dir das Farbbild an deine Wünsche anzupassen.

Für Variablen gibt es zwei relevante Schreibweisen:

1. Shopware Variablen:

   • $sw-color-brand-primary = Primärfarbe in der Storefront

   • $sw-color-brand-secondary = Sekundärfarbe in der Storefront

   • $sw-text-color = Textfarbe in der Storefront

   • $sw-background-color = Hintergrundfarbe in der Storefront

   • usw.

2. ThemeWare® Variablen:

   • $twt-color-brand-primary-light = Eine helle Nuance der Primärfarbe

   • $twt-color-brand-primary-dark = Eine dunklere Nuance der Primärfarbe

Derzeit ist die Nutzung von Variablen in Themes mit Vorsicht zu genießen! In Shopware 6 müssen Variablen vor der Nutzung in einem Konfigurationsfeld initialisiert worden sein. Eine Variable kann also nicht in einem Konfigurationsfeld vor dem eigentlichen Konfigurationsfeld der Theme-Variable verwendet werden.

Dies wirkt sich besonders auf Theme-Duplikate aus, da diese – warum auch immer – derzeit nicht die vom Entwickler vorgesehene Reihenfolge für Konfigurationsfelder erhalten.

Die Variable für jedes Konfigurationsfeld findest Du schnell über unseren . Gib dort einfach die Bezeichnung eines Feldes und ggf. den Bereich in dem du suchen möchtest ein (z.B. "") und schon findest du das passende Konfigurationsfeld bzw. passende Konfigurationsfelder.

Die Variablen sind als "Technischer Name" für jedes Feld aufgelistet.

Beim kompilieren des Themes werden die Variablen durch den im entsprechenden Konfigurationsfeld hinterlegten Wert ersetzt.

Variablen kannst du in verschiedenen Konfigurationsfeldern nutzen.

Einschränkung: In Shopware Standard-Konfigurationsfeldern lassen sich aufgrund der Theme-Vererbung keine Theme-Variablen ($twt...) nutzen.

Sind Konfigurationsfelder grundsätzlich nicht geeignet, findest du im Hilfe-Text einen entsprechenden Hinweis.

Tipp: Am besten speicherst und kompilierst nach jeder verwendeten Theme-Variable einmal das Theme um zu prüfen ob die Variable im entsprechenden Konfigurationsfeld möglich ist.

Falls dies nicht möglich ist, erhältst du den nachfolgenden Fehler.

Dieser Fehler tritt auf, wenn Shopware eine Variable nicht "bekannt" ist. Dies würde bei der Arbeit mit Theme-Variablen auftreten wenn (wie oben beschrieben) die Variable vor der Nutzung nicht bereits initialisiert wurde.

Ändere in diesem Fall die Variable wieder in einen HEX- oder RGB-/RGBA-Wert zurück.

Mit ThemeWare® profitierst du von einer kontinuierlichen Weiterentwicklung. Von Zeit zu Zeit kann es daher vorkommen, dass wir Konfigurationsfelder entfernen oder ersetzen.

Leider entfernt die Shopware Update-Routine gelöschte Konfigurationsfelder nicht automatisch.

Shopware hat auf unseren Hinweis (NEXT-14571) dazu in Shopware 6.4.8.0 den "Speichern"-Button in der Theme-Konfiguration erweitert und eine "Bereinigen"-Funktion ergänzt. Damit kannst du "verwaiste Konfigurationsfelder" löschen lassen.

"Die aktuellen Werte werden komplett neu gespeichert. Zu nutzen, wenn Felder gelöscht wurden oder ihren Typ geändert haben."

"Verwaiste Konfigurationsfelder" entstehen wenn ein Konfigurationsfeld bearbeitet wurde und dieses Konfigurationsfeld mit einem Theme-Update gelöscht wird.

In diesem Fall verbleibt deine Konfiguration in der Datenbank und diese Konfiguration landet als Konfigurationsfeld im Tab "Allgemein".

In der Regel hat diese Feld dann den technischen Namen und nicht die Ursprüngliche Label als Bezeichnung.