Zum Inhalt springen
SamitaSamita docs

Anleitungen in Product Labels durchsuchen.

    7 Tage kostenlos testen
    Deutsch
    English简体中文繁體中文ČeštinaBald verfügbarDanskBald verfügbarNederlandsSuomiBald verfügbarFrançaisDeutschItaliano日本語한국어Norsk bokmålBald verfügbarPolskiPortuguêsEspañolSvenskaTürkçe
    In Claude öffnen Fragen zu dieser Seite stellenIn ChatGPT öffnen Fragen zu dieser Seite stellen

    Banner mit Endlos-Scroll erstellen

    Erstellen Sie ein Banner mit Endlos-Scroll, dessen Inhalt nahtlos wiederholt wird – ideal für Ankündigungen und Aktionen im Ticker-Stil.

    Ein Banner mit Endlos-Scroll ist eine Leiste, deren Inhalt wie bei einem Nachrichtenticker fortlaufend von rechts nach links wiederholt wird. Nutzen Sie es für wiederkehrende Aktionen, Hinweise auf kostenlosen Versand oder kurze Ankündigungen, die Ihrer Kundschaft auffallen sollen.

    1. Seite „Banners“ öffnen

      Abschnitt betitelt „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.

      Der Bereich „Banners“ in der App-Seitenleiste

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

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

      Abschnitt betitelt „Auf „Create banners“ klicken und „Infinite Scroll“ auswählen“

      Klicken Sie auf Create banners. Klicken Sie im Dialog Select Type neben Infinite Scroll auf Select – dem Typ, der den Bannerinhalt für einen nahtlosen Scroll-Effekt endlos wiederholt.

      Der Dialog „Select Type“ mit ausgewähltem „Infinite Scroll“

      Wählen Sie „Infinite Scroll“, um eine Leiste im Ticker-Stil zu erstellen.

    3. Abschnitt betitelt „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 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 Editor-Symbolleiste mit Namensfeld, Sprachauswahl, Vorschau-Umschaltern und Schalter „Active/Draft“

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

    4. Scrollenden Inhalt bearbeiten

      Abschnitt betitelt „Scrollenden Inhalt bearbeiten“

      Section 1 beginnt mit einem einzelnen Element Description, das einen Beispieltext wie ✨ Free ship on order $40+ ✨ enthält. Klicken Sie darauf, um rechts seine Einstellungen zu öffnen:

      • Content – ein Rich-Text-Editor mit Fett, Kursiv, Unterstreichung, Emoji, Ausrichtung und einer HTML-Ansicht (</>). Der Sprach-Chip zeigt, in welcher Sprache Sie bearbeiten.
      • Text – Schriftgröße (Size) und Color.
      • Padding und Margin – Abstand um das Element, in Pixeln.

      Klicken Sie auf Add element, um der Schleife weitere Elemente hinzuzufügen – Message, Heading, Line break, Button, Countdown oder Image – und ziehen Sie den Griff links in einer Zeile, um ihre Reihenfolge zu ändern.

      Der Bereich „Content“ mit dem Element „Description“ neben der scrollenden Vorschau

      Bearbeiten Sie das Element, das über die Leiste läuft, oder fügen Sie der Abfolge weitere hinzu.

    5. Leiste gestalten

      Abschnitt betitelt „Leiste gestalten“

      Im Bereich Style:

      • Background Type – Wählen Sie Single Color, Gradient Color oder Pattern Image. Banner mit Endlos-Scroll verwenden standardmäßig Pattern Image; mit Change Image tauschen Sie die Kachel aus, mit Remove entfernen Sie sie.
      • Font Style – Legen Sie Schriftart, Stärke und Standard-Textfarbe fest.
      • Padding – Steuern Sie den Abstand innerhalb der Leiste.

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

      Abschnitt betitelt „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.

      Der Bereich „Button“ mit aktivierten Optionen „Include Close Button“ und „Bar Clickable“

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

    7. Scroll-Geschwindigkeit und Timing festlegen

      Abschnitt betitelt „Scroll-Geschwindigkeit und Timing festlegen“

      Alle vier Felder im Bereich Animation werden in Sekunden angegeben:

      Feld Was es steuert
      Scroll speed Wie lange ein vollständiger Durchlauf dauert. Eine höhere Zahl scrollt langsamer.
      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.

      Der Bereich „Animation“ mit den Feldern für Scroll-Geschwindigkeit und Timing

      „Scroll speed“ legt die Dauer eines Durchlaufs fest – erhöhen Sie den Wert, um den Ticker zu verlangsamen.

    8. (Optional) Eigenes CSS hinzufügen

      Abschnitt betitelt „(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 – darunter .samita_banner_groups.infinityScroll, den Wrapper, der bei aktiviertem Endlos-Scroll verwendet wird. Klicken Sie auf einen Selektor, um ihn einzufügen.

    9. Festlegen, wo das Banner erscheint

      Abschnitt betitelt „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.

      Der Tab „Placement“ mit den sechs Anzeigepositionen und den Bedingungsbereichen

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

    10. Speichern und aktivieren

      Abschnitt betitelt „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.

    Nächste Schritte

    Abschnitt betitelt „Nächste Schritte“

    War diese Seite hilfreich?