Shopware-Branding: So ändern Sie Ihr Logo ganz einfach

Autor: Provimedia GmbH

Veröffentlicht:

Aktualisiert:

Kategorie: Shopsysteme

Zusammenfassung: Für einen Logo-Wechsel in Shopware benötigen Sie passende Dateien, Rechte und den richtigen Verkaufskanal; testen Sie anschließend Darstellung, Format und responsive Ansicht.

Benötigte Informationen für die Logo-Änderung in Shopware

Bevor Sie das Logo in Shopware austauschen, benötigen Sie einige Angaben und Dateien. So vermeiden Sie falsche Darstellungen, unnötige Nacharbeit und ein Branding, das auf einzelnen Seiten aus dem Rahmen fällt.

Am zuverlässigsten ist eine Logo-Datei mit transparentem Hintergrund und ausreichend Rand. Schneidet die Grafik zu knapp ab, wirkt sie im Shop schnell gequetscht. Prüfen Sie außerdem die Lesbarkeit in kleiner Darstellung, denn ein Logo mit vielen feinen Details verliert auf Smartphones rasch an Wirkung.

Logo im Shopware-Adminbereich austauschen

Öffnen Sie im Shopware-Administrationsbereich die Verkaufskanal-Einstellungen und wählen Sie den Verkaufskanal aus, dessen Storefront Sie anpassen möchten. Wechseln Sie anschließend zum Bereich Theme oder Theme-Konfiguration. Die genaue Bezeichnung hängt von der eingesetzten Shopware-Version und dem aktiven Theme ab.

Im Abschnitt für das Branding finden Sie meist ein Feld wie Logo, Shop-Logo oder Logo der Storefront. Klicken Sie auf das Medienfeld und wählen Sie eine vorhandene Datei aus. Alternativ laden Sie die neue Grafik über die Medienverwaltung hoch. Achten Sie auf den korrekten Verkaufskanal, besonders wenn mehrere Shops oder Sprachen eingerichtet sind.

Bei einem individuell entwickelten Theme kann das Feld anders heißen oder vollständig fehlen. In diesem Fall wird das Logo häufig über eine Theme-Datei, eine Konfiguration oder ein eigenes Erlebniswelten-Element eingebunden. Ändern Sie solche Dateien nicht direkt im Produktivsystem, wenn Sie die technische Struktur nicht sicher kennen. Eine spätere Theme-Aktualisierung kann manuelle Anpassungen überschreiben.

Kontrollieren Sie nach dem Speichern, ob wirklich der richtige Verkaufskanal aktiv war. Das neue Logo kann etwa im deutschen Store erscheinen, während im internationalen Verkaufskanal weiterhin die alte Grafik angezeigt wird. Die Einstellung gilt nicht automatisch für jede Storefront.

Passende Bildgröße und Dateiformate für das neue Logo

Die passende Logogröße hängt vom verwendeten Theme ab. Als praxistauglicher Ausgangspunkt eignet sich eine Datei mit etwa 400 bis 800 Pixeln Breite. Für scharfe Darstellungen auf hochauflösenden Bildschirmen darf die Quelldatei größer sein. Entscheidend ist, dass das Theme die Grafik nicht stark strecken muss.

Für die Proportionen bewährt sich ein breites Format, zum Beispiel 3:1 oder 4:1. Ein sehr hohes Logo vergrößert den Kopfbereich und verschiebt wichtige Inhalte nach unten. Lassen Sie rund um das eigentliche Zeichen etwas Innenabstand, aber nicht so viel, dass die Marke im Shop winzig wirkt.

Ein SVG sollte sauber aufgebaut sein. Entfernen Sie unnötige Ebenen, eingebettete Bearbeitungsdaten und nicht verwendete Schriften. Bei PNG- oder WebP-Dateien genügt meist eine Auflösung von 72 bis 144 Pixel pro Zoll; für die Webanzeige zählt vor allem die tatsächliche Pixelgröße, nicht der eingetragene Druckwert.

Komprimieren Sie Rastergrafiken vor dem Upload. Ein Logo mit 50 bis 150 Kilobyte lädt deutlich schneller als eine unoptimierte Exportdatei mit mehreren Megabyte. Verzichten Sie außerdem auf animierte Dateien. Sie wirken im Kopfbereich meist unruhig und können die visuelle Hierarchie des Shops stören.

Testen Sie die Grafik vor dem Einsatz auf hellem und dunklem Hintergrund sowie in einer kleinen Darstellung von etwa 120 Pixeln Breite. Wenn Buchstaben dann verschwimmen, braucht das Logo eine vereinfachte Variante oder eine größere Mindestbreite.

Logo für Desktop, Tablet und Smartphone festlegen

In Shopware 6 wird das Logo meist über die Theme-Konfiguration des jeweiligen Verkaufskanals gesteuert. Separate Dateien für Desktop, Tablet und Smartphone sind nicht zwingend nötig. Das aktive Theme passt die Darstellung normalerweise an die verfügbare Breite an.

Benötigt die mobile Ansicht eine kompaktere Variante, prüfen Sie zuerst, ob Ihr Theme ein eigenes Feld für ein mobiles Logo anbietet. Hinterlegen Sie dort eine reduzierte Wortmarke oder ein Symbol. Diese Version sollte auch bei schmalen Bildschirmen klar erkennbar bleiben und nicht mit dem Menü, der Suche oder dem Warenkorb kollidieren.

Bei einem eigenen Theme lässt sich die Umschaltung über responsive CSS-Regeln oder unterschiedliche Bildquellen lösen. Eine typische Grenze liegt bei etwa 768 Pixeln, doch feste Werte sind nicht immer sinnvoll. Maßgeblich ist der Punkt, an dem Logo, Navigation und Suchfunktion nicht mehr nebeneinander passen.

Kontrollieren Sie zusätzlich die Ausrichtung und den anklickbaren Bereich. Das Logo sollte auf jedem Gerät zuverlässig zur Startseite führen. Verkleinert sich nur das Bild, bleibt aber ein unnötig großer Container bestehen, entstehen auf dem Smartphone leere Flächen oder verschobene Bedienelemente.

Logo in der Storefront korrekt anzeigen

Nach der Einrichtung sollte das Logo direkt in der Storefront geprüft werden. Öffnen Sie die Startseite, eine Kategorieseite und eine Produktseite. So erkennen Sie, ob das Bild im Kopfbereich überall geladen wird oder nur auf einzelnen Layouts erscheint.

Untersuchen Sie die Darstellung mit den Browser-Werkzeugen. Die Grafik sollte eine sinnvolle alternative Beschreibung besitzen, falls sie als informatives Bild eingebunden ist. Bei einem verlinkten Markenlogo reicht meist eine knappe Beschreibung wie „Zur Startseite“ oder der Firmenname. Rein dekorative Varianten benötigen dagegen keine ausufernde Bildbeschreibung.

Prüfen Sie außerdem die technische Einbindung:

Besonders wichtig ist die Kontrastprüfung. Das Logo muss sich klar vom Hintergrund abheben, darf aber nicht durch einen sichtbaren Rahmen künstlich hervorgehoben werden. Bei farbigen Kopfzeilen kann eine Variante mit heller Fläche oder höherem Kontrast nötig sein.

Testen Sie auch den Fall, dass die Grafik nicht geladen werden kann. Ein verständlicher Alternativtext verhindert dann eine völlig leere Markenfläche. Öffnen Sie die Startseite nach Änderungen zusätzlich in einem privaten Browserfenster, damit eine alte Sitzung nicht fälschlich als aktuelles Ergebnis erscheint.

Für die Qualitätssicherung genügt kein einzelner Blick auf die Startseite. Prüfen Sie mindestens einen Sprachwechsel, einen Verkaufskanal mit abweichendem Layout und eine langsame Netzwerkverbindung. So zeigt sich, ob das Branding tatsächlich stabil eingebunden ist.

Änderungen speichern und im Shopware-Cache prüfen

Nach der Logo-Auswahl speichern Sie die Theme-Konfiguration und leeren anschließend den Shopware-Cache. Öffnen Sie dafür im Administrationsbereich den Bereich Einstellungen > System > Cache & Indizes. Wählen Sie den relevanten Cache aus und starten Sie die Bereinigung.

Bei einer produktiven Installation kann Shopware die Storefront-Dateien zusätzlich kompilieren. Prüfen Sie deshalb, ob ein erneutes Kompilieren des Themes angeboten wird, und führen Sie diesen Schritt nach der Cache-Bereinigung aus. Sonst kann die alte Logo-Zuordnung noch aus den kompilierten Theme-Daten kommen.

Wenn die alte Grafik trotz Bereinigung erscheint, prüfen Sie zuerst, ob ein Reverse-Proxy, ein CDN oder ein Server-Cache vor der Shopware-Installation liegt. Solche Zwischenspeicher können HTML, CSS oder Bildadressen unabhängig von Shopware ausliefern.

In einer Umgebung mit mehreren Instanzen muss die Änderung auf allen Servern verfügbar sein. Verwenden die Instanzen getrennte Dateisysteme, kann eine neue Mediendatei nur auf einem Knoten liegen. Ein gemeinsamer Speicher oder ein sauberer Deployment-Prozess verhindert dieses schwer sichtbare Fehlerbild.

Führen Sie die Cache-Bereinigung möglichst außerhalb starker Verkaufszeiten durch. Während der erneuten Kompilierung kann die Storefront kurzzeitig langsamer reagieren. Bei einem Shop im Wartungsmodus lässt sich der Vorgang ruhiger kontrollieren.

Typische Fehler beim Shopware-Branding vermeiden

Beim Shopware-Branding entstehen Fehler oft nicht beim Hochladen selbst, sondern durch die Einbindung in das aktive Theme. Prüfen Sie deshalb zuerst, ob das Logo aus dem Theme, aus einer Erlebniswelt oder aus einer individuellen Template-Datei stammt. Werden mehrere Quellen genutzt, kann eine Änderung an der falschen Stelle wirkungslos bleiben.

Ein weiterer Stolperstein ist die Verwechslung von Logo und Favicon. Das Favicon erscheint im Browser-Tab und benötigt eine eigene, meist quadratische Grafik. Wird dort versehentlich die breite Markendatei verwendet, wirkt sie stark verkleinert oder abgeschnitten.

Auch strukturierte Daten und Social-Media-Vorschaubilder können ein altes Logo enthalten. Prüfen Sie bei individuell gepflegten SEO- oder Sharing-Vorlagen, ob dort eine separate Bildadresse hinterlegt ist. Das betrifft nicht die Storefront selbst, kann aber den Eindruck eines uneinheitlichen Brandings erzeugen.

Vermeiden Sie außerdem Logo-Varianten, die sich nur durch minimale Farbunterschiede unterscheiden. Solche Dateien werden im Team leicht verwechselt. Eine klare Benennung wie logo-hell.svg, logo-dunkel.svg oder logo-kompakt.svg schafft Ordnung und macht spätere Pflege deutlich einfacher.

Logo in E-Mails und Dokumenten anpassen

Für E-Mails und Dokumente wird das Logo in Shopware meist getrennt von der Storefront verwaltet. Öffnen Sie im Administrationsbereich die Einstellungen für Shopseiten oder E-Mail-Vorlagen. Je nach Shopware-Version und Erweiterung finden Sie dort eigene Felder für das Bild im Kopfbereich.

Prüfen Sie besonders die Vorlagen für Bestellbestätigungen, Versandmeldungen, Rechnungen und Gutschriften. Eine Änderung an der Storefront übernimmt sich nicht automatisch in diese Nachrichten. Bei Dokumenten kann das Logo zusätzlich über die Dokumenten-Konfiguration oder ein PDF-Layout hinterlegt sein.

Für E-Mails sollte die Grafik über eine öffentlich erreichbare, verschlüsselte Bildadresse geladen werden. Eingebettete lokale Pfade funktionieren beim Empfänger nicht. Nutzen Sie außerdem eine moderate Breite, damit das Logo auf kleinen Mailfenstern nicht die gesamte Zeile sprengt. Rund 250 bis 400 Pixel sind für viele Vorlagen ein brauchbarer Startwert.

Bei PDF-Dokumenten zählt zusätzlich der Druckbereich. Sitzt das Logo zu nah am oberen Rand, kann es bei bestimmten Druckern abgeschnitten werden. Legen Sie im Dokumentenlayout einen ausreichenden Abstand fest und prüfen Sie das erzeugte PDF bei 100 Prozent Ansicht.

Kontrollieren Sie abschließend die Sprachversionen. Shopware kann je nach Sprache unterschiedliche E-Mail-Vorlagen verwenden. Ein Logo, das in der deutschen Vorlage angepasst wurde, erscheint deshalb nicht automatisch in einer englischen oder französischen Variante.

Beispiel: Neues Logo für einen Shop einrichten

Ein Beispiel zeigt den Ablauf besonders klar: Ein Händler nutzt ein eigenes Shopware-Theme und möchte das bisherige Firmenlogo durch eine neue Wort-Bild-Marke ersetzen. Die Anpassung soll nur im Verkaufskanal „Online-Shop“ erscheinen. Ein B2B-Kanal mit eigener Gestaltung bleibt unverändert.

Zuerst legt der Händler die neue Datei in der Medienverwaltung ab. Danach öffnet er die Theme-Konfiguration des öffentlichen Verkaufskanals und ordnet die Grafik dem Logo-Feld zu. Das Theme enthält zusätzlich ein eigenes Feld für die mobile Kurzversion. Dort hinterlegt er eine vereinfachte Bildmarke, damit die Navigation auf kleinen Displays ausreichend Platz behält.

Vor der Veröffentlichung prüft der Händler vier konkrete Ansichten:

Im Test fällt auf, dass die neue Wortmarke im Warenkorb zu weit nach rechts ragt. Ursache ist nicht die Grafik, sondern eine feste Breite im individuellen Header-Template. Der Händler passt diese Vorgabe im eigenen Theme an, statt die Originaldatei weiter zu verkleinern. Dadurch bleibt die Schrift lesbar und der Warenkorb-Button erreichbar.

Danach kontrolliert er die Darstellung für Gastbesucher und eingeloggte Kunden. Beide Gruppen sehen dasselbe Logo, obwohl sie unterschiedliche Header-Zustände erhalten. Anschließend wird die Änderung in einer Kopie der Produktivumgebung mit verschiedenen Browsern geprüft. Erst wenn keine Überlappung, kein falscher Verkaufskanal und keine abgeschnittene Wortmarke mehr auftritt, wird die Anpassung veröffentlicht.

Das Beispiel zeigt: Ein Logo-Wechsel ist erst abgeschlossen, wenn die Grafik im konkreten Theme, in den relevanten Benutzerzuständen und an den wichtigsten Kaufpunkten sauber funktioniert. Eine einzelne Ansicht reicht dafür nicht aus.

Fazit: Logo testen und Branding einheitlich umsetzen

Ein gelungenes Shopware-Branding endet nicht beim sichtbaren Logo. Entscheidend ist ein einheitlicher Markenauftritt über alle Kontaktpunkte hinweg. Vergleichen Sie Storefront, E-Mails, PDF-Dokumente, Kundenkonto und Checkout anhand derselben Markenregeln.

Erstellen Sie dafür eine kurze interne Prüfliste. Sie sollte mindestens Logo-Variante, Abstand, Hintergrund, Verlinkung, Schreibweise des Firmennamens und Darstellungsqualität enthalten. So beurteilen mehrere Personen das Ergebnis nach denselben Kriterien und nicht nach Gefühl.

Dokumentieren Sie abschließend den Speicherort der finalen Dateien, die zuständige Person und das Änderungsdatum. Das erleichtert spätere Anpassungen und verhindert, dass alte Varianten erneut verwendet werden. Bei einer späteren Überarbeitung lässt sich so schnell feststellen, welche Version aktuell ist.

Ein sauber getestetes Logo stärkt die Orientierung im Shop und wirkt professionell, ohne den Kaufprozess zu stören. Damit ist das Shopware-Branding nicht nur optisch angepasst, sondern dauerhaft nachvollziehbar gepflegt.