Wenn du wissen möchtest, welches die aktuellste ThemeWare® Version ist hast du mehrere Möglichkeiten.

• Neuste Version im Service Portal finden

• Neuste Version im Shopware Store finden

ThemeWare® Version im Service Portal

1. Öffne das im Browser deiner Wahl

2. Klicke in der Hauptnavigation auf "Changelogs"

3. Die aktuelle Versionsnummer von ThemeWare® findest du direkt als ersten Eintrag in der Liste inklusive Veröffentlichungsdatum

1. Öffne den in einem Browser deiner Wahl

2. Suche und öffne die Produktseite deines Themes

3. Die aktuelle Versionsnummer von ThemeWare® findest du hier an zwei Stellen:

Jede Erlebniswelt basiert auf einem "Layout". Es gibt verschiedene Layout-Typen (Landingpage, Shopseite, Kategorieseite und Produktseite).

Layouts können über die Kategorie- bzw. Produkt-Verwaltung einer Kategorie bzw. einem Produkt zugewiesen werden.

Ein Erlebniswelt-Layout besteht aus einer oder mehreren CMS-Sektionen.

Layout-Einstellungen

Die Einstellungen für das gewählte CMS-Layout erreichst du über das "Zahnrad"-Icon (1) am rechten Fensterrand. Ein Klick darauf öffnet die Sidebar (2) in welcher du die Layout-Einstellungen findest. Hier kannst du beispielsweise den Namen und den Typ des Layouts ändern.

Einstellungen

Du kannst jedem Layout einen Namen geben und CSS-Klassen hinzufügen. Zudem kannst du den Layout-Typ (Shopseite, Landingpage, Kategorieseite) ändern.

Mehr Informationen zum Thema "Erlebniswelten" in Shopware 6 findest du in der Shopware-Dokumentation:

Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Daraus ergibt sich die folgende Palette von unterstützten Browsern:

Shopware 6.5 mit Bootstrap 5:

• Chrome >= 60

• Firefox >= 60

• iOS >= 12

• Safari >= 12

• not Explorer <= 11

Du findest die Einstellungen für Versand- und Zahlungsarten im Admin-Bereich von Shopware:

1. Gehe im Admin zu Einstellungen

2. Öffne den Bereich Handel

Die Texte in der Shopware 6 Storefront werden in den allermeisten Fällen mit Textbausteinen implementiert. Textbausteine ermöglichen es, wiederkehrende Texte und Begriffe zentral zu verwalten und flexibel in der Storefront einzusetzen. Sie sind besonders nützlich, um Inhalte schnell zu ändern, Mehrsprachigkeit zu unterstützen oder eine konsistente Kommunikation im gesamten Shop sicherzustellen, ohne die Templates direkt bearbeiten zu müssen.

Die Storefront nutzt dafür Textbausteine aus dem Shopware Standard-Template sowie Textbausteine der installierten Erweiterungen (Apps, Plugins und Themes).

Die Textbaustein-Verwaltung von Shopware 6 findest du in den Shopware-Einstellungen:

• "Einstellungen" => "Shop" => "Textbausteine"

Bearbeiten von Textbausteinen

Möchtest du einen Text ändern bzw. übersetzen schau gerne einmal in unsere Anleitung:

Eine Übersicht der Textbausteine von ThemeWare® findest du im ThemeWare® Handbuch:

Solltest du in einem Verkaufskanal Textbausteine verwenden wollen, die vom Standard abweichen, kannst du dies über ein eigenes Textbaustein-Set lösen.

Dies ist besonders dann sinnvoll, wenn du weiterhin das Standard-Set unverändert verwenden möchtest, z.B. wenn du in einem Verkaufskanal über unterschiedliche URLs für Deutschland und Österreich verschiedene Textbaustein-Sets einbinden möchtest.

Wie du ein individuelles Textbaustein-Set anlegen kannst, erfährst du in der Shopware-Dokumentation:

Dein individuelles Textbaustein-Set weist du in den Einstellungen des entsprechenden Verkaufskanals über die Domain-Konfiguration im Bereich "Domains" zu.

Hab keine Angst vor Updates! Dieser Leitfaden hilft dir, Shopware- und/oder ThemeWare®-Updates effizient durchzuführen, während du potenzielle Fehler und Probleme minimierst.

Durch regelmäßige Updates, das Erstellen von Backups, das Prüfen von Changelogs und die Deaktivierung inkompatibler Erweiterungen kannst du den Update-Prozess sicherer und problemfreier gestalten.

Dein Update-Leitfaden

1. Führe Updates möglichst regelmäßig durch um stets Neuerungen, Verbesserungen und Fixes zu erhalten und Probleme bei großen Versionssprüngen zu vermeiden.

2. Warte mit Updates nach Möglichkeit ein paar Tage.

3. Teste Updates vorab in einem Testsystem.

4. Erstelle vor jedem Shopware Update ein vollständiges .

   • Tipp: Viele Hoster bieten Backup-Möglichkeiten über die Verwaltungsoberfläche.

   • Tipp: Mit dem ThemeWare® Backup-Manager, kannst du deine Theme-Konfiguration vor dem Update separat sichern und bei Bedarf wiederherstellen.

5. Informiere dich vor dem Shopware Update über vergangene .

6. Informiere dich vor Shopware und/oder ThemeWare® Updates über unsere vergangenen .

7. Prüfe vor jedem Shopware Update den .

8. Prüfe vor jedem ThemeWare® Update den .

9. Deaktiviere inkompatible Erweiterungen vor dem Update und aktiviere diese erst wenn du sicher gestellt hast, dass die Version in deinem Shop kompatibel ist. (siehe )

   • Tipp: Leere danach den gesamten Shopware-Cache und lade die Administration neu.

10. Beachte bei Updates unsere Update-Anleitungen:

    • ThemeWare® Update:

    • Shopware Update:

11. Leere nach Updates den gesamten Shopware-Cache und lade die Administration neu.

12. Lade die Storefront sowie die Administration einmal mit einem "Cache-Refresh" neu.

    • Windows: Strg + F5

    • Mac: Command (⌘) + Shift (⇧) + R oder Command (⌘) + Option/Alt (⌥) + R

Welche ThemeWare® Version mit welcher Shopware Version kompatibel ist, erfährst du im ThemeWare® Service Portal:

Wir sorgen immer dafür, dass ThemeWare® kompatibel mit der aktuellsten Shopware Version ist.

Shopware Versionierung

• Major-Release

  • Wenn inkompatible API-Änderungen durchgeführt wurden (= breaking changes)

  • z.B. 6.5 > 6.6

• Minor-Release

  • Wenn eine neue Funktionalität hinzugefügt wurde, die rückwärtskompatibel ist

  • z.B. 6.5.1 > 6.5.2

• Patch-Release

  • Wenn rückwärtskompatible Fehlerbehebungen durchgeführt wurden

  • z.B. 6.5.1.1 > 6.5.1.2

Bei kleineren Shopware Versionssprüngen, sogenannten "Minor-Releases" bzw. "Patch-Releases", ist i.d.R. nicht mit größeren Anpassungen zu rechnen und ThemeWare® daher meist schon vor dem Shopware-Update kompatibel.

Bei größeren Versionssprüngen, sogenannten "Major-Releases", gibt es i.d.R. vor dem eigentlichen Shopware Release oder am selben Tag eine kompatible ThemeWare® Version.

Kompatibilitäts-Updates

Wir haben in den letzten Jahren die Erfahrung gemacht, dass es sinnvoll ist sich die Zeit zu nehmen, eine Erweiterung (App, Plugin oder Theme) in jedem noch so kleinen Shopware Release zu prüfen. Wir nehmen uns deshalb ganz bewusst Zeit ThemeWare® in jedem Shopware Release zu installieren und zu testen. Auch das Theme-Update selbst prüfen wir.

Abhängig davon, wie früh wir Zugriff auf den finalen Release erhalten und wie umfangreich die Kompatibilitätsherstellung ist, kann es in seltenen Fällen auch mal ein paar Stündchen dauern bis ThemeWare® aktualisiert oder als kompatibel markiert wird. In 99% der Fälle wurde eine Kompatibilität aber noch am selben Tag oder sogar vor dem Shopware Release sichergestellt.

Wir halten dieses Vorgehen für sinnvoll um eine tatsächliche, echte Kompatibilität und damit ein möglichst reibungsloses Update gewährleisten zu können.

Sonderfall "Breaking changes"

Es kann Aufgrund technischer Umstellungen in Shopware (z.B. in Shopware 6.4 oder Shopware 6.5) dazu kommen, dass es keine ThemeWare® Version (dies gilt so übrigens für alle Erweiterungen) gibt, welche – gleichzeitig – sowohl mit der alten als auch mit der neuen Shopware Version kompatibel ist. Die gilt besonders für Major-Releases. In diesem Fall kann sich ein ThemeWare® Update etwas verzögern, abhängig davon, wie umfangreich die nötigen Anpassungen sind.

Es kann natürlich vorkommen, dass es "Breaking changes" in ThemeWare® gibt, das ist aber extrem seltenen der Fall.

Sowohl Shopware als auch wir versuchen "Breaking changes" bestmöglich zu vermeiden, aber manchmal ist dies technisch leider unumgänglich!

Ob dein ThemeWare® Theme mit der neusten Shopware Version kompatibel ist, kannst du auf der Store-Seite deines Themes im überprüfen.

Die Kompatibilitäts-Übersicht von Shopware hat einen "haken". Du siehst zwar, dass ThemeWare® grundsätzlich kompatibel mit verschiedenen Shopware Versionen ist, aber nicht mit welche Versionen zusammenpassen.

Nutzt du beispielsweise nicht die aktuellste Shopware Version, siehst du zwar, dass es eine neuere ThemeWare® Version gibt, aber diese muss nicht zwangsläufig für dich verfügbar sein. Es kann wie oben erklärt sein, dass eine neuere ThemeWare® Version nicht mehr kompatibel ist mit älteren Shopware Versionen. Die Erweiterungs-Verwaltung von Shopware 6 bietet dir in diesem Fall ganz bewusst kein Update mehr an. Dies solltest du in keinem Fall manuell umgehen!

Damit du ganz einfach sehen kannst, welche ThemeWare® Version für welche Shopware Version verfügbar ist, haben wir eine Übersicht für die Shopware Kompatibilität in unser Service Portal integriert:

• Häufige Fragen:

In diesem Artikel erfährst du welche Daten ThemeWare® installiert und was beim Installieren, Aktivieren, Deaktivieren bzw. Deinstallieren mit den Daten passiert.

Es gibt im Zusammenhang mit ThemeWare® drei verschiedene "Arten" von Daten:

• Benutzerdaten

• Plugin-Daten

• Theme-Daten

Benutzerdaten sind Daten vom Benutzer ergänzt werden (z.B. Produktbilder, Zahlungs-, Versandlogos usw.). Benutzerdaten werden von ThemeWare® nicht entfernt.

"Plugin-Daten" sind quasi das Plugin selber, also Daten die im Plugin-Ordner liegen. Das wären beispielsweise, Twig-/Template-Dateien, SCSS-Dateien, Vorschaubilder für CMS-Elemente usw. Diese Daten werden erst beim "Löschen" entfernt.

Dazu kommen Daten die von der Erweiterungs-Verwaltung installiert und deinstalliert werden. Das wären beispielsweise Textbausteine, CMS-Blöcke/-Elemente und Zusatzfelder.

• Textbausteine werden beim Installieren/Aktivieren hinzugefügt.

• Deaktivieren:

  • Unbearbeitete Textbausteine werden in der Textbaustein-Verwaltung "ausgeblendet".

• Zusatzfelder werden beim Installieren/Aktivieren hinzugefügt.

• Deaktivieren: -/-

• Deinstallieren: -/-

• Deinstallieren ("Alle App-Daten endgültig entfernen"):

• CMS-Erweiterungen werden beim Installieren/Aktivieren hinzugefügt

• Deaktivieren:

  • CMS-Blöcke/-Elemente werden in deinen CMS-Layouts "ausgeblendet". Technisch gesehen verbleiben Sie aber in den CMS-Layouts.

Ergänzend dazu gibt es "Theme-Daten". Das sind Daten die der Shopware 6 Theme-Manager installiert (z.B. das Shop-Logo, die Theme-Konfiguration, oder Theme-Duplikate).

• Das Theme nach dem Installieren/Aktivieren in der Theme-Verwaltung angezeigt.

• Deaktivieren:

  • Das Theme wird nicht mehr in der Theme-Verwaltung angezeigt.

• Theme-Duplikate müssen manuell in der Theme-Verwaltung erstellt werden.

• Deaktivieren:

  • Das Duplikat wird nicht mehr in der Theme-Verwaltung angezeigt.

• Die Theme-Konfiguration (bzw. die Konfiguration von Theme-Duplikaten) wird beim Installieren/Aktivieren angelegt.

• Deaktivieren: -/-

• Deinstallieren: -/-

• Bilder werden beim Installieren/Aktivieren hinzugefügt.

• Deaktivieren: -/-

• Deinstallieren: -/-

• Deinstallieren ("Alle App-Daten endgültig entfernen"):

• CMS-Erweiterungen (CMS-Blöcke/-Elemente)

  • CMS-Erweiterungen werden beim Installieren/Aktivieren hinzugefügt.

• Textbausteine

• CMS-Erweiterungen (CMS-Blöcke/-Elemente)

  • CMS-Blöcke/-Elemente werden in deinen CMS-Layouts "ausgeblendet". Technisch gesehen verbleiben Sie aber in den CMS-Layouts.

  • Aktivierst du ThemeWare® wieder, sind die CMS-Blöcke/-Elemente wieder "sichtbar".

• CMS-Erweiterungen (CMS-Blöcke/-Elemente)

  • -/-

• Textbausteine

• CMS-Erweiterungen (CMS-Blöcke/-Elemente)

  • -/-

• Textbausteine

Im Medien-Manager von Shopware 6 findest du in der Regel verschiedene Standard-Ordner für unterschiedliche Medientypen – z. B. für Produkte, Kategorien, CMS-Inhalte usw.

Standard Medienordner von Shopware 6

| | Mail Template Media | mail\_template (E-Mail-Template) | Thumbnail-Qualität: 80 |

• Thumbnails für diesen Ordner generieren

• Seitenverhältnis beibehalten

| | Payment Method Media | payment\_method (Zahlungsart) | Thumbnail-Qualität: 80 |

• Einstellungen vom überliegenden Ordner übernehmen

• Thumbnails für diesen Ordner generieren

• Seitenverhältnis beibehalten

| | Product Manufacturer Media | product\_manufacturer (Hersteller) |

200x200, 360x360, 1920x1920 Thumbnail-Qualität: 80

|

• Thumbnails für diesen Ordner generieren

• Seitenverhältnis beibehalten

| | Product Media | product (Produkt) |

280x280, 400x400, 800x800, 1920x1920 Thumbnail-Qualität: 80

|

• Thumbnails für diesen Ordner generieren

• Seitenverhältnis beibehalten

| | Shipping Method Media | shipping\_method (Versandart) | Thumbnail-Qualität: 80 |

• Einstellungen vom überliegenden Ordner übernehmen

• Thumbnails für diesen Ordner generieren

• Seitenverhältnis beibehalten

| | Theme Media | theme (Theme) | Thumbnail-Qualität: 80 |

• Einstellungen vom überliegenden Ordner übernehmen

• Thumbnails für diesen Ordner generieren

• Seitenverhältnis beibehalten

| | User Media | user (Benutzer) | Thumbnail-Qualität: 80 |

• Thumbnails für diesen Ordner generieren

• Seitenverhältnis beibehalten

|

Bilder organisierst du in Shopware 6 über die Medien-Verwaltung bzw. den Medienmanager. Diesen findest du über die Hauptnavigation Inhalte > Medien deiner Administration.

Folgende Dateitypen können über den Medienmanager hochgeladen werden:

jpg, jpeg, png, webp, gif, svg, bmp, tiff, tif, eps, webm, mkv, flv, ogv, ogg, mov, mp4, avi, wmv, pdf, aac, mp3, wav, flac, oga, wma, txt, doc, glb

Ordner

In der Medien-Verwaltung gibt es verschiedene, vorinstallierte Ordner in welchen du deine Bilder organisieren kannst.

Lädst du Bilder über Upload-Felder (Beispielsweise in Erlebniswelten) hoch, sortiert Shopware die Bilder für dich automatisch ein.

Thumbnails

In den Einstellungen der einzelnen Ordner hast du die Möglichkeit Thumbnail-Größen und die Qualität der Thumbnails für alle Bilder in diesem Ordner zu definieren.

Shopware nutzt von Haus aus Thumbnails von 400x400, 800x800 und 1920x1920 Pixeln. Für Produktbilder werden zudem auch Thumbnails mit 280x280 Pixeln generiert.

Hersteller-Logos haben Thumbnails mit 200x200, 360x360 und 1920x1920 Pixeln.

Wählst du ein Bild aus, kannst du im Abschnitt "Metadaten" den Dateinamen bearbeiten. Wir möchten an dieser Stelle aber besonders auf den "Alt-Text" und "Titel" hinweisen. Darin kannst den Alt-Text und den Meta-Titel des Mediums ändern.

Die Frage nach der perfekten Bildgröße im fluiden Webdesign lässt sich nicht pauschal beantworten. Es kommt immer darauf an, wofür ein Bild genutzt und wie groß es dargestellt wird.

Mehr Informationen dazu findest du in folgendem Artikel:

Mehr Informationen zum Medienmanager findest du in der Shopware-Dokumentation:

Erlebniswelten sind eine Grundfunktion von Shopware 6 und ersetzen die Einkaufswelten aus Shopware 5. Mit Erlebniswelten kannst du Content-Seiten wie Landingpages, Shopseiten, Kategorieseiten und Produktseiten erstellen und gestalten.

Grundlagen

Jede Erlebniswelt basiert auf einem "Layout". Es gibt verschiedene Layout-Typen (Landingpage, Shopseite, Kategorieseite und Produktseite).

Erlebniswelt-Verwaltung

Ein Layout erstellst oder öffnest du über die Erlebniswelt-Verwaltung von Shopware 6. Diese erreichst du im Menüpunkt Inhalte => Erlebniswelten in deiner Administration.

CMS-Editor (Erlebniswelt-Editor)

Erstellst oder öffnest du ein Layout, gelangst du in den Erlebniswelt-Editor (kurz CMS-Editor). In diesem WYSIWYG-Editor (1) kannst du dein Erlebniswelt-Layout bearbeiten und erhältst gleichzeitig eine grobe Vorschau.

Zudem kannst du in der Sidebar allgemeine Einstellungen (2) vornehmen, wie den Namen des Layouts oder die CSS-Klasse der Erlebniswelt in der Storefront.

Ein Layout (siehe ) besteht aus einer oder mehreren Sektionen (1, siehe ) in die einzelne Blöcke (2, siehe ) hinzugefügt werden, die wiederum aus einem oder mehreren Elementen (3, siehe ) wie Texten oder Bildern bestehen.

Nachfolgend siehst du ein Layout vom Typ "Landingpage" im Erlebniswelt-Editor von Shopware 6:

Eine CMS-Sektion (1) besteht aus einem oder mehren CMS-Blöcken. Für jede Sektion kannst du in der Sidebar grundlegende Einstellungen (2) vornehmen, wie den Namen der Sektion, die CSS-Klasse oder die Hintergrundfarbe der Sektion in der Storefront.

Ein CMS-Block (1) beinhaltet ein oder mehrere CMS-Elemente. Für jeden Block kannst du in der Sidebar grundlegende Einstellungen (2) vornehmen, wie den Namen des Blocks, die CSS-Klasse, die Hintergrundfarbe oder Abstände des Blocks in der Storefront.

Ein CMS-Element (1) kannst du konfigurieren, wenn du ein entsprechendes Element anklickst und das Zahnrad-Symbol (2) (oben rechts im Element) anklickst.

Die Konfiguration eines CMS-Elements ist recht selbsterklärend. CMS-Elemente von ThemeWare® bieten dir wie unser Theme selber sehr viele Konfigurationsmöglichkeiten. Probiere diese einfach einmal aus oder sieh dir die entsprechenden Hilfe-Texte an. Weitere Informationen zu unseren Elementen findest du zudem im ThemeWare® Handbuch.

Mit ThemeWare® erhältst du eine umfangreiche Sammlung an verkaufsfördernden CMS-Blöcken und CMS-Elementen.

Da nicht zu jedem CMS-Block ein CMS-Element gehören muss und umgekehrt, sprechen wir von CMS-Erweiterungen.

Du kannst sowohl für CMS-Sektionen als auch für CMS-Blöcke eine Hintergrundfarbe und/oder ein Hintergrundbild konfigurieren. Dies bietet dir bereits diverse Gestaltungsmöglichkeiten. Noch mehr Gestaltungsmöglichkeiten bieten dir dann die entsprechenden CMS-Elemente von Shopware und ThemeWare® Pro.

Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.

Alle Informationen zu Features und Erweiterungen von ThemeWare® für Erlebniswelten in Shopware 6 findest du im ThemeWare® Handbuch:

Mehr Informationen zum Thema "Erlebniswelten" in Shopware 6 findest du in der Shopware-Dokumentation:

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

Darüber hinaus gibt es an verschiedenen Stellen Schrift-Auswahlfelder (Dropdown-Auswahl) wo du für bestimmte Element auswählen kannst ob das Element die Schrift der Headlines oder vom Text nutzen soll.

Im Feld Schriftart kannst du kommasepariert Schriftarten angeben. Beispielsweise 'Inter', sans-serif . Hier sind theoretisch mehrere Fonts möglich, welche der Browser als Prioritätenliste interpretiert. Ist "Font 1" nicht verfügbar, versucht er "Font 2" zu laden usw.

Schriftart bzw. Webfont

Im Hochkommata geschrieben steht der gewünschte Font bzw. Webfont. In unserem Beispiel "Inter".

Spezielle Schriften bzw. Webfonts sollten immer in Hochkommata geschrieben werden. Bei diesen Fonts kannst du nicht davon ausgehen, dass diese auf allen Geräten installiert sind. Du musst diese Fonts also deinen Besuchern "zur Verfügung stellen".

Um die Fonts deinen Besuchern zur Verfügung zu stellen musst du diese entweder lokal auf deinen Webserver ablegen oder über eine Drittanbieter-API (z.B. Google Fonts) importieren. Mehr Informationen dazu findest du weiter unten im Artikel.

ThemeWare® stellt dir zu deinem Theme passende Fonts bereits zur Verfügung. Diese werden direkt von deinem Webserver geladen ohne eine API bzw. ein Tracking Dritter.

Diese Standard-Schriften kannst du problemlos in der Schrift-Konfiguration nutzen. Da Schriften recht viel Platz einnehmen gibt es für jedes Theme derzeit lediglich ein bis zwei Schriftarten zur Auswahl. Alternative Schriften kannst du aber ganz einfach selber ergänzen. Dazu findest du im Bereich "Anleitung" einen passenden Artikel.

Ab ThemeWare® 1.1.7 sind alle von ThemeWare® verwendeten Fonts Bestandteil jedes ThemeWare® Themes. Somit stehen dir in jedem Theme 10+1 Schriften zur Verfügung:

Zusätzlich stellt dir Shopware 6 den Font "Inter" von Rasmus Andersson zur Verfügung. Dieser Font liegt in den Stichstärken 400 (Regular), 600 (SemiBold) und 700 (Bold).

Zusätzlich zu den Standard-Schriften kannst du auch sogenannte "Websichere Schriften" nutzen. Das sind Schriftarten die bereits auf nahezu allen Geräten installiert sind und damit eine hohe Verfügbarkeit haben. Dies wäre beispielsweise die "Arial", die "Verdana", die "Helvetica", die "Courier New", die "Consolas", die "Georgia" oder die "Times New Roman".

Solche Schriften kannst du auch ohne Hochkommata eintragen. Du musst dich in diesem Fall nicht darum kümmern, die entsprechende Schriftart deinen Besuchern zur Verfügung zu stellen. Da diese Schriften beriets auf den meisten Geräten installiert sind.

Du kannst solche Schriften auch "stacken" (Stapeln) und mehr als nur eine Schrift angeben um sicher zu gehen. Dies sieht dann wie folgt aus: Helvetica, Arial

Auf den eigentlichen Font bzw. Webfont folgt ein sogenannter "Fallback-Font". In unserem Beispiel ist dies "sans-serif", also eine serifenlose Schrift.

Mit einer solchen "generische Schrift" bietest du dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten Schrift entspricht, falls die eigentliche Schrift nicht geladen werden konnte.

Das bedeutet wenn du eine spezielle Schriftart verwendest, trägst du diese mit Hochkommata zuerst ein. Der Browser versucht dann diese Schrift zu laden.

Falls dies nicht funktioniert (vielleicht blockiert ein Browser das Laden des Fonts) wird der Fallback-Font – also irgendeine "ähnliche" Systemschrift – geladen.

Anmerkung: Es kann durchaus sein, dass der Shop in deinem Webbrowser prima aussieht – weil du die entsprechende Schrift auf deinem Gerät installiert hast.

Rufst du den Shop aber mit einem Gerät (beispielsweise deinem Smartphone) auf – auf welchem die gewünschte Schrift nicht installiert ist, wirst du feststellen, dass die Schrift nicht "korrekt" angezeigt wird.

Prüfe in diesem Fall die Einbindung der Schrift oder nutze eine websichere Schriftart. Mehr dazu findest du im Bereich "Anleitungen".

Ein Eintrag im Schriftfeld könnte also beispielsweise 'Inter', sans-serif oder 'Inter', Arial, sans-serif oder Helvetica, Arial, sans-serif lauten.

In ThemeWare® kannst du drei Strichstärken definieren: "light", "normal" und "bold". Die Strichstärken beziehen sich dabei auf die Schrift für "Texte" und auf die Schrift für "Überschriften". Prüfe darum welche Strichstärken in den gewählten Schriften verfügbar sind und passe deine Konfiguration ggf. dahingehend an.

Es ist empfehlenswert, dass beide Schriftarten (sofern du zwei unterschiedliche Schriften nutzt), die selben Strichstärken verfügbar haben um "Darstellungsfehler" zu vermeiden.

Die verfügbaren Strickstärken für Google Webfonts kannst du einfach unter nachsehen – oder du nutzt das Tool .

Du musst dabei nicht drei verschiedene Strichstärken nutzen, du kannst auch alle Strichstärken gleich (z.B. Light: 400, Normal: 400 und Bold: 400) konfigurieren oder nur zwei Strichstärken (z.B. Light: 400, Normal: 400 und Bold: 600) wählen.

Wie bereits erwähnt sind spezielle Schriften bzw. Webfonts nicht automatisch auf jedem Gerät deiner Besucher vorhanden. In diesem Fall würde der Webbrowser den Fallback-Font nutzen.

Damit die Schrift vom Webbrowser deiner Besucher genutzt werden kann, musst du die Schrift dem Browser des Besuchers zur Verfügung stellen. Entweder lässt du Schriften über die API eines Drittanbieters importieren (z.B. Google Fonts) oder du hinterlegst Fonts lokal auf deinem Webserver.

Die lokale Methode kann zwar langsamer sein, als eine API eines Drittanbieters, dafür kannst du mit dieser Methode ein etwaiges Tracking oder eine Datenverarbeitung durch einen externen Anbieter vermeiden, Stichwort DSGVO.

• Einführung: Wie du Schriften in deinem Shop konfigurieren kannst, erfährst du im Artikel

• Anleitung:

Aufgrund unserer HC-Architecture® ist ThemeWare® von Grund auf höchst kompatibel zu fast allen Shopware Erweiterungen (Plugins oder Apps). Sollte es doch mal zu einer Inkompatibilität kommen, kannst du diese selber mit wenigen Klicks lösen, indem du den jeweiligen Funktionsbereich einfach abschaltest und dadurch auf den Shopware Standard setzt.

Probleme mit Erweiterungen Dritter treten lediglich auf, wenn das Custom Theme und die Erweiterung den selben Twig-Block modifizieren. In ThemeWare® für Shopware 6 lag unser Fokus daher darauf Twig-Blöcke nur wenn absolut nötig zu modifizieren und diese Modifikationen an Konfigurationsfelder zu binden damit diese Modifikationen deaktiviert werden können.

In diesem Artikel zeigen wir dir Konfigurationsfelder, die du nutzen kannst, um Probleme selber zu lösen:

Header

Bei Problemen im Header empfehlen wir dir einen der ThemeWare "Basis-Header" ("Header 1" und "Header 2") zu nutzen. Diese basieren auf dem Shopware Standard-Header und bieten daher eine maximale Kompatibilität zu Erweiterungen Dritter.

• Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration" => Feld "Darstellungsart"

• Im Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" findest du zudem Konfigurationsfelder um einzelne Elemente im Header auf den Standard zurück zu setzen.

Mehr Informationen folgen...

Bei Problemen mit Erweiterungen im Footer findest du im Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Footer" Konfigurationsfelder um einzelne Elemente im Footer auf den Standard zurück zu setzen.

• Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Inhalt" => Feld "Rabatt-Badge (Produkt-Badges)"

• Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Inhalt" => Feld "Topseller-Badge (Produkt-Badges)"

• Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Inhalt" => Feld "Neu-Badge (Produkt-Badges)"

Bei Problemen mit Erweiterungen, welche die Breadcrumb modifizieren findest du im Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Inhalt" ein Konfigurationsfeld um die Breadcrumb auf den Standard zurück zu setzen.

• Tab "Inhalt" => Bereich "Cookie-Hinweis" => Feld "Cookie-Hinweis anzeigen"

• Tab "Produktseiten" => Bereich "Galerie" => Abschnitt "Thumbnails (auf Standard-Produktseiten)" => Feld "Position"

• Tab "Produktseiten" => Bereich "Lieferinformationen-Labels (in der Buybox)" => Abschnitt "Label: Versandkostenfrei-Label" => Feld "Versandkostenfrei-Label anzeigen"

• Tab "Produktseiten" => Bereich "Lieferinformationen-Labels (in der Buybox)" => Abschnitt "Label: Lagerbestand-Label" => Feld "Lagerbestand-Label anzeigen"

• Tab "Produktseiten" => Bereich "Lieferinformationen-Labels (in der Buybox)" => Abschnitt "Label: Ausverkauft-Label" => Feld "Ausverkauft-Label anzeigen

• Tab "Produktseiten" => Bereich "Eigenschaften-Tabelle (in Tabs)" => Feld "Eigenschaften-Tabelle anzeigen"

• Tab "Produktseiten" => Bereich "Tab "Beschreibung"" => Abschnitt "Basiskonfiguration" => Feld "Überschrift "Produktinformationen ..." anzeigen"

• Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produkt-Bewertung" => Feld "Produkt-Bewertung anzeigen"

Du findest die Einstellungen für Versand- und Zahlungsarten im Admin-Bereich von Shopware:

1. Gehe im Admin zu Einstellungen

2. Öffne den Bereich Handel

3. Wähle Zahlungsarten aus

Dort kannst du neue Zahlungsarten anlegen oder bestehende bearbeiten:

Diese Konfiguration wirkt sich direkt auf den Footer und den Checkout deines Shops aus.

ThemeWare® nimmt keine Änderungen an der Funktionalität der Zahlungsarten vor – es verbessert lediglich die Darstellung im Footer oder fügt diese auf der Produktdetailseite ein.

Die passenden, pagespeed-optimierten Logos findest du in den ThemeWare® Utilities. Diese werden dir kostenfrei und sofort per E-Mail zugesendet und unterstützen dich bei der professionellen Gestaltung deines Shops.

So weist du ein Logo in Shopware zu:

1. Gehe zu Einstellungen > Handel > Zahlungsarten

2. Wähle die gewünschte Methode per Klick aus

3. Im Bereich "Medien" kannst du das passende Logo aus der Medienverwaltung auswählen und zuweisen

Die zugewiesenen Logos werden automatisch im Footer deines Shops angezeigt – sofern dies im Theme aktiviert ist.

In der ThemeWare® Konfiguration findest du diverse Farbkonfigurationsfelder (Farbauswahl). Im Tab "Layout" findest du beispielsweise den Bereich "Hauptfarben". Hier konfigurierst du die wichtigsten Farben für deinen Shop.

Eine Farbauswahl erkennst du immer an einem kleinen, meist bunten Rechteck, links neben dem Eingabefeld. Diese Rechteck ist eine Vorschau der konfigurierten Farbe.

Hexadezimalwerte

Im Eingabefeld siehst du dann den entsprechenden Farbcode. In der Regel findest du dort einen Code nach dem Muster #123456. Die ist ein Hexadezimalwert einer Farbe (z.B.: #ff0000).

RGBA-Werte

Wir empfehlen dir mit Hexadezimalwerten zu arbeiten. Du kannst aber auch mit RGBA-Werten (z.B. rgba(255, 0, 0, 0.5)) arbeiten. Über RGBA-Werte (RGB-Farbmodell + Alpha-Kanal) kannst du sehr leicht Transparenzen definieren.

Wenn du auf die Farbvorschau klickst, öffnet sich der "Farbwähler" auch "Color Picker" genannt.

Nutze einfach den Farbwähler um einen fehlerfreien Farbcode zu generieren.

Du wirst bei der Farb-Konfiguration in ThemeWare® gelegentlich den Wert transparent finden. Dieser steht für eine durchsichtige bzw. unsichtbare Farbe.

Eine Transparenz erreichst du im Idealfall über einen RGBA-Wert (z.B. rgba(0, 0, 0, 0) oder rgba(255, 255, 255, 0)), in ThemeWare® hat der Wert transparent in manchen Konfigurationsfeldern aber eine besondere Funktion. "Transparent" wird genutzt um gleichzeitig noch andere Elemente (z.B. Rahmen um Elemente) zu entfernen.

Zusätzlich zu diesen Farbwerten kannst du auch Variablen oder SCSS-Funktionen verwenden.

Variablen bzw. Theme-Variablen sind die technischen Bezeichnungen für ein Konfigurationsfeld (z.B. $sw-color-brand-primary für die Primärfarbe). Beim kompilieren wird diese Variable von Shopware durch den Wert des entsprechenden Konfigurationsfeldes ersetzt.

Theme-Variablen können dir dabei helfen, dass du häufig verwendete Farben nicht jedes mal neu eingeben musst bzw. dass du viele Farbfelder mit der entsprechenden Variable auf einen Rutsch ändern kannst.

Mit einfachen SCSS-Funktionen kannst du Farbwerte darüber hinaus modifizieren (z.B. abdunkeln, aufhellen etc.).

Beides empfehlen wir nur erfahrenen Anwendern, da diese schnell zu Fehlern führen können.

Mehr Informationen zum Thema "Theme-Variablen" und "SCSS-Funktionen" findest du im Bereich "Anleitungen" im Bereich "Individuelle Anpassungen".

Das Design deines Shops wird maßgeblich durch die Primärfarbe und die Sekundärfarbe bestimmt.

Zusätzlich bietet ThemeWare® die auch die Nuancen hell und dunkel dieser beiden Farben an.

Zum Generieren von Farbnuancen hell und dunkel empfehlen wir dir das Online-Tool . Damit kannst du dir ganz einfach Nuancen für eine Grundfarbe generieren lassen.

Wenn du diese Farben eingestellt hast, bis du mit der Farbkonfiguration deines Themes schon sehr weit. Dennoch solltest du dir die anderen Bereiche anschauen.

Wenn du einen ungültigen Farbwert eingibst und im Theme-Manager speicherst, kommt es zu einer Fehlermeldung.

Angenommen du gibst bei der Primärfarbe aus versehen eine zweite Raute ein (#f2832e#), erscheint beim Speichern der Konfiguration die folgende Fehlermeldung:

Da wir wissen, dass wir gerade die Primärfarbe geändert haben, ist es naheliegend, dass wir dort wohl etwas falsch gemacht haben. Also korrigieren wir den Wert direkt.

Du wirst nun feststellen, dass obwohl du den Wert korrigiert hast, beim Speichern erneut diese Fehlermeldung erscheint. Wichtig ist hierbei zu wissen, dass der Theme-Manager jetzt sozusagen "kaputt" ist. Egal was du eingibst, der falsche Wert hat sich quasi festgefressen.

Leider können wir dieses verhalten nicht ändern, aber wir gehen davon aus, dass Shopware dies mit einem künftigen Update verbessert.

Um das Problem zu lösen, musst du die Seite einmal neu laden (z.B. mit F5). Danach navigierst du wieder zum "fehlerhaften" Konfigurationsfeld – dort ist tatsächlich noch der falsche Wert gespeichert – korrigierst den Wert und speicherst die Änderung nochmals.

Nun funktioniert das speichern und damit die Kompilierung des Themes wieder.

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)

Um sicherzustellen, dass dein Shop die Barrierefreiheitsstandards für den Farbkontrast erfüllt, empfehlen wir bei der Farbkonfiguration auf ein ausreichendes Kontrastverhältnis von Vorder- und Hintergrundfarben deiner Elemente zu achten.

Das Kontrastverhältnis ist ein numerischer Wert, der von 1 bis 1 reicht. (kein Kontrast) bis 21 (Maximaler Kontrast). Als in den Richtlinien für die Barrierefreiheit von Webinhalten (WCAG) ein minimales Kontrastverhältnis wird 4,5:1 für normalen Text und 3:1 für großen Text empfohlen.

Du kannst dafür Online-Tools (siehe "Contrast Checker" oder "Accessible Color Contrast") verwenden, um das Kontrastverhältnis deiner Farben zu berechnen und zu überprüfen.

ThemeWare® nutzt verschiedene Standardfarben beispielsweise Status-Farben für Badges oder dem Kaufen-Button. Die Textfarben generieren sich automatisch als Kontrastfarbe. Wähle also einfach passende "Hintergrund"-Farben für ein ausreichendes Kontrastverhältnis zu hellen bzw. dunklen Texten. Folgende Farben bieten sich an:

• Status-Farben:

  • Erfolg: #3cc261

  • Information: #26b6cf

• Status-Farben:

  • Erfolg: #3cc261 -> #007e4e

  • Information: #26b6cf -> #005b99

• Einführung: Wie du Farben in deinem Shop konfigurieren kannst, erfährst du im Artikel

• Anleitung:

Jedes CMS-Layout besteht aus einer oder mehreren CMS-Sektionen. Dadurch lassen sich viele unterschiedliche Designs mit fullwidth und/oder boxed Sektionen umsetzen.

Es gibt derzeit zwei Arten von CMS-Sektionen: "Sidebar" und "Volle Breite". Also einer Sektion mit Sidebar und einer Sektion ohne Sidebar.

Eine CMS-Sektion wird mit einem oder mehreren CMS-Blöcken befüllt. Mehr dazu erfährst du im folgenden Artikel.

CMS-Sektion hinzufügen

Ein neues Layout enthält automatisch eine CMS-Sektion. Um eine weitere Sektion vor einer bestehenden Sektion hinzuzufügen, klicke auf das "Plus"-Icon (1) über der Sektion. Um eine Sektion nach einer bestehenden Sektion hinzuzufügen, klicke auf das "Plus"-Icon (2) unter der Sektion.

Nun kannst du zwischen den beiden verfügbaren Arten von CMS-Sektionen ("Sidebar" und "Volle Breite") auswählen.

Die Einstellungen für eine CMS-Sektion erreichst du über das "Layout"-Icon (1) am linken Rand der entsprechenden Sektion. Ein Klick darauf öffnet die Sidebar (2) in welcher du die Sektions-Einstellungen findest. Hier kannst du beispielsweise den Namen und den Größenmodus der Sektion ändern.

Du kannst jeder Sektion einen Namen geben und CSS-Klassen hinzufügen. Du kannst den Größenmodus jeder Sektion auswählen sowie eine Hintergrundfarbe und ein Hintergrundbild zuweisen. Im Abschnitt "Sichtbarkeit" kannst du zudem festlegen auf welchem Gerät die Sektion angezeigt werden soll.

Die Darstellung von CMS-Sektionen im Erlebniswelt-Editor weist in Shopware 6 etwas von der tastsächlichen Darstellung in der Storefront ab. Eine CMS-Sektion geht stets über die volle Breite (außer du nutzt das ThemeWare® Boxed-Layout) der Erlebniswelt. Der eigentliche Inhalt einer Sektion kann dann über die "volle Breite" oder "boxed" ("Zentrierter Inhalt") dargestellt werden.

Nachfolgend siehst du einen Vergleich einer CMS-Sektion im Erlebniswelt-Editor und in der Storefront.

1. CMS-Sektion (1) [Hintergrundfarbe: #ffd181]

2. CMS-Block (2) [Hintergrundfarbe: #ff8d30]

3. CMS-Element (3)

Mehr Informationen zum Thema "Erlebniswelten" in Shopware 6 findest du in der Shopware-Dokumentation:

Die Frage nach der perfekten Bildgröße lässt sich nicht pauschal beantworten. Es kommt immer darauf an, wofür ein Bild genutzt und wie groß es dargestellt wird.

Die ideale Bildgröße hängt von deinem Design und dem gewünschten Detailgrad ab.

In diesem Artikel geben wir dir ein paar nützliche Tipps an die Hand.

Tipp: ThemeWare® PSD-Dateien nutzen

Grundsätzlich empfehlen wir dir, für Erlebniswelten und Logos die Vorlagen der mitgelieferten PSD-Dateien zu nutzen.

Allgemein

Die Shopware 6 "Medienverwaltung" nutzt standardmäßig folgende Thumbnail-Größen:

• 400x400 Pixel (B x H)

• 800x800 Pixel (B x H)

• 1920x1920 Pixel (B x H)

Es genügt der Upload eines ausreichend großen Bildes. Shopware generiert automatisch die entsprechend Thumbnails in den oben genannten Größen. Die Thumbnails werden dann, je nach Viewport, in der Storefront verwendet. 1920px oder größer sind daher eine gute Ausgangsbasis.

Die Shopware 6 "Medienverwaltung" nutzt für Hersteller-Logos standardmäßig folgende Thumbnail-Größen:

• 200x200 Pixel (B x H)

• 360x360 Pixel (B x H)

• 1920x1920 Pixel (B x H)

Das bedeutet du solltest diese Logos in einer Größe von 1920x1920px oder größer hochladen, damit in jedem Browser und jedem Viewport ausreichend große Thumbnails geladen werden.

Die Shopware 6 "Medienverwaltung" nutzt für Kategoriebilder standardmäßig folgende Thumbnail-Größen:

• 400x400 Pixel (B x H)

• 800x800 Pixel (B x H)

• 1920x1920 Pixel (B x H)

Das bedeutet du solltest diese Bilder in einer Größe von 1920x1920px oder größer hochladen, damit in jedem Browser und jedem Viewport ausreichend große Thumbnails geladen werden.

Um eine gute Performance sicherzustellen, solltest du natürlich keine unnötig großen Bilder verwenden. Gleichzeitig ist es wichtig, deine Produktbilder ausreichend zu optimieren, um eine hohe Bildqualität bei möglichst geringer Dateigröße zu gewährleisten. Ein Vorteil von Shopware ist, dass für jedes hochgeladene Bild automatisch passende Thumbnails für unterschiedliche Viewports generiert werden (siehe oben). Dadurch wird sichergestellt, dass je nach Endgerät und Bildschirmauflösung immer die optimale Bildgröße geladen wird, was sowohl die Performance als auch das Nutzererlebnis verbessert.

Die Shopware 6 "Medienverwaltung" nutzt für Produktbilder standardmäßig folgende Thumbnail-Größen:

• 280x280 Pixel (B x H)

• 400x400 Pixel (B x H)

• 800x800 Pixel (B x H)

• 1920x1920 Pixel (B x H)

Shopware empfiehlt zwar eine Bildgröße von 600x600px, allerdings ist diese Größe in den Standard-Thumbnail-Einstellungen (siehe oben) nicht enthalten. Das bedeutet, dass Shopware bei den generierten Thumbnails kleinere Bilder hochskalieren muss, was zu Qualitätsverlusten führt.

Um eine optimale Bildqualität zu gewährleisten, empfehlen wir:

1. Bilder in einer passenden Größe hochladen

   • Am besten 1920x1920px, da Shopware standardmäßig ein 1920px Thumbnail generiert.

   • Alternativ 800x800px, wenn du das 1920px Thumbnail deaktivierst.

Wir empfehlen, Bilder mit mindestens 1920x1920px hochzuladen, da dies den Thumbnail-Voreinstellungen entspricht.

Produktbilder im Listing werden Standardmäßig gestreckt. Das bedeutet, dass die Produktbilder (roter Rahmen) auf die Höhe oder Breite (je nachdem ob das Bild im Hoch- oder Querformat vorliegt) des vorgesehenen Bereiches (blauer Rahmen) skaliert werden. Der vorgesehene Bereich wird dabei nicht zwangsläufig ausgefüllt. Die Proportionen der Produktbilder bleiben erhalten.

Im Anzeigemodus "Zugeschnitten" werden Produktbilder (roter Rahmen) so skaliert, dass der vorgesehenen Bereich (blauer Rahmen) vollständig ausgefüllt wird. Hierbei wird die kleinste Seite auf die volle Breite oder Höhe (je nachdem ob das Bild im Hoch- oder Querformat vorliegt) des vorgesehenen Bereichs skaliert, der Rest vom Bild wird "abgeschnitten". Die Proportionen der Produktbilder bleiben erhalten.

Die optimale Bildgröße für dein Theme kannst du der PSD-Datei im Bildvorlagen-Downloadpaket der entnehmen.

Mehr Informationen und nützliche Tipps zum Thema "Shop-Logo" findest du im Artikel:

Das Theme-Vorschaubild für Theme-Duplikate wird mit 225x120px dargestellt. Diese Größe sollte das Bild mindestens haben. Das Standard-Theme von Shopware nutzt ein Bild in der Größe 228x138px.

Größere Bilder werden mittig zentriert ausgerichtet und skaliert. Durch die CSS-Eigenschaft "cover" behält das Bild sein Seitenverhältnis bei und wird so skaliert, dass es so klein wie möglich dargestellt wird, aber den verfügbaren Bereich von 225x120px vollständig abdeckt.

Wir empfehlen dir die Proportion von 225x120 Pixeln zu nutzen. Durch die automatische Skalierung ist aber auch ein größeres Bild möglich (z.B. 250x133px, 300x160px, 380x202px oder 450x240px).

Nutze gerne unsere Pagespeed optimierte Logos für Versandanbieter. Über 40 Logos im ressourcenschonenden SVG-Format erhältst du im Downloadpaket der .

Nutze gerne unsere Pagespeed optimierte Logos für Zahlungsanbieter. Über 90 Logos im ressourcenschonenden SVG-Format erhältst du im Downloadpaket der .

CMS-Blöcke haben einem oder mehreren Slots. Die Slots (oftmals Spalten) werden mit jeweils einem CMS-Element befüllt.

CMS-Block hinzufügen

1. Klicke auf das Plus-Icon um einen CMS-Block auszuwählen

2. Wähle im Dropdown "Block-Kategorie" den gewünschten CMS-Block aus.

3. Ziehe den CMS-Block per Drag'n'Drop in deine Erlebniswelt.

Die CMS-Blöcke in Shopware 6 verfügen über verschiedene Konfigurationsfelder. Im Abschnitt "Layout" findest du beispielsweise die Möglichkeit "CSS-Klassen" zu ergänzen und das "Padding" (den Innenabstand) des Blocks zu definieren.

Du kannst jedem Block einen Namen geben und CSS-Klassen hinzufügen. Zudem kannst du die Innen-Abstände des Blocks festlegen sowie eine Hintergrundfarbe und ein Hintergrundbild zuweisen. Im Abschnitt "Sichtbarkeit" kannst du zudem festlegen auf welchem Gerät der Block angezeigt werden soll.

In den Block-Einstellungen hast du zudem die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren. ThemeWare® bietet dir eine Reihe von CSS-Klassen, die du in deinen Erlebniswelten nutzen kannst.

Für alle CMS-Blöcke sind folgende CSS-Klassen interessant:

Weitere Klassen findest du im folgenden Bereich "Anleitungen" > "Erlebniswelten":

Zudem kannst ebenfalls CSS-Klassen vom verwenden, da die Storefront in Shopware 6 auf Bootstrap 5 basiert.

Du kannst die CMS-Elemente in den meisten CMS-Blöcken austauschen. Mehr dazu erfährst du im Artikel .

Mehr Informationen zu ThemeWare® CMS-Blöcken findest du in der ThemeWare® Handbuch:

Mehr Informationen zum Thema "Erlebniswelten" in Shopware 6 findest du in der Shopware-Dokumentation:

An einigen Stellen in der Shopware Administration findest du einen "WYSIWYG"-Editor (steht für „What You See Is What You Get“). Dies ist eine spezielle Formen von Editoren, bei welchen die Ausgabe von Inhalten dem entspricht, was später im Web angezeigt wird.

In diesem Editor kannst du Text eingeben (1) und diesen rudimentär formatieren (2). Im Hintergrund wandelt der Editor deinen Formatierung in validen HTML-Code um.

Du findest "WYSIWYG"-Editoren in der Kategorie-, in der Produktverwaltung und vor allem beim Bearbeiten von CMS-Elementen im Erlebniswelt-Editor.

Reichen dir die bereitgestellten Formatierungsoptionen nicht aus oder möchtest du eigenen HTML-Code ergänzen kannst du in den HTML-Modus wechseln (3).

WYSIWYG-Modus

Der WYSIWYG-Modus ist recht selbsterklärend. Du kannst schnell den gewünschten Text eingeben und ähnlich wie z.B. in Word – ohne HTML-Kenntnisse – formatieren. Zudem kannst du mit wenigen Klicks Listen und Tabellen erstellen.

Shopware hat in Version 6.5 einen HTML Sanitizer implementiert der deinen Code automatisch bereinigt. Dadurch werden manche Formatierungen oder Tags unter Umständen automatisch gelöscht. Mehr Informationen dazu findest du im Artikel .

Potenziell gefährlicher Code wird bereinigt und automatisch aus dem Editor entfernt.

Dies Hinweis unter dem Editor weist dich darauf hin, dass der HTML Sanitizer in deinen HTML-Code eingreift.

Unserer Erfahrung nach ist der HTML-Modus etwas hakelig. Klickst du zu schnell auf den Button "Fertig", hat der HTML Sanitizer den Code unter Umständen noch nicht "bereinigt" und deine Änderung wird nicht gespeichert und verworfen.

Es heißt, dass ein Klick auf das Info-Icon den manuell Sanitizer triggert, zumindest verschafft dies Vorgehen dem Sanitizer etwas Zeit zu arbeiten.

Einige Deiner Eingaben wurden bereinigt. Bitte prüfe Deine Inhalte.

Dieser Hinweis erscheint, wenn der Sanitizer deinen Code "bereinigt" hat unter dem Editor. Prüfe ob deine Inhalte noch passen.

Bestätige deine Änderungen abschließen mit dem Button "Fertig".

In Shopware 6 stehen dir von Haus aus 2 Icon-Sets zur Verfügung. Das "default" und das "solid" Icon-Set. Diese kannst du in deinem Theme, in Template und in Erlebniswelten nutzen.

Eine dynamische Übersicht aller Icons findest du im ThemeWare® Service Portal:

Shopware 6 Icons einbinden

Um Shopware 6 Icons einzubinden, gibt es mehrere Möglichkeiten, je nachdem wo genau du das gewünschte Icon verwenden möchtest.

Icons in Template-Dateien einbinden

Um Icons in einer TWIG Template-Datei zu verwenden, kannst du das sw_icon-Tag nutzen. Die Einbindung erfolgt über den Tag: {% sw_icon 'icon-name' %}.

Suche dir einfach das passende Icon raus, kopiere den Namen und füge diesen als Argument (siehe 'icon-name') an.

Um Shopware 6 Icons in Erlebniswelten einzubinden, kannst du einen CMS-Block vom Typ "Text" oder einen HTML-Block nutzen. Gebe dort den HTML-<img>-Tag für das gewünschte Icon im Ordner /bundles/storefront/assets/icon/... ein.

Der der Pfad /bundles/storefront/assets/icon/default/[icon-name].svg funktioniert in aktuellen Shopware-Versionen leider nicht mehr, denn Shopware hat die Storefront-Icons aus dem öffentlich erreichbaren Bundle-Ordner herausgenommen.

Lade das gewünschte Icon am besten über die Medienverwaltung in deinen Shop hoch (1) und klicke auf "Link kopieren" (3). Du erhälst so den Link über welchen das Bild nun in der Storefront erreichbar ist. Füge diesen Link nun in dein CMS-Element ein.

Möchtest du ein Icons in deinen Grafiken oder als Bild über die Shopware 6 Medien-Verwaltung nutzen, kannst du die Icons als SVG-Datei runterladen. Die Icons findest du auf bzw. in folgendem Ordner:

Die unterschiedlichen Shop-Logos in der Theme-Konfiguration haben verschiedene Zwecke und Anforderungen. Daher benötigen die entsprechenden Grafiken teils unterschiedliche Größen um optimal dargestellt zu werden.

Logo @Desktop (≥1200px)

Ist der Viewport größer als 1200px wird das Desktop Logo angezeigt.

Logo @Tablet (≥768px)

Zwischen 1200px und 767px wird das Tablet Logo angezeigt.

Logo @Phone (<768px)

Ist der Viewport kleiner als 767px wird das Phone Logo angezeigt.

Logo (Sticky top navigation)

Kleines Logo für die ThemeWare® Sticky-Top-Navigation.

Logo (Shopping Experiences Header)

Alternatives Logo für die Verwendung im ThemeWare® Erlebniswelt-Header.

Das App- & Share-Icon wird beispielsweise als Vorschau angezeigt, wenn die Seite in sozialen Netzwerken geteilt wird.

Das Favicon wird im Browser vor der URL angezeigt.

Der Shopware 6 Medienmanager unterstützt derzeit folgende Dateiformate:

Bildformate: jpg, jpeg, png, webp, gif, svg, bmp, tiff, tif, eps

Videoformate: webm, mkv, flv, ogv, ogg, mov, mp4, avi, wmv

Audioformate: aac, mp3, wav, flac, oga, wma

Textformate: txt, doc

Sonstiges: pdf

Grundsätzlich sind auch die Bildformate gif und bmp bildschirmtauglich, für dein Shop-Logo empfehlen wir dir aber die folgenden Bildformate jpg, jpeg, png oder WebP.

Der Standard sind jpg bzw. jpeg Dateien. Wenn dein Logo Transparenzen nutzen soll, verwende das png Format. Diese drei genannten Bildformate sind Pixel-Grafiken, häufig auch Rastergrafiken genannt.

Bei Pixelgrafiken ist es – aus visueller Sicht – grundsätzlich sinnvoller dass die Grafik eher verkleinert als vergrößert dargestellt wird. Nutze daher lieber eine etwas größere Grafik als tatsächlich benötigt. Achte aber darauf, dass die Grafik nicht viel zu groß ist!

Zusätzlich kann es helfen, Pixelgrafiken mit einen kostenlosen Tool wie bezüglich Dateigröße zu optimieren.

Wie du vielleicht gemerkt hast, fehlt noch eins unserer empfohlenen Bildformate. Beim svg Format handelt es sich nicht um eine Pixelgrafik sondern um eine Vektorgrafik.

Vektorgrafiken werden aus Linien, Kreisen, Polygonen oder Kurven zusammengesetzt. Bei diesen Grafiken werden also nicht jeder einzelne Pixel eines Kreises gespeichert sondern vereinfacht gesagt die Lage des Kreismittelpunktes und der Kreisdurchmesser.

Dies hat verschiedene Vorteile: Zum einen ist die Bildgröße von Vektorgrafiken oftmals kleiner als die von Pixelgrafiken und zum anderen lassen sich diese ohne Qualitätsverlust beliebig skalieren.

Die Vorteile bezüglich verlustfreier Skalierung sind besonders im responsive Web-Designs relevant. Mit Vektorgrafiken kann man dafür sorgen, dass sein Logo auf allen Endgeräten mit den verschiedensten Größen und Auflösungen stets sauber und scharf dargestellt wird.

Die Dateigröße ist bezüglich PageSpeed nicht zu verachten. Nachfolgend möchten wir dir eine grobe Vorstellung am Beispiel des oben gezeigten -Logos geben.

Das M-Logo mit 300x300 Pixeln hat eine Dateigröße von ca. 16 KB als png Pixelgrafik. TinyPNG schafft ohne einen sichtbaren Qualitätsverlust, die selbe Grafik auf 7 KB zu komprimieren. Das sind eine satte Ersparnis von knapp 60%.

Die Vektorgrafik des M-Logos hat eine Dateigröße von 1 KB und ist hier eindeutig im Vorteil.

Bitte beachte, dass eine Vektorgrafik nicht unbedingt kleiner ausfallen muss als eine Pixelgrafik. Es gibt durchaus Grafiken (abhängig von der Komplexität und Kleinteiligkeit) wo eine Pixelgrafik einen Vorteil gegenüber der Vektorgrafik hat.

Das Beispiel zeigt aber sehr gut, wieviel Optimierungsraum Pixelgrafiken bieten können.

Es ist völlig in Ordnung Pixelgrafiken zu verwenden, nutze aber auf jeden Fall alle Optimierungs-Möglichkeiten aus.

Die Frage nach der optimalen Bildgröße lässt sich nicht pauschal beantworten.

ThemeWare® ist extrem anpassbar und dazu gehört auch eine Konfiguration für die Größe deines Logos. Zudem nutzen die Header ein fluides Design, dass heißt, wieviel Platz das Logo letztendlich einnehmen kann, hängt auch von Faktoren wie dem eigentlichen Header-Layout oder der Länge der Haupt-Navigation ab.

Ein weiterer wichtiger Faktor ist natürlich auch die konfigurierte Logo-Größe selber.

All diese Faktoren haben einen direkten Einfluss auf die Logo-Größe und daher lässt sich einfach keine "perfekte Bildgröße" vorhersagen.

Orientierst du dich an unseren Demoshops und arbeitest mit der Grundkonfiguration deines ThemeWare® Themes. Nutze einfach unsere PSD-Dateien aus unserem Bildvorlagen-Downloadpaket.

Andernfalls musst du die perfekte Bildgröße selber ermitteln.

Wir empfehlen das WebP-Dateiformat. WebP ist ein Grafikformat für mit einer verlustfreien Bildkompression für statische oder animierte Bilder.

Die verbesserte Komprimierung von WebP bedeutet, dass weniger Speicher benötigt wird und Seiten mit Bildern im WebP-Format schneller laden. Die Komprimierung ist übrigens besser als bei JPEG.

Das WebP-Format ist zudem das einzige Format, das die transparenten Hintergründe von PNG und die Animationsmöglichkeiten von GIF unterstützt.

• Einführung: Wie du Logos in deinen Shop einbinden kannst, erfährst du im Artikel

• Einführung: Wie du Logos in deinem Shop konfigurieren kannst, erfährst du im Artikel

• Tipps:

Im Medien-Manager von Shopware 6 findest du in der Regel verschiedene Standard-Ordner für unterschiedliche Medientypen. Sollte einer oder mehrere dieser Ordner fehlen, kannst du sie ganz einfach selbst erstellen.

Standardordner für CMS-Medien erstellen

1. Gehe zur Medienverwaltung im Admin unter Inhalte > Medien. (1) (2)

2. Klicke oben rechts auf "Neuen Ordner hinzufügen". (3)

3. Vergib einen passenden Namen für den Ordner (z. B. "CMS Media").

4. Wähle die Option "Einstellungen" im Kontext-Menü des neuen Ordners. (4) (5)

5. Wähle im Feld "Medien-Standardspeicherort für", für welchen Bereich der Ordner verwendet werden soll – z. B. "cms_page (Layout)". (6)

6. Speichere die Änderung. (7)

Der neue Ordner wird nun automatisch für den gewählten Bereich verwendet – z. B. beim Hochladen von Bildern in CMS-Elementen.

Der Anzeigemodus oft auch Darstellungsmodus für Bilder legt fest, wie ein Bild in der Größe angepasst werden soll, damit es in seinen Bild-Container passt.

contain

auch "Feste Höhe" oder "Beinhalten" genannt

Das Bild behält sein Seitenverhältnis, wird aber an die Höhe des Bild-Containers angepasst.

Dies führt dazu, dass es links und rechts bzw. oben und unten Lücken geben kann wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.

cover

auch "Zugeschnitten" oder "Füllen" genannt

Die Größe des Bildes wird so angepasst, dass das Seitenverhältnis beibehalten wird und der gesamte Bild-Container ausgefüllt wird. Jeglicher Überlauf wird zugeschnitten.

In diesem Modus wird der Bild-Container in jedem Viewport ausgefüllt. Dies führt dazu, dass das Bild links und rechts bzw. oben und unten "abgeschnitten" wird, wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.

Das Bild wird ohne Höhenbeschränkungen auf die Breite des Bild-Containers skaliert.

Dies führt dazu, dass es oben und unten Lücken geben kann wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.

Die Größe des Bildes wird nicht geändert.

Das Bild wird auf die kleinste Version von none oder contain verkleinert.

Dies führt dazu, dass es links und rechts bzw. oben und unten Lücken geben kann wenn das Seitenverhältnis vom Bild in einem Viewport nicht mit dem Seitenverhältnis des Bild-Containers übereinstimmt.

Miete

Monatlich

Gratis Probemonat

Dieses Theme startet mit einem kostenlosen Probemonat. Die Miete kann jederzeit monatlich gekündigt werden oder wird zu den angegebenen Preisen automatisch verlängert.

Updates und Support

Du erhältst bei einer aktiven Miete für diese Erweiterung kostenfreien Support direkt vom Hersteller. Zudem stehen dir alle Updates kostenfrei bereit.

Jährlich

Gratis Probemonat

Dieses Theme startet mit einem kostenlosen Probemonat. Die Miete kann jederzeit jährlich gekündigt werden oder wird zu den angegebenen Preisen automatisch verlängert.

Updates und Support

Du erhältst bei einer aktiven Miete für diese Erweiterung kostenfreien Support direkt vom Hersteller. Zudem stehen dir alle Updates kostenfrei bereit.

Kauf

FAQ

Mehrfachnutzung - Muss ich ThemeWare® für einen weiteren Verkaufskanal bzw. für eine weitere Domain nochmals kaufen?

Das kommt drauf an: Lizenzen beziehen sich auf deinen Shop, also deine Shopware-Installation. Nutzt du in diesem bzw. dieser mehrere Verkaufskanäle, brauchst du ThemeWare® nur einmal erwerben.

Domains oder Lizenzen könne auf einen anderen Account oder innerhalb eines Account übertragen werden. Für genau diese Szenarien kannst Du eine Lizenzübertragung in deinem Shopware Kundenaccount anstoßen. Mehr Informationen dazu findest du in der Shopware Dokumentation:

Bitte beachte den folgenden Artikel:

Mehr Informatinen zum Thema Lizenzen findest du im "Shopware Account"-Bereich der Wissensdatenbank bzw. in der .

Ein CMS-Element ist das eigenetliche Inhaltselement in einer Erlebniswelt, genauer gesagt in einem CMS-Block. Shopware bietet dir eine Auswahl an CMS-Elementen, darüber hinaus erhältst du mit der ThemeWare® Pro-Edition eine umfangreiche Sammlung verkaufsfördernder CMS-Elemente.

CMS-Element hinzufügen

Um ein CMS-Element platzieren zu können brauchst du einen geeigneten CMS-Block in deiner Erlebniswelt. Diesem CMS-Block kannst du dann ein CMS-Element zuweisen. Mehr dazu erfährst du im Abschnitt CMS-Block.

CMS-Element austauschen

1. Fahre mit der Maus über den CMS-Block

2. Klicke auf auf das "Austauschen"-Icon (1)

3. Es öffnet sich das Pop-up "Element auswählen"

4. Wähle hier das gewünschte CMS-Element aus (2)

1. Klicke auf den entsprechenden CMS-Block um den "Bearbeitungsmodus" zu aktivieren

2. Fahre mit der Maus über das gewünschte CMS-Element

3. Klicke auf das "Zahnrad"-Icon (1) um das CMS-Element zu konfigurieren

Die Einstellungen von CMS-Elementen variieren abhängig vom CMS-Element. Alle Informationen zu den CMS-Elementen von ThemeWare® findest du im .

Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.

Mehr Informationen zu ThemeWare® CMS-Elementen findest du in der ThemeWare® Handbuch:

Mehr Informationen zum Thema "Erlebniswelten" in Shopware 6 findest du in der Shopware-Dokumentation: