Comment on page
Logo einbinden
In diesem Artikel zeigen wir dir, wie du dein Logo in deinen Online-Shop einbinden kannst, was du dabei beachten solltest und welche Optimierungsmöglichkeiten du dabei hast.
Wir gehen in diesem Artikel davon aus, dass du bereits ein Logo für deinen Shop hast oder einfach unsere PSD-Vorlage nutzt.
Neben den Hauptfarben und der Schrift ist das Logo eins der Shop-Elemente welches essentiell für dein Branding bzw. Corporate-Design ist.
Über die ThemeWare Utilities erhältst du für dein Theme eine passende Logo-Vorlage im PSD-Format die du nutzen kannst.
Das Shop-Logo bindest du am einfachsten direkt über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration ein.
Beispiel: In unserem Beispiel binden wir das ThemeWare® Logo in unseren Shop ein.
- 1.Öffne die Administration deines Shops
- 2.Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
- Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
- 3.Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
- 4.Wechsel in den Tab "Layout" (3)
- 5.Öffne den Bereich "Bilder" (4)
- 6.Klicke auf denButton (5) um das aktuelle "Logo @Desktop" zu entfernen
- 7.Logo hochladen oder öffnen
- Über den Button "Dateien hochladen" (6) kannst du nun dein Logo hochladen und einbinden
- Über den Button "Medien öffnen" (7) kannst du ein bereits hochgeladenes Bild auswählen und per Drag-and-Drop (8) in das Media-Feld ziehen
- 8.Wiederhole die Schritte 6 und 7 für alle Logos die du austauschen möchtest
- 9.Speicher die Theme-Konfiguration
- 10.Wechsel in die Storefront und lade die Seite einmal neu
Du hast nun das Shop-Logo erfolgreich ausgetauscht.
Bild-Konfiguration in ThemeWare®
Dateien hochladen
Medien öffnen
Beispiel
Tipp: Wenn du eine SVG-Version von deinem Logo nutzt, kannst du die selbe Grafik einfach für alle Viewports nutzen – sofern das Logo inhaltlich stets identisch sein soll.
Die verschiedenen Shop-Logos haben verschiedene Zwecke und Anforderungen. Daher benötigen die entsprechenden Grafiken teils unterschiedliche Größen um optimal dargestellt zu werden.
Ist der Viewport größer als 1200px wird das Desktop Logo angezeigt.
Zwischen 1200px und 767px wird das Tablet Logo angezeigt.
Ist der Viewport kleiner als 767px wird das Phone Logo angezeigt.
Kleines Logo für die ThemeWare® Sticky-Top-Navigation.
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.
Tipp: Orientiert dich einfach an unseren PSD-Dateien in unserem Bildvorlagen-Downloadpaket welches du über die ThemeWare® Utilities erhältst.
Der Shopware 6 Medienmanager unterstützt derzeit folgende Dateiformate:
Bildformate: jpg, jpeg, png, webp, gif, svg, bmp, tiff, tif, epsVideoformate: webm, mkv, flv, ogv, ogg, mov, mp4, avi, wmvAudioformate: aac, mp3, wav, flac, oga, wmaTextformate: txt, docSonstiges: 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 svg.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.
Vektorgrafiken lassen sich ohne Qualitätsverlust beliebig skalieren (oben Pixelgrafik, unten Vektorgrafik)
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.
Tipp: Eine Agentur oder eine Grafiker bzw. Designer kann dir sicherlich aus deiner Pixelgrafik eine passende SVG-Vektorgrafik aus deinem Logo erstellen.
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 reduzieren. 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.
ThemeWare® Video-Tutorial | ThemeWare® Service Portal
ThemeWare® Video-Tutorial
Last modified 2mo ago