Entwerfen Sie einen Inline-Countdown-Timer in der Ankündigungsleiste

Was ist ein Countdown-Timer?

Ein Countdown-Timer ist ein Werkzeug, das zählt die verbleibende Zeit bis zu einem bestimmten Ereignis, beispielsweise dem Ende eines Verkaufs oder dem Beginn einer Veranstaltung.

Durch die Schaffung eines Gefühls von Dringlichkeit und Knappheit, motiviert es die Kunden, schnell zu handeln, wodurch Zögern und Kaufabbrüche reduziert werden. Dieser psychologische Auslöser, oft als Angst, etwas zu verpassen (FOMO) bezeichnet, kann erheblich Steigern Sie Umsatz und Engagement.

Beispiele für Anwendungsfälle

• Übersichtsleiste

• Produktseiten

• Landing Page

In diesem Tutorial konzentrieren wir uns auf die Gestaltung eines Inline-Countdown-Timer in einer Ankündigungsleiste. In-line bedeutet, dass der Timer sauber auf derselben Zeile wie Ihr Werbetext steht, anstatt darunter oder separat platziert zu werden.

So gestalten Sie einen Inline-Countdown-Timer in der Ankündigungsleiste

Erstellen eines Inline-Countdown-Timers („Inline“ bedeutet, dass der Countdown-Timer in derselben Zeile wie Text oder andere Elemente platziert wird, anstatt separat zu sein), beispielsweise für eine Ankündigungsleiste.

Schritt 1: Erstellen Sie eine Zeile mit zwei Spalten

• Hinzufügen Zeilenelement und zwei Spalten zu Ihrem Seitenlayout.

• Im linke Spalte, ziehen Sie einen Textelement. Hier können Sie eine kurze Werbebotschaft hinzufügen, wie „Zeitlich begrenztes Angebot!“ or „Der Verkauf endet bald.“

• Im rechte Spalte, ziehen Sie die Countdown-Timer-Element um den Timer anzuzeigen.

• Öffnen Sie den Microsoft Store auf Ihrem Windows-PC Zeileneinstellungen und einstellen Spaltenbreite → Inhalt anpassenDadurch wird sichergestellt, dass sich Ihre Ankündigungsleiste ohne zusätzlichen Abstand nahtlos an den Text und den Timer anpasst.

Schritt 2: Passen Sie das Textelement an

Klicken Sie auf Textelement in der linken Spalte. Das Einstellungsfenster wird mit zwei Registerkarten geöffnet: Einstellungen als auch Erweitert. Hier können Sie:

• Bearbeiten Sie den Text (z. B. „Kostenloser Versand endet in:“ oder „Verkauf endet bald“).
• Passen Sie den Textstil an: Schriftart, Größe, Stärke, Ausrichtung und Farbe
• Ändern Sie den Hintergrund, die Polsterung oder die Ränder für einen besseren Abstand

Ausführliche Anleitungen finden Sie in unserem vollständigen Artikel über die Textelement.

Schritt 3: Passen Sie das Countdown-Timer-Element an

Klicken Sie auf Countdown-Timer-Element in der rechten Spalte. Im Einstellungsbereich (Einstellungen + Erweitert) können Sie Folgendes anpassen:

• Endzeit: eingestellt, wenn der Countdown endet
• Artikelverwaltung: Wählen Sie die anzuzeigenden Einheiten (Wochen, Tage, Stunden, Minuten, Sekunden) und bearbeiten Sie deren Beschriftungen
• Gestaltungsmöglichkeiten: Hintergrundfarbe, Größe, Form, Schriftart und Ausrichtung

Für fortgeschritteneres Styling, siehe unseren vollständigen Leitfaden auf der Countdown-Timer-Element.

Schritt 4: Anpassen des Zeilenlayouts

Zum Schluss noch die Feinabstimmung Zeilenelement das sowohl den Text als auch den Countdown-Timer enthält:

• Anpassung Zeilengröße und Ausrichtung passend zu Ihrer Ankündigungsleiste
• Hinzufügen oder entfernen Hintergrundfarben für bessere Sichtbarkeit
• Kontrollieren Sie Abstand und Polsterung, um sicherzustellen, dass die Leiste ausgewogen aussieht

Erfahren Sie mehr in unserem ausführlichen Artikel über die Zeilenelement.

Schritt 5: Speichern und veröffentlichen

Wenn Sie mit dem Design fertig sind, klicken Sie auf Gespeichert und dann Veröffentlichen. Ihre Shopify-Countdown-Timer wird jetzt in Ihrer Ankündigungsleiste angezeigt.