Erfolgreich
Logo
Fügen Sie flexibles Header-Branding mit separater Logo-Größe, Platzierung und Sichtbarkeitssteuerung hinzu.
Verwenden Sie diesen Block, um Ihr Markenlogo im Header anzuzeigen und zu steuern, wie es in Desktop- und Mobil-Layouts erscheint. Wenn Sie kein Bild hinzufügen, zeigt der Block stattdessen Ihren Store-Name an, was für textbasiertes Branding oder als vorübergehende Fallback-Lösung nützlich sein kann. Siehe die Company XYZ-Dokumentation zum Block Logo.
Grundeinstellungen
Abschnitt betitelt „Grundeinstellungen“Fügen Sie Ihr Logo-Bild hinzu und passen Sie dann die maximale Breite für Desktop und Mobilgeräte separat an. So bleibt Ihr Logo auf kleineren Bildschirmen gut lesbar, ohne den Header auf größeren Bildschirmen zu dominieren. Für weiteren Kontext zum Theme-Editor siehe Shopify-Dokumentation zu Abschnitten und Blöcken
Wenn die Breite auf 0 gesetzt wird, kann sich das Logo über den gesamten verfügbaren Platz erstrecken. Das funktioniert am besten, wenn das Logo in einer eigenen Zeile steht oder in der Nähe nur sehr wenig konkurrierender Inhalt vorhanden ist.
Wenn Ihr Logo kleine Texte oder feine Details enthält, prüfen Sie die Größen für Desktop und Mobilgeräte sorgfältig. Eine ausgewogene Desktop-Größe kann auf kleineren Bildschirmen dennoch schwer lesbar werden.
Layouteinstellungen
Abschnitt betitelt „Layouteinstellungen“Verwenden Sie diese Einstellungen, um festzulegen, wo das Logo im Header auf Desktop und Mobilgeräten sitzt. Links, zentriert und rechts platzieren den Block in der Haupt-Header-Zeile, während volle Breite ihn in eine eigene Zeile darunter verschiebt. Siehe die Company XYZ-Dokumentation zu Navigation-Layout-Einstellungen.
Wenn das Logo sich eine Zeile mit anderen Header-Elementen teilt, beeinflusst seine Position, wie der Header auf den ersten Blick wirkt. Eine zentrierte Platzierung gibt dem Logo mehr Gewicht, während links oder rechts platzierte Logos in auf Nutzen ausgerichteten Layouts meist besser funktionieren.
Sie können den Block auf Desktop auch den verbleibenden Platz in der Zeile ausfüllen lassen. Das ist vor allem dann nützlich, wenn das Logo den gesamten Header eher verankern oder ausbalancieren soll, statt wie ein kompaktes Element zu wirken.
Standard-Block-Einstellungen
Abschnitt betitelt „Standard-Block-Einstellungen“Sichtbarkeitseinstellungen
Abschnitt betitelt „Sichtbarkeitseinstellungen“Verwenden Sie Sichtbarkeitssteuerungen, um diesen Block je nach Gerät ein- oder auszublenden. Das ist besonders nützlich, wenn Sie auf Desktop eine andere Logo-Darstellung und auf Mobilgeräten eine andere Header-Anordnung möchten. Siehe die Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen.
Wenn Sie den Block auf einem Gerät ausblenden, stellen Sie sicher, dass dort ein anderes sichtbares Branding-Element bleibt, damit der Header weiterhin vollständig und wiedererkennbar wirkt.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Beginnen Sie mit einer klaren Logo-Datei. Verwenden Sie ein Bild, das auch bei den Größen scharf bleibt, die Sie im Header verwenden möchten.
- Größe je nach Gerät separat anpassen. Passen Sie die Breiten für Desktop und Mobilgeräte unabhängig an, damit das Logo lesbar bleibt, ohne den begrenzten Platz zu beanspruchen.
- Passen Sie die Platzierung an das Layout an. Verwenden Sie volle Breite für eine zeilenprägende Logo-Darstellung oder links, zentriert oder rechts, wenn das Logo sich den Platz mit anderen Header-Elementen teilen soll.
- Strecken gezielt einsetzen. Füllen Sie verfügbaren Platz nur dann, wenn zusätzliche Breite die Ausgewogenheit des Headers verbessert, statt den Logo-Bereich zu groß wirken zu lassen.
- Beide Ansichtsbereiche prüfen. Desktop- und Mobilsteuerungen können unterschiedliche Ergebnisse bei Ausrichtung, Sichtbarkeit oder Layout erzeugen. Prüfen Sie daher immer beide Größen vor der Veröffentlichung.
- Medien bewusst auswählen. Separate Desktop- und Mobilbilder können Zuschnitt, Ladeverhalten, Fallback-Verhalten und Lesbarkeit verändern, besonders wenn die beiden Versionen nicht eng aufeinander abgestimmt sind.
- Fallback-Design einfach halten. Leere, transparente oder Standardwerte übernehmen mit größerer Wahrscheinlichkeit das vorhandene Erscheinungsbild, während explizite Farben, Verläufe oder Medienüberschreibungen den Logo-Bereich eigenständiger wirken lassen.