Ankündigungsleiste

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zum Button-Block
3. Company XYZ-Dokumentation zum Icon-with-text-Block
4. Company XYZ-Dokumentation zum Localization-selectors-Block
5. Company XYZ-Dokumentation zum Main-menu-Block
6. Company XYZ-Dokumentation zum Social-media-icons-Block
7. Company XYZ-Dokumentation zu den Einstellungen für den Abschnittshintergrund
8. Company XYZ-Dokumentation zu den Einstellungen für den Abschnitts-Innenabstand
9. Company XYZ-Dokumentation zu den Trennlinien-Einstellungen
10. Company XYZ-Dokumentation zu den Sichtbarkeitseinstellungen
11. Company XYZ-Dokumentation zu den Einstellungen für Layout-Breiten

Hilfreiche Videos

Shopify Academy-Video: So bearbeiten Sie eine Ankündigungsleiste im Shopify Online Store 2.0 || Shopify Help Center

Shopify Academy-Video: So bearbeiten Sie eine Ankündigungsleiste im Shopify Online Store 2.0 || Shopify Help Center

Verwenden Sie die Ankündigungsleiste, um oberhalb des Haupt-Headers einen kompakten Bereich für Meldungen und Hilfsnavigation zu platzieren. Sie kann eine einfache Ankündigung mit Link und Menü anzeigen oder eine flexiblere Mischung aus Blöcken wie Schaltflächen, Menüs, Lokalisierungsselektoren, Rich Text und Social-Icons. Einen umfassenderen Überblick über Theme-Layouts finden Sie in Shopify-Dokumentation zu Abschnitten und Blöcken

Standardmäßig verwendet der Abschnitt den Ankündigungstext, den Link und das Menü in den Haupteinstellungen des Abschnitts. Wenn Sie Blöcke hinzufügen, übernimmt das Block-Layout, damit Sie die Leiste präziser anordnen können.

Das Hinzufügen von Blöcken überschreibt die standardmäßige Ausgabe von Ankündigungstext und Menü aus den Abschnittseinstellungen. Verwenden Sie nur eine der beiden Methoden, um Verwirrung beim Einrichten der Leiste zu vermeiden.

Grundeinstellungen

Verwenden Sie die Grundeinstellungen für eine unkomplizierte Top-Leiste, ohne ein benutzerdefiniertes Layout zu erstellen. Dies ist die schnellste Option, wenn Sie nur eine kurze Werbebotschaft, einen optionalen Link und ein einfaches Hilfemenü benötigen.

Halten Sie den Ankündigungstext kurz, damit er auf allen Geräten lesbar bleibt. Wenn Sie mehrere Inhaltstypen, unterschiedliche Ausrichtungsbereiche oder gerätespezifische Layouts benötigen, wechseln Sie zu Blöcken, statt zu versuchen, alles in die Standard-Einrichtung zu integrieren.

Farbeinstellungen

Verwenden Sie diese Farbstreuerungen für den Abschnitt, um die übergeordneten Theme-Farben für den Text und die Symbole der Ankündigungsleiste zu überschreiben. Das ist hilfreich, wenn die Leiste sich für eine Aktion, einen Hinweis oder eine saisonale Kampagne hervorheben soll.

Wenn Sie außerdem einen benutzerdefinierten Hintergrund verwenden, prüfen Sie den Kontrast sorgfältig. Gute Lesbarkeit ist hier wichtiger als dekoratives Styling, da diese Leiste schnell erfasst werden soll.

Unterstützte Blocktypen

1. Schaltfläche
2. Icon with text
3. Lokalisierungsselektoren
4. Hauptmenü
5. Rich Text
6. Social-Media-Icons

Die meisten Blöcke in diesem Abschnitt enthalten auch eigene Steuerungen für Layout, Ausrichtung und Sichtbarkeit. Verwenden Sie diese Einstellungen, um Elemente links, zentriert, rechts oder in einer eigenen Zeile zu platzieren und die Leiste auf kleineren Bildschirmen zu vereinfachen.

Schaltfläche

Verwenden Sie den Schaltflächen-Block für eine klare Aktion wie eine Verkaufsseite, einen Anmeldelink oder eine Support-Seite. Siehe Schaltfläche.

Kleinere Schaltflächenstile eignen sich für diesen Abschnitt meist am besten. Wenn die Leiste bereits mehrere Elemente enthält, vermeiden Sie übergroße Schaltflächenstile, die den Header-Bereich überladen wirken lassen können.

Icon mit Text

Verwenden Sie diesen Block für kurze Hinweise wie kostenlosen Versand, einfache Rücksendungen oder zeitlich begrenzte Angebote. Siehe Icon mit Text.

Halten Sie die Nachricht kurz und direkt. Dieser Block ist am wirkungsvollsten, wenn er auf einen Blick einen zentralen Vorteil unterstreicht.

Lokalisierungsselektoren

Verwenden Sie diesen Block, um Länder-, Währungs- und Sprachselektoren in der Top-Leiste anzuzeigen. Siehe Lokalisierungs-Auswahlfelder.

Dieser Block benötigt eine unterstützende Lokalisierungseinrichtung, bevor er nützlich wird. Auf Mobilgeräten kann der kleine Feldstil die Selektoren in eine neue Zeile zwingen. Prüfen Sie die Leiste nach Änderungen an den Selektorstilen daher immer in der Vorschau auf kleineren Bildschirmen.

Hauptmenü

Verwenden Sie den Block Hauptmenü, um sekundäre Navigation wie Kontakt, FAQ, Bestellverfolgung oder Richtlinienlinks hinzuzufügen. Siehe Hauptmenü.

Sie können bis zu zwei Menüblöcke hinzufügen, wenn Sie getrennte Linkgruppen wünschen. Das funktioniert gut, wenn Sie links eine Hilfenavigation und auf der anderen Seite werbliche oder konto-bezogene Links benötigen.

Rich Text

Verwenden Sie den Rich-Text-Block, wenn Sie mehr Formatierung benötigen, als der Standard-Ankündigungstext zulässt. Er unterstützt formatierten Text und Inline-Links für ausdrucksstärkere Botschaften.

Verwenden Sie ihn in diesem Abschnitt sparsam. Großer Text oder stark formatierte Inhalte können die Leiste sehr schnell unruhig wirken lassen.

Social-Media-Icons

Verwenden Sie diesen Block, um Social-Media-Konten anzuzeigen, die bereits in Ihren Theme-Einstellungen eingerichtet sind. Siehe Social media icons block.

Sie können alle konfigurierten Netzwerke anzeigen oder eine kleinere Auswahl wählen. Gefüllte Symbole sind in einer kompakten Top-Leiste meist am einfachsten zu erfassen, während ein reiner Textstil besser zu minimalistischeren Layouts passt.

Standard-Abschnittseinstellungen

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen steuern den Hintergrund der Leiste, einschließlich Farb-, Farbverlauf-, Bild-, Video- und Overlay-Optionen. Verwenden Sie sie, um die Leiste visuell vom Header abzuheben oder einen kampagnenspezifischen Stil zu unterstützen.

Da dieser Abschnitt gering in der Höhe ist, funktionieren subtile Hintergründe meist besser als detailreiche Medien. Wenn Sie ein Bild oder Video verwenden, können Overlays dazu beitragen, die Lesbarkeit des Textes zu erhalten.

Padding-Einstellungen

Padding-Einstellungen steuern den vertikalen Abstand oberhalb und unterhalb des Leisteninhalts. Kleine Änderungen hier können spürbar beeinflussen, wie präsent die Leiste wirkt.

Verwenden Sie engeres Padding für Layouts mit vielen Hilfenavigationselementen und etwas mehr Padding, wenn die Leiste Schaltflächen oder mehrere Zeilen enthält. Prüfen Sie sowohl Desktop als auch Mobilgeräte, damit die Leiste nicht höher wird als beabsichtigt.

Trennlinien-Einstellungen

Trennlinien-Einstellungen ermöglichen es Ihnen, oberhalb oder unterhalb der Leiste eine Linie hinzuzufügen. Das ist nützlich, wenn die Leiste nah am Header sitzt und eine klarere visuelle Abgrenzung benötigt.

Wenn Ihre Leiste und der Header ähnliche Farben verwenden, kann eine Trennlinie das Layout leichter erfassbar machen. Eine transparente Trennlinienfarbe fällt auf die übergeordnete Rahmenfarbeinstellung zurück.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob die gesamte Leiste auf Desktop, Mobilgerät oder beidem angezeigt wird. Das ist nützlich, wenn Sie auf größeren Bildschirmen eine vollständigere Hilfsleiste und auf Smartphones einen einfacheren Header-Bereich wünschen.

Sie können die Sichtbarkeit des Abschnitts mit der blockbezogenen Sichtbarkeit kombinieren, um gerätespezifische Inhaltsmischungen zu erstellen, ohne die gesamte Einrichtung zu duplizieren.

Breiten-Einstellungen

Breiten-Einstellungen steuern die maximale Inhaltsbreite und die Gesamtbreite des Abschnitts. In diesem Abschnitt beeinflusst die Inhaltsbreite, wie eng Elemente gruppiert werden, während die Abschnittsbreite vor allem dann wichtig ist, wenn Sie Hintergrund-Styling verwenden.

Der Editor zeigt Breitenänderungen möglicherweise nicht immer genau an. Prüfen Sie daher die Live-Storefront, wenn Sie das Layout verfeinern. Eine schmalere Inhaltsbreite kann Hilfsinhalte leichter erfassbar machen, während ein breiterer oder Full-bleed-Abschnitt gut für stärkere Hintergrundgestaltungen geeignet ist.

Nutzungshinweise

1. Wählen Sie eine Inhaltsmethode. Verwenden Sie den Standardtext und das Standardmenü für eine einfache Leiste oder fügen Sie Blöcke für ein benutzerdefiniertes Layout hinzu, da Blöcke den Standardinhalt ersetzen.
2. Prüfen Sie beide Ansichten. Desktop- und Mobilsteuerungen können Ausrichtung, Abstand, Sichtbarkeit und Umbruch verändern. Überprüfen Sie daher beide Größen, nachdem Sie die Leiste angepasst haben.
3. Achten Sie auf Hintergrund-Überschreibungen. Leere Werte oder Werte im Standardstil bewahren in der Regel das Fallback-Styling, während explizite Farben, Verläufe oder Medien die Leiste unabhängiger vom restlichen Header wirken lassen.
4. Behandeln Sie Medien mit Sorgfalt. Wenn Sie unterschiedliche Desktop- und Mobilmedien verwenden, prüfen Sie Zuschnitt, Ladeverhalten und Lesbarkeit, damit die Leiste auf beiden Geräten klar bleibt.
5. Gestalten Sie die Navigation bewusst. Menüblöcke können den Kundenfluss beeinflussen. Daher sollten ausgeblendete, neu angeordnete oder nur für Mobilgeräte sichtbare Links auf Erreichbarkeit und Klarheit geprüft werden.
6. Verwenden Sie die Leiste für Hilfsinhalte. Reservieren Sie diesen Bereich für Meldungen mit hoher Priorität, Schnelllinks und leichte Navigation, statt primäre Header-Inhalte zu wiederholen.