Logo ändern

Ein gutes Logo macht den Shop sofort wiedererkennbar, kann aber auch Header, Menue und mobile Ansicht aus dem Gleichgewicht bringen. Diese Anleitung zeigt, wie das Logo vorbereitet, hochgeladen und nach dem Wechsel sinnvoll geprueft wird.

Ziel

Das Logo soll im Kopfbereich klar erkennbar sein, zur Farbwelt passen und auf Desktop sowie Smartphone sauber wirken. Der Upload ist technisch schnell erledigt, die Vorbereitung der Datei entscheidet aber ueber das Ergebnis.

• Logo-Datei in passender Groesse und guter Qualitaet vorbereiten.
• Logo dem aktiven Theme zuordnen.
• Header, Menue, Startseite und mobile Ansicht nach dem Wechsel pruefen.
• Weitere Themebilder wie Hintergrundbild oder kleine Symbolbilder getrennt bewerten.

Wann diese Anleitung passt

• Ein neuer Shop wird eingerichtet und braucht ein erstes Markenlogo.
• Nach einem Relaunch soll das Logo im aktiven Theme ersetzt werden.
• Das Logo passt nicht mehr zum Farb-Schema oder zum Header-Menue.
• Ein bestehendes Logo wirkt unscharf, zu gross oder auf mobilen Geraeten unruhig.

Was im Hintergrund passiert

Beim Logo-Upload wird die Bilddatei im aktiven Theme abgelegt. Danach wird der Themeparameter fuer das Header-Bild auf diese Datei gesetzt. Der gleiche Mechanismus wird auch fuer andere Themebilder genutzt, wenn ein Bildparameter ersetzt wird.

Datei vorbereiten

• Format: PNG ist meist gut fuer Logos mit Transparenz. JPG passt nur, wenn ein fester Hintergrund gewollt ist.
• Groesse: Der Einrichtungs-Assistent nennt etwa 300 x 100 Pixel als Orientierung fuer eine ruhige Headerdarstellung.
• Rand: Wenig Leerraum in der Datei halten, sonst wirkt das Logo kleiner als erwartet.
• Kontrast: Logo gegen Headerfarbe testen. Helle Logos brauchen oft dunkleren Hintergrund, dunkle Logos eher helle Flaechen.
• Lesbarkeit: Sehr feine Schrift oder Claim-Zeilen verschwinden schnell auf kleinen Bildschirmen.

Ablauf

1. Aktives Theme pruefen, bevor die Datei hochgeladen wird.
2. Logo-Datei im Einrichtungs-Assistenten oder im Bild-Manager der Themeverwaltung hochladen.
3. Bei Nutzung des Bild-Managers das hochgeladene Bild als Header-Bild auswaehlen.
4. Aenderung speichern und das Frontend neu laden.
5. Header, Header-Menue, Startseite, Produktliste und Warenkorb mit dem neuen Logo pruefen.
6. Mobile Ansicht kontrollieren und bei Bedarf kleinere oder breitere Logodatei vorbereiten.

Entscheidungshilfe

• Logo mit Text: Gut fuer Markenaufbau, braucht aber genug Breite im Header.
• Bildmarke oder Signet: Gut fuer mobile Ansichten und kompakte Header.
• Logo mit Claim: Nur nutzen, wenn der Claim auch klein lesbar bleibt.
• Transparenter Hintergrund: Flexibel bei wechselnden Headerfarben, aber nur sinnvoll bei gutem Kontrast.
• Fester Hintergrund: Praktisch, wenn das Logo immer auf einer definierten Flaeche erscheinen soll.

Nach dem Wechsel pruefen

• Wirkt das Logo scharf und proportional.
• Bleibt genug Platz fuer Header-Menue, Suche, Warenkorb und weitere Kopfbereichselemente.
• Passt das Logo zum gewaehlten Farb-Schema.
• Ist das Logo auf Smartphone und Tablet gut erkennbar.
• Bleiben Startseite und Produktseiten optisch ruhig.
• Sind kleine Symbolbilder, Hintergrundbilder und Logo klar voneinander getrennt bewertet.

Stolperfallen

• Ein zu grosses Logo schiebt Navigation und Headerbereiche auseinander.
• Ein Logo mit viel Leerraum wirkt klein, obwohl die Datei gross ist.
• Ein Logo mit zu wenig Kontrast verschwindet auf farbigen Headern.
• Ein Logo-Wechsel loest keine Layoutprobleme. Wenn der Header grundsaetzlich zu voll ist, muss auch das Header-Menue geprueft werden.
• Bei mehreren Shopansichten nicht nur eine Ansicht kontrollieren.

Verwandte Bereiche

• Farb-Schema auswaehlen: Wichtig, wenn Logo und Farbbasis zusammen abgestimmt werden sollen.
• Hintergrund Bild aendern: Getrennt behandeln, damit Logo und Hintergrund nicht gegeneinander arbeiten.
• Seitenbreite festlegen: Beeinflusst den Raum, den Header und Logo einnehmen.
• Header-Menue sinnvoll aufbauen: Hilft, wenn Logo und Navigation gemeinsam zu viel Platz brauchen.
• Mobile Ansicht pruefen: Wichtig nach jedem Logo- oder Headerwechsel.