Shopware 6.5 mit Bootstrap 5:

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 "Tab "Eigenschaften"" => Feld "Eigenschaften-Tabelle als separaten Tab anzeigen"

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

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

Header

Footer

Allgemein

Badges

Breadcrumb

Cookie-Hinweis

Artikelseite

Bildgalerie

Buy-Box

Eigenschaften Tab

Listing

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 Bootstrap 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 CMS-Element.

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:

CMS-Block hinzufügen

Block-Einstellungen

Einstellungen

CSS-Klassen

CMS-Element austauschen

Weiterführende Informationen

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.

contain

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

cover

auch "Zugeschnitten" oder "Füllen" genannt

stretch

auch "Skaliert" oder "Strecken" genannt

none

auch "Original" oder "Standard" genannt

scale-down

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

4. Es öffnet sich das Pop-up "Element-Einstellungen" (2)

5. Speichere deine Änderungen

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

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:

CMS-Element hinzufügen

CMS-Element austauschen

CMS-Element konfigurieren

Einstellungen

Mehrsprachigkeit

Weiterführende Informationen

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 HTML Sanitizer.

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".

WYSIWYG-Modus

HTML-Modus

Weiterführende Informationen

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 GitHub bzw. in folgendem Ordner:

Shopware 6 Icons einbinden

Icons in Template-Dateien einbinden

Beispiel:

Icons in CMS-Blöcke einbinden

Beispiel:

Aktuelle Shopware-Versionen:

Beispiel:

Shopware 6 Icons downloaden

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.

• Texte bearbeiten und übersetzen

• ThemeWare® Handbuch > Textbausteine

• Shopware-Dokumentation: Textbausteine

Bearbeiten von Textbausteinen

Textbausteine von ThemeWare®

Textbausteine für einen anderen Verkaufskanal

Ein individuelles Textbaustein-Set anlegen

Textbaustein-Set einer Domain zuweisen

Weiterführende Informationen

Öffne das Service Portal im Browser deiner Wahl

1. Öffne den Shopware Store 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:

   • Im Bereich "Details" in der Buybox

   • Im Changelog im Tab "Änderungen"

ThemeWare® Version im Service Portal

ThemeWare® Version im Shopware Store

Screenshots

Ergänzende Hinwiese

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

Layout-Einstellungen

Einstellungen

Weiterführende Informationen

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:

Ordner

Thumbnails

Metadaten

Bildgröße

Versandarten in ThemeWare®

Zahlungsarten in ThemeWare®

Wie kann ich meine Lizenzen übertragen?

Wie lösche ich Lizenzen richtig?

Weiterführende Informationen

Anleitung: Theme-Variablen in der Konfiguration verwenden

Farbwähler

Sonderfall: Der Farbwert "transparent"

Für erfahrene Anwender

Grundkonfiguration

Fehlerhafte Eingaben

Valide Werte

Invalide Werte

Tipp: Farbkontrast und Barrierefreiheit

Farb-Empfehlungen

Schwarzer Text

Weißer Text

Weiterführende Informationen

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.

   • Falls du eine Zwischengröße bevorzugst, kannst du die Thumbnail-Einstellungen anpassen und z. B. 1200x1200px als zusätzliche Größe hinzufügen.

2. Performance berücksichtigen

   • Produktbilder sollten weder zu klein noch unnötig groß sein. Wähle eine Größe, die eine gute Balance zwischen Bildqualität und Ladezeit bietet.

   • Produktbilder sollten gut komprimiert sein, um die Dateigröße möglichst gering zu halten.

3. Empfohlene Bildoptimierung

   • Thumbnails anpassen: Passe die Thumbnail-Größen in der Medienverwaltung an dein Shop-Design an und entferne ggf. unnötige Formate. So verhinderst du überflüssige Daten und stellst sicher, dass Bilder in der optimalen Größe und Qualität geladen werden.

   • Bilder gut komprimieren: Unkomprimierte Bilder können die Ladezeit des Shops erheblich verlangsamen. Nutze Tools wie TinyPNG, um die Dateigröße zu reduzieren, ohne sichtbaren Qualitätsverlust.

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 ThemeWare® Utilities 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 ThemeWare® Utilities.

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

Tipp: ThemeWare® PSD-Dateien nutzen

Allgemein

Hersteller-Logo

Kategoriebilder

Produktbilder

Bildgröße

Original (bzw. "Standard") oder "Feste Höhe" (bzw. "Beinhalten") [contain]

Zugeschnitten (bzw. Füllen) [cover]

Shop-Logo

Theme-Vorschaubild

Versandarten-Logos

Zahlungsarten-Logos

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 Shopware Community-Store ü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: Wie kann es zu Inkompatibilitäten kommen?

Minor-Releases & Patch-Releases

Major-Releases

Kompatibilität prüfen

Weiterführende Informationen

Weiterfürhrende Informationen

• Zusatzfelder werden gelöscht.

• Individuelle Inhalte/Daten bleiben erhalten.

• Die Konfiguration wird gelöscht.

• Die Theme-Bilder werden gelöscht.

Textbausteine werden beim Installieren/Aktivieren hinzugefügt.

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

• Alle Textbausteine bleiben aber erhalten.

Benutzerdaten

Plugin-Daten

Textbausteine

Zusatzfelder

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

Theme-Daten

Theme

Theme-Duplikate

Theme-Konfiguration

Theme Media (Bilder)

Installieren/Aktivieren

Deaktivieren

Deinstallieren

Alle App-Daten endgültig entfernen

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 TinyPNG 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 Logo einbinden

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

• Tipps: Tipps zur Logo-Gestaltung

• Tool:

Logo @Desktop (≥1200px)

Logo @Tablet (≥768px)

Logo @Phone (<768px)

Logo (Sticky top navigation)

Logo (Shopping Experiences Header)

App & share icon

Favicon

Dateiformat

Pixel-Grafiken

Vektor-Grafiken (*.svg)

Dateigröße und PageSpeed

Die optimale Bildgröße

Unsere Empfehlung: WebP

Weiterführende Informationen

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 CMS-Layout) besteht aus einer oder mehreren Sektionen (1, siehe CMS-Sektion) in die einzelne Blöcke (2, siehe CMS-Block) hinzugefügt werden, die wiederum aus einem oder mehreren Elementen (3, siehe CMS-Element) 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:

Grundlagen

Erlebniswelt-Verwaltung

CMS-Editor (Erlebniswelt-Editor)

CMS-Layout (Erlebniswelt-Layout)

CMS-Sektion

CMS-Block

CMS-Element

CMS-Element Konfiguration

CMS-Erweiterungen

Tipp: Hintergrundfarbe/Hintergrundbild

Mehrsprachigkeit

Weiterführende Informationen

Sektion-Einstellungen

Einstellungen

Sektion im Editor und der Storefront

Weiterführende Informationen

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 fonts.google.com nachsehen – oder du nutzt das Tool google-webfonts-helper.

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 Schriften konfigurieren

• Feldtypen in der Theme-Konfiguration

• Anleitung: Fonts lokal einbinden

• Anleitung:

Schriftart bzw. Webfont

Standard-Schriften

ThemeWare® Standard-Schriften

Shopware 6 Standard-Schriften

Websichere Schriften

Fallback-Schriften

Konfigurationsmöglichkeiten

Strichstärke

Screenshots

Eigene Fonts oder Webfonts (z.B. Google Fonts) nutzen

Weiterführende Informationen