Wie man Countdown Timer einrichtet
ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.
Möchten Sie Ihrer Storefront Dringlichkeit verleihen und den Kunden helfen, Maßnahmen zu ergreifen, bevor die Zeit abläuft? ⏳
Das ist genau das, was die Hoppy Countdown Timer ist gebaut für.
Mit dieser App können Sie Countdown-Timer erstellen für:
- 🛍️ Produktseiten - Zeigen Sie die Dringlichkeit direkt auf den Produktdetailseiten
- 🛒 Warenkorbseite & Warenkorbschublade - Ermutigen Sie Käufer, den Checkout abzuschließen
- 💳 Checkout Seite - Fügen Sie die Dringlichkeit im letzten Schritt hinzu (Shopify Nur plus
- 🌐 Top / Bottom Banner Anzeige einer Site Wide Countdown Bar
- 📄 Landing Page & Custom Positionen - Zielspezifische Sammlungen oder benutzerdefinierte Platzierungen
Dieser Leitfaden führt Sie durch die wichtigsten Setup-Schritte, damit Sie Ihren ersten Countdown-Timer schnell live erhalten können 🚀
📍 Verfügbare Countdown-Typen
Abhängig von Ihrer Kampagne können Sie aus mehreren Timer-Verhalten wählen:
- Countdown bis zum Datum - Endet zu einem bestimmten Datum und einer bestimmten Uhrzeit
- Feste Minuten — Ein Countdown in fester Länge für jede Besuchersitzung
- Täglich wiederkehrender Timer Wiederholt sich an ausgewählten Tagen (z. B. jeden Wochentag von 9 bis 11 Uhr)
- Intervallzeitgeber Mehrere geplante Start- und Endzeiten (bis zu 7 Intervalle)
- Sitzungs-Timer - Ein einzigartiger Countdown, der für jeden Besucher frisch beginnt
Der Typ, den Sie auswählen, ändert, welche Timing-Optionen in Ihrem Setup angezeigt werden.
⚠️ Bevor Sie beginnen
Bevor Sie einen Countdown-Timer erstellen, stellen Sie sicher:
- Die Hoppy Countdown Timer Die App ist auf Ihrem Shopify Lager
- Sie haben Zugriff auf Ihre Shopify Admin
Aktivieren Sie die App Embed
Damit Countdown-Timer auf Ihrer Storefront erscheinen, muss das App-Embed in Ihrem Shopify Thema.
Gehen Sie zu:
Shopify Admin → Sales Channels → Online Store → Themes → Edit Theme → App Embeds
Dann:
- Finde Countdown-Timer
- Umschalten IN
- Klicken Sparen
💡 Wenn Sie diesen Schritt überspringen, ist Ihr veröffentlichter Countdown-Timer auf der Storefront nicht sichtbar.
Shopify Plus Anforderung für Checkout
Wenn Sie einen Countdown-Timer auf dem Checkout SeiteIhr Geschäft muss auf einem Shopify Plus Plan. Non-Plus-Shops sehen eine Planwarnung, wenn Sie versuchen, einen Checkout-Seiten-Countdown zu erstellen.
🛠️ Schritt 1 - Erstellen Sie einen neuen Countdown-Timer
Offen Hoppy Countdown Timer App von Deiner Shopify Admin.
Dann:
→ Klicken Erstellen Sie einen neuen Countdown
→ Wählen Sie die Platzierungsart Das passt dorthin, wo der Timer erscheinen soll:
- Produktseite
- Warenkorbseite
- Warenkorbschublade
- Checkout Seite ()Shopify Nur plus
- Top / Bottom Banner
- Landing Page
- Zollstelle
Einmal ausgewählt, öffnet sich der Setup-Editor automatisch mit Standardeinstellungen, die auf diese Platzierung zugeschnitten sind.
⚙️ Schritt 2 — Konfigurieren Sie den Inhalt Tab
Nach dem Öffnen der Setup-Seite landen Sie in der Inhalt Tab.
Diese Registerkarte steuert:
- 🏷️ Countdown Name und Messaging
- ⏱️ Countdown Typ und Timing
- 🔚 Was passiert, wenn der Timer endet
- 🌍 Übersetzungen (für unterstützte Placements)
🏷️ Countdown Name
Dieses Feld wird verwendet für Interne Referenz nur Kunden werden es nie sehen.
Verwenden Sie einen erkennbaren Namen wie:
- Sommerverkauf Timer
- Black Friday Countdown
- Flash Sale Dringlichkeit Bar
💡 Die Verwendung einer klaren internen Benennung erleichtert die spätere Verwaltung mehrerer Kampagnen.
📝 Titel & Untertitel
- Titel - Die Hauptnachricht, die Kunden sehen (z. B. "Beeilen Sie sich!") Der Verkauf endet in {Timer}
- Unterrubrik - Eine sekundäre Zeile, die unter dem Titel auf den meisten Platzierungen gezeigt wird
ℹ️ am Warenkorbseite und Checkout Seite Timer, können Sie die dynamische Variable verwenden {timer} innerhalb des Titels, um den Live-Countdown inline anzuzeigen.
🔘 Call-to-Action-Taste
für Top / Bottom Banner, Landing Page, Warenkorbseite, und Warenkorbschublade Timer, können Sie wählen, was passiert, wenn Kunden mit der Countdown-Leiste interagieren.
Setzen Sie die CTA-Maßnahme zu:
- Kein Aufruf zum Handeln - Die Leiste zeigt nur Text an
- Button - Fügt einen anklickbaren Button unter dem Timer hinzu
- Machen Sie die gesamte Bar anklickbar - Verwandelt die gesamte Leiste in einen Link
ℹ️ Wenn Sie wählen Button oder Machen Sie die gesamte Bar anklickbar, Knopftext und Link Felder werden automatisch angezeigt, damit Sie konfigurieren können, wohin die Kunden geleitet werden.
⏱️ Countdown Typ
Wählen Sie, wie sich Ihr Timer verhalten soll:
Typ
Wann zu verwenden
Countdown bis zum Datum
Ein festes Enddatum (z. B. Verkauf endet am 31. Dezember)
Feste Minuten
Jeder Besucher erhält die gleiche feste Sitzungsdauer
Täglich wiederkehrender Timer
Wiederholt sich an ausgewählten Tagen mit festgelegten Start-/Endzeiten
Intervallzeitgeber
mehrere geplante Countdown-Fenster
Sitzungs-Timer
Ein neuer Countdown für jede Besuchersitzung
Sobald Sie einen Typ ausgewählt haben, werden die entsprechenden Timingfelder automatisch angezeigt:
- Datum Startdatum und Enddatum Pickers erscheinen
- Feste Minuten / Sitzung → A Protokoll Feld erscheint
- Wiederkehrend → Tagesauswahl und Start-/Endzeitsteuerung erscheinen
- Intervall → Mehrere Start-/Enddatums-Picker erscheinen (bis zu 7 Intervalle)
ℹ️ Warenkorbseite, Warenkorbschublade und Checkout Seite Platzierungen verwenden feste Timing-Modi und tun nicht Zeigen Sie den Countdown Type Selector an. Für Warenkorb und Checkout legen Sie die Dauer in Protokoll.
🕐 Timer Start Einstellungen
für Countdown bis zum Datum Timer, können Sie wählen, wann der Timer startet:
- Gerade jetzt — Der Timer beginnt sofort, wenn er veröffentlicht wird
- Zeitplan für den späteren Start - Legen Sie ein zukünftiges Startdatum fest
Wenn Sie "Zeitplan für den späteren Start" auswählen, wird ein zusätzlicher Startdatum Feld erscheint.
ℹ️ Diese Option ist nicht verfügbar für Warenkorbseite, Warenkorbschublade, oder Checkout Seite Platzierungen, die ihre eigenen Timing-Steuerelemente verwenden.
🔚 Sobald es endet
Diese Einstellung steuert, was passiert, wenn der Countdown Null erreicht.
Die verfügbaren Optionen hängen von Ihrer Platzierung und Ihrem Countdown-Typ ab:
Für die meisten Placements:
- Unveröffentlichter Timer (Hide) - Versteckt den Countdown automatisch
- Eigene Meldung anzeigen - Zeigt einen benutzerdefinierten Titel / eine benutzerdefinierte Nachricht an, die Sie definieren
- Timer verlängern - Fügt zusätzliche Zeit hinzu und zeigt eine erweiterte Nachricht an
- Nichts tun - lässt den Timer bei Null sichtbar
Für Cart Page, Cart Drawer und Cart Standalone:
- Alle oben genannten sowie:
- Countdown neu starten - Setzt den Timer automatisch zurück
- Warenkorbprodukte löschen - Entfernt Artikel aus dem Warenkorb, wenn der Timer endet
Für "Fixed Minutes" Typ auf anderen Platzierungen:
- Auch umfasst Neustart CountdownFür Checkout-Seite:
- Unveröffentlichter Timer (Hide) nur
- Nichts tun
ℹ️ Wenn Sie wählen Eigene Meldung anzeigen oder Timer verlängern, werden automatisch zusätzliche Textfelder angezeigt, damit Sie den Nachrichteninhalt eingeben können.
📍 Schritt 3 — Konfigurieren Sie den Placement Tab
Als nächstes öffnen Sie die Platzierung Registerkarte, um zu steuern, wo der Countdown erscheint und wer ihn sehen kann.
🎯 Seiten oder Produkte auswählen
Die verfügbaren Targeting-Optionen hängen vom Platzierungstyp ab, den Sie in Schritt 1 gewählt haben.
🛍️ Produktseite
- Alle Erzeugnisse - Zeigen Sie auf jeder Produktseite
- Besondere Erzeugnisse Hand-Pick einzelne Produkte aus Ihrem Shop
- Alle Produkte mit spezifischen Tags - Zielprodukte, die mit Tags übereinstimmen, die Sie definieren
- Alle Produkte in spezifischen Kollektionen - Show für Produkte innerhalb ausgewählter Kollektionen
- Zollstelle - Platzieren Sie manuell mit der Countdown ID oder dem Liquid Snippet
🛒 Warenkorbseite & Warenkorbschublade
- An der Spitze des Wagens Standardplatzierung über Warenkorbpositionen
- Zollstelle - Platzieren Sie manuell mit der Countdown ID oder dem Liquid Snippet
🌐 Top / Bottom Banner
- Auf jeder Seite anzeigen — Standortweite Sichtbarkeit
- Nur auf der Homepage anzeigen - Beschränken Sie sich auf die Homepage
- Auf allen Produktseiten anzeigen - Erscheinen auf jeder Produktseite
- Anzeigen auf bestimmten Produktseiten — Auswahl einzelner Produkte
- Alle Produkte in spezifischen Kollektionen - Zielprodukte innerhalb ausgewählter Kollektionen
- Auf allen Sammlungsseiten anzeigen - Erscheinen auf jeder Sammlungsseite
- Anzeigen auf bestimmten Sammlungsseiten Hand-Pick einzelne Sammlungen
- Zollstelle - Platzieren Sie manuell mit der Countdown ID oder dem Liquid Snippet
📄 Landing Page
- Alle Sammlungsseiten - Zeigen Sie auf jeder Sammlungsseite
- Spezifische Sammelseiten Hand-Pick einzelne Sammlungen
- Zollstelle - Platzieren Sie manuell mit der Countdown ID oder dem Liquid Snippet
💳 Checkout Seite
- Custom Block Placement - Hinzufügen über die Shopify Checkout Editor
ℹ️ Wenn Sie wählen ZollstelleDie App bietet eine Countdown-ID und a Flüssigcode-Schnipsel Nach dem Sparen. Sie können diese in Ihrem Theme-Editor oder Code verwenden, um den Timer genau dort zu platzieren, wo Sie möchten.
Time-on-Site Targeting
Wählen Sie, wann der Countdown erscheinen soll:
- Immer Show Zeigt sofort an, wenn die Seite geladen wird
- Show nach einer Weile Verzögert das Aussehen um eine festgelegte Anzahl von Sekunden (1-300)
👤 Customer Targeting (optional)
Sie können die Sichtbarkeit basierend auf:
- Anmeldestatus Alle Kunden oder nur angemeldete Kunden anzeigen
- Showbar auf Alle Kunden, Kunden mit spezifischen Tags oder Kunden basierend auf der Lebenszeit
- Hide Bar von - Ausschließen spezifischer Kunden-Tags oder lebenslanger Bereiche
ℹ️ Diese Einstellungen sind optional. Für die meisten Setups ist die Standardeinstellung Alle Kunden zeigen funktioniert perfekt.
🌍 Geolocation Targeting (optional)
Standardmäßig ist Ihr Countdown weltweit sichtbar.
Wenn Sie es auf bestimmte Länder beschränken möchten, wählen Sie Spezifische Länder und wählen Sie die erlaubten Standorte aus dem Länder-Selektor.
🎨 Schritt 4 — Customize Design (optional)
Offen Design Tab, um zu ändern, wie Ihr Countdown aussieht.
Sie können schnell eine Vorgefertigte Vorlage oder manuell anpassen:
- Position (oben oder unten)
- Hintergrundfarbe oder -verlauf
- Timer-Stil (Flip-Uhr, Kacheln, einfache Zahlen und mehr)
- Fonts, Abstand und Button Styling
💡 Wenn Sie es eilig haben, beginnen Sie mit einer Vorlage und verfeinern Sie sie später.
Für eine vollständige Aufschlüsselung jeder Designoption, siehe die Design & Styling Unterlagen.
💾 Schritt 5 - Speichern Sie Ihr Setup
Sobald Ihre Inhalte und Platzierung konfiguriert sind:
→ Klicken Sparen
Die Speicherleiste erscheint am unteren Rand des Bildschirms, wenn Sie Änderungen vornehmen. Speichern speichert Ihre Konfiguration, aber tut nicht Machen Sie den Timer noch live.
🚀 Schritt 6 - Veröffentlichen Sie den Countdown
Nach dem Speichern:
→ Klicken Veröffentlichen
Einmal veröffentlicht:
- Der Countdown wird auf Ihrer Storefront gemäß Ihren Platzierungs- und Targeting-Regeln sichtbar
- Grün "Veröffentlicht" Abzeichen erscheint neben dem Countdown-Namen
⚠️ Wichtige Erinnerungen:
- Wenn die App-Einbettung in Ihrem Theme nicht aktiviert ist, wird der Countdown nicht angezeigt - auch nicht nach der Veröffentlichung
- Nur für Checkout Page Timer eine veröffentlichter Checkout-Countdown ist pro Shop erlaubt
- Sie können jederzeit unveröffentlichen, indem Sie auf die Unveröffentlicht Taste
✅ Letzter Schritt — bestätigen Es funktioniert
Nach der Veröffentlichung:
- Öffnen Sie Ihre Storefront in einem Inkognito oder Privat Browserfenster
- Navigieren Sie zu der Seite, auf der der Countdown erscheinen soll
- Überprüfen Sie, ob der Timer sichtbar ist und richtig herunterzählen
Wenn der Countdown nicht erscheint:
- Überprüfen Sie erneut, dass die App Embed ist aktiviert und in Ihrem Theme gespeichert
- Bestätigen Sie den Countdown veröffentlicht
- Versuch a harte Erfrischung ()
Ctrl + Shift + Rauf Windows /Cmd + Shift + Rauf Mac - Stellen Sie sicher, dass Ihre Planungs- oder Targeting-Regeln es nicht verbergen
🎉 Endergebnis
Einmal erfolgreich konfiguriert:
✅ Ein Countdown-Timer ist live auf Ihren ausgewählten Seiten ✅ Kunden sehen Dringlichkeitsnachrichten in Echtzeit ✅ Der Timer versteckt oder verlängert sich automatisch basierend auf Ihren End-Action-Einstellungen ✅ Ihre Storefront fühlt sich dynamischer und zeitkritischer an ✨
Ein gut platzierter Countdown-Timer kann Kunden helfen, schnellere Kaufentscheidungen während ihrer Einkaufsreise zu treffen 🚀
Aktualisiert am: 10/09/2026
Danke!