Einfaches Banner erstellen

Ein einfaches Banner ist eine Leiste, die Sie aus Inhaltselementen – Überschriften, Nachrichten, Schaltflächen, Countdowns, Bildern – zusammenstellen, gruppiert in einem oder mehreren Abschnitten. Der Editor hat zwei Tabs: Design (Inhalt und Gestaltung) und Placement (wo und für wen die Leiste erscheint).

1. Seite „Banners“ öffnen

   Öffnen Sie in Ihrem Shopify Admin die App Sami Product Labels, klicken Sie in der App-Seitenleiste auf Extra Features und wechseln Sie dann zum Tab Banners.

   

   Öffnen Sie „Banners“ über die Seitenleiste von Sami Product Labels.

2. Auf „Create banners“ klicken und „Basic“ auswählen

   Klicken Sie auf Create banners. Klicken Sie im Dialog Select Type neben Basic auf Select – dem Typ, der eine oder mehrere Inhaltsgruppen unterstützt.

   

   Wählen Sie „Basic“, um eine Standard-Ankündigungsleiste zu erstellen.

   Hinweis

   Sie möchten nicht bei null anfangen? Verwenden Sie auf der Seite „Banners“ Featured templates oder View all templates, um ein fertiges Banner zu öffnen und es zu bearbeiten.

3. Banner benennen

   Der Vollbild-Editor öffnet sich im Tab Design. Ersetzen Sie New Banner im Namensfeld über der Vorschau durch einen Namen mit bis zu 50 Zeichen. Dieser Name ist intern – er identifiziert das Banner in Ihrer Liste und wird der Kundschaft nie angezeigt.

   Neben dem Namen finden Sie außerdem eine Sprachauswahl, Umschalter für die Desktop- und Mobilvorschau und den Statusschalter Active / Draft.

   

   Die Symbolleiste über der Vorschau enthält Bannername, Sprache, Vorschaugerät und Status.

4. Inhalt erstellen

   Unter Content listet Section 1 die Elemente auf, aus denen die Leiste besteht. Klicken Sie auf ein Element, um seinen Text und seine Gestaltung zu bearbeiten, ziehen Sie den Griff links, um die Reihenfolge zu ändern, oder verwenden Sie die Symbole rechts in einer Zeile, um es auszublenden, zu duplizieren oder zu löschen.

   Klicken Sie auf Add element, um ein neues hinzuzufügen:

   Element	Was es hinzufügt
   Message	Eine Zeile Fließtext.
   Heading	Eine große Überschrift.
   Line break	Vertikalen Abstand zwischen Elementen.
   Button	Eine Call-to-Action-Schaltfläche mit eigenem Link.
   Countdown	Einen Timer mit Tagen / Stunden / Minuten / Sekunden.
   Image	Ein Bild oder Logo.

   

   Fügen Sie die Elemente der Leiste hinzu, ordnen Sie sie neu an und bearbeiten Sie sie.

5. (Optional) Weitere Inhaltsgruppen hinzufügen

   Klicken Sie auf Add Group, um Section 2, Section 3 usw. zu erstellen. Jeder Abschnitt ist eine eigene Nachricht, und das Banner wechselt zwischen ihnen – das Timing steuern Sie in den nächsten Schritten unter Animation.

   Lassen Sie es bei einem einzigen Abschnitt, wenn Sie nur eine statische Nachricht möchten.

6. Leiste gestalten

   Im Bereich Style:

   • Background Type – Wählen Sie Single Color, Gradient Color oder Pattern Image und legen Sie dann die Farbe oder das Bild fest.
   • Font Style – Legen Sie Schriftart, Größe, Stärke und Textfarbe fest.
   • Padding – Steuern Sie den Abstand innerhalb der Leiste.

   

   Legen Sie Hintergrund, Schriftarten und Innenabstand für die gesamte Leiste fest.

7. Schließen-Schaltfläche hinzufügen oder die Leiste anklickbar machen

   Beide Optionen befinden sich im Bereich Button und sind standardmäßig deaktiviert:

   • Aktivieren Sie Include Close Button, um ein „x“ auf der Leiste anzuzeigen, mit dem die Kundschaft sie schließen kann. Es erscheinen zwei Felder: Color und Hover Color.
   • Aktivieren Sie Bar Clickable, um die gesamte Leiste zu einem Link zu machen. Ein Feld Link URL erscheint – geben Sie das Ziel ein und öffnen Sie den Link mit dem Schalter daneben in einem neuen Tab.

   

   Wenn Sie ein Kontrollkästchen aktivieren, werden seine Einstellungen eingeblendet – Farben der Schließen-Schaltfläche oder die Link-URL.

8. Animationstiming festlegen

   Wählen Sie im Bereich Animation einen Übergang Horizontal oder Vertical und legen Sie dann die Zeiten in Sekunden fest:

   Feld	Was es steuert
   Disappear After	Wie lange die Leiste auf dem Bildschirm bleibt, bevor sie ausgeblendet wird.
   Interval Between Bar Display	Die Pause, bevor die Leiste wieder erscheint.
   Time For The Bar To Fade In	Die Dauer der Einblend-Animation.
   Time Per Group	Wie lange jeder Abschnitt angezeigt wird, bevor zum nächsten gewechselt wird.

   Hinweis

   Lassen Sie ein Feld auf 0, um dieses Verhalten zu deaktivieren – zum Beispiel hält Disappear After = 0 die Leiste sichtbar, bis die Kundschaft sie schließt.

9. (Optional) Eigenes CSS hinzufügen

   Öffnen Sie Advance Section, um Ihr eigenes CSS in das Feld Custom CSS (Developer Zone) zu schreiben. Die Liste CSS reference darunter zeigt die verfügbaren Selektoren – klicken Sie auf einen, um ihn einzufügen.

10. Festlegen, wo das Banner erscheint

    Wechseln Sie zum Tab Placement und wählen Sie eine Anzeigeposition:

    Position	Verhalten
    Top	Schiebt den Seiteninhalt nach unten.
    Top Sticky	Schiebt den Inhalt nach unten und bleibt beim Scrollen sichtbar.
    Top Overlay	Überlagert den oberen Teil des Seiteninhalts.
    Overlay Sticky	Überlagert den Inhalt und bleibt beim Scrollen sichtbar.
    Bottom Sticky	Am unteren Seitenrand fixiert.
    Custom	Platzieren Sie die Leiste mit einem Shortcode an beliebiger Stelle.

    Unterhalb der Positionsauswahl grenzen Sie die Zielgruppe mit Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions und Visibility date ein. Der Bereich Shortcode liefert das Snippet, das Sie in Ihr Theme einfügen, wenn Sie Custom wählen.

    Eine ausführliche Aufschlüsselung der einzelnen Bedingungstypen finden Sie unter Anzeigebedingungen konfigurieren.

    

    Wählen Sie eine Anzeigeposition und fügen Sie dann Bedingungen hinzu, um zu steuern, wer das Banner sieht.

11. Speichern und aktivieren

    Stellen Sie den Statusschalter über der Vorschau auf Active und klicken Sie dann oben rechts auf Save. Lassen Sie ihn auf Draft, um weiterzuarbeiten, ohne zu veröffentlichen.

    Achtung

    Banner werden in Ihrem Onlineshop nur angezeigt, wenn die App-Einbettung in Ihrem Theme aktiviert ist. Siehe App in Ihrem Theme aktivieren.

Nächste Schritte

• Anzeigebedingungen konfigurieren – Richten Sie detaillierte Targeting-Regeln für Ihr Banner ein.
• Banner mit Endlos-Scroll erstellen – Probieren Sie stattdessen eine scrollende Leiste im Ticker-Stil aus.

Tipp

Brauchen Sie Hilfe?

Wenn Sie bei diesen Schritten auf Schwierigkeiten stoßen, schreiben Sie uns an [email protected].