ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Willst du die volle Kontrolle darüber, wo und wie dein Popup erscheint? 🛠️

Custom PopUps sind für fortgeschrittene Anwendungsfälle konzipiert. Sie sind standardmäßig manuelle Platzierung, was bedeutet, dass Sie genau entscheiden, wo sich das Popup in Ihrem Theme befindet - und Sie erhalten Zugriff auf eine Custom CSS Feld und ein Floating Action Button für maximale Flexibilität.

Dieser Leitfaden führt Sie durch das gesamte Setup, so dass Sie Ihr erstes Custom PopUp in wenigen Minuten starten können.

✅ Bevor Sie beginnen - Aktivieren Sie die App Embed

Damit ein Popup auf Ihrer Storefront erscheint, muss das App-Embed in Ihrem Shopify Thema.

Gehen Sie zu:

Shopify Admin → Sales Channels → Online Store → Themes → Edit Theme → App Embeds

Dann:

• Finde Hoppy Popups
• Umschalten IN
• Klicken Sparen

ℹ️ Ohne diesen Schritt wird Ihr Popup auch nach der Veröffentlichung nicht auf der Storefront rendern.

⚙️ Schritt 1 - Erstellen Sie ein neues benutzerdefiniertes PopUp

Offen Hoppy PopUps App.

Dann:

→ Klicken Erstellen Sie ein neues PopUp

→ auswählen Custom PopUp Aus der Liste der Popup-Typen.

Die Setup-Seite wird automatisch mit manuelle Platzierung Standardmäßig ausgewählt.

📝 Schritt 2 - Konfigurieren Sie den Inhalt

Nach dem Öffnen der Setup-Seite landen Sie innerhalb der Inhalt Tab.

Dieser Abschnitt steuert, was Ihre Besucher sehen und wie sie mit dem Popup interagieren.

🏷️ PopUp Name

Dieses Feld wird nur für interne Zwecke verwendet. Kunden werden diesen Namen nie sehen.

Sie können jeden erkennbaren Namen verwenden wie:

• Custom Announcement
• Theme-Placed Banner
• Entwickler Custom Popup
• Hardcoded Promo

💡 Mit der richtigen internen Benennung können Sie Setups später leichter identifizieren, insbesondere wenn Ihr Shop mehrere Kampagnen ausführt.

💬 Titel und Beschreibung

Diese erscheinen oben in Ihrem Popup und sollten Ihre Nachricht klar kommunizieren.

Beispiel

• Titel: "Besondere Ankündigung"
• Beschreibung: "Schauen Sie sich unsere neueste Kollektion an"

Sie können diese an Ihre Kampagnenstimme anpassen.

📧 E-Mail & Telefonsammlung

Wählen Sie aus, welche Felder in Ihrem Popup angezeigt werden sollen:

• E-Mail-Sammelfeld anzeigen - erfasst Besucher-E-Mails
• Telefonnummer anzeigen Feld — erfasst Telefonnummern mit Ländercode-Auswahl

Sie können beide anzeigen, nur eine oder keine, wenn sie nur eine ankündigung anzeigen.

🔗 Knopfverbindung

Wenn Sie keine E-Mails oder Telefonnummern sammeln, wird das Popup zu einem einfachen Call-to-Action-Button. Setzen Sie die Link auf die Seite, die Besucher besuchen sollen - zum Beispiel eine Sammlungsseite, eine Produktseite oder eine externe URL.

⚙️ Zusätzliche Collection & Coupon Einstellungen

In diesem Abschnitt erhalten Sie zusätzliche Kontrolle darüber, wie Besucherinformationen gesammelt werden und wie Rabatte im Popup präsentiert werden.

📩 E-Mail Collection Field Platzhalter

Passen Sie den Platzhaltertext an, der im E-Mail-Eingabefeld angezeigt wird.

Beispiel

• „Geben Sie Ihre E-Mail ein
• "Ihre beste E-Mail-Adresse"

Dies hilft den Besuchern zu zeigen, welche Informationen sie eingeben sollten.

❌ E-Mail Fehlermeldung

Stellen Sie die Validierungsnachricht ein, die angezeigt wird, wenn ein Besucher eine ungültige E-Mail-Adresse eingibt.

Beispiel

• "Bitte geben Sie eine gültige E-Mail-Adresse ein"

Dies wird automatisch angezeigt, wenn das eingegebene E-Mail-Format falsch ist.

📱 Standard-Ländercode

Wählen Sie den Standard-Ländercode für das Feld Telefonnummer.

Beispiel

• Vereinigte Staaten (+1)
• Vereinigtes Königreich (+44)
• Indien (+91)

Besucher können das Land weiterhin manuell ändern, sofern nicht eingeschränkt.

📞 Telefonnummer Platzhalter

Passen Sie den Platzhaltertext an, der im Feld Telefonnummer angezeigt wird.

Beispiel

• "Geben Sie Ihre Telefonnummer ein"
• "Mobilfunknummer"

Dies verbessert die Klarheit und fördert die richtige Formatierung.

⚠️ Telefonnummer Fehlermeldung

Stellen Sie die Nachricht ein, die angezeigt wird, wenn eine ungültige Telefonnummer eingegeben wird.

Beispiel

• "Bitte geben Sie eine gültige Telefonnummer ein"

Dies hilft den Besuchern zu verstehen, warum die Einreichung fehlgeschlagen ist.

🔘 Knopftext

Passen Sie den Call-to-Action-Buttontext an, der im Popup angezeigt wird.

Beispiel

• "Jetzt einkaufen"
• "Anspruchsrabatt"
• "Entsperrungsangebot"

Die Verwendung von aktionsorientiertem Text kann die Conversions verbessern.

🏷️ Coupon Code anzeigen

Wählen Sie aus, ob der Gutscheincode nach erfolgreicher E-Mail-Erfassung im Popup erscheinen soll.

verfügbare Optionen:

• Ja - zeigt den Coupon-Code den Besuchern an
• Nein - verbirgt den Coupon-Code-Abschnitt

Dies ist nützlich, wenn Rabatte automatisch angewendet oder extern behandelt werden.

ℹ️ Der Gutscheincode kann nur angezeigt werden, wenn die E-Mail erfasst wird.

🎟️ Couponcode

ℹ️ Dieses Feld ist einmal verfügbar Coupon Code anzeigen ist umgeschaltet auf JA.

Um einen Gutscheincode anzuzeigen, können Sie entweder:

1. Wählen Sie einen der Coupon-Codes, die Sie erstellt haben Shopify Admin → Rabatte durch Klicken auf Select/Change Discount.
2. Sie können eine neue erstellen, indem Sie auf Erstellen Sie einen neuen Discount.

Beispiel

• SAVE10
• WELCOME20
• COUPON123

💸 Rabattantrag

Diese Option steuert, wie der Rabatt angewendet wird. Es hat zwei Möglichkeiten:

1. Der Kunde muss den Rabatt manuell anwenden — Der Kunde muss den Gutscheincode während des Checkouts eingeben, um den Rabatt zu erhalten.
2. Rabatt automatisch anwenden Der Rabatt wird automatisch während des Checkouts angewendet, ohne dass der Kunde den Couponcode eingeben muss.

⚠️ Wichtig:

• Unsere App erstellt oder verwaltet keine Gutscheincodes / Rabatte. Sie müssen sie in Shopify Admin → Rabatte, bevor Sie sie im Popup verwenden.

☑️ Opt-In Checkbox hinzufügen

Wählen Sie aus, ob Sie eine zusätzliche Opt-in-Checkbox im Popup anzeigen möchten.

Dies kann verwendet werden für:

• Genehmigung des Inverkehrbringens
• SMS Zustimmung
• Newsletter-Abonnements
• Bestätigung der Bedingungen

verfügbare Optionen:

• Ja — Zeigt die Checkbox an
• Nein - versteckt die Checkbox

❎ Close Icon

Aktivieren oder deaktivieren Sie das Close-Symbol, das im Popup angezeigt wird.

• Aktiviert Besucher können das Popup manuell schließen
• Behinderte — Entfernen des Close-Icons aus dem Popup

Dies hilft zu kontrollieren, wie ablehnbar das Popup-Erlebnis sein sollte.

✉️ Erfolgsmeldungen

Nachdem ein Besucher seine Daten eingereicht hat, erscheint eine Erfolgsmeldung.

• Success Message: "Willkommen in unserem Laden!"

Sie können auch eine Beschreibung unter der Nachricht mit den nächsten Schritten oder Anweisungen hinzufügen.

🖱️ Button Click Verhalten

ℹ️ Diese Option ist nur verfügbar, wenn "E-Mail-Feld anzeigen" und "Telefonnummernfeld anzeigen" nicht aktiviert sind.

Sie können steuern, was passiert, wenn ein Besucher im Popup auf die CTA-Taste klickt. Es behandelt eine der folgenden Aufgaben:

1. Popup schließen Das Popup wird geschlossen
2. Reveal Coupon Code - Der Coupon-Code wird dem Besucher bekannt gegeben, aber Sie haben den Coupon-Code wie oben im Abschnitt "Coupon-Code anzeigen" beschrieben eingerichtet.
3. Weiterleitung zum Link Wenn Sie dies auswählen, erhalten Sie ein Eingabefeld namens "Link", in dem Sie die URL angeben können, zu der der Besucher umgeleitet wird

🔄 Floating Action Button

Selbst bei manueller Platzierung können Sie eine Floating Action Button das auf der Seite sichtbar bleibt, so dass Besucher das Popup nach dem Schließen wieder öffnen können.

Wählen Sie eine Position:

• Rechts unten rechts
• Unten links
• Bildschirm rechts
• Bildschirm links

Dann treten Sie ein Knopftext - z.B. "Open Offer", "Get Discount" oder "Learn More".

Um den Floating Button vollständig zu deaktivieren, wählen Sie Deaktivieren des Floating Action Buttons.

🎨 Schritt 3 — Anwenden von Custom CSS (optional)

Wechsel zum Design Tab zum Zugriff auf die Custom CSS Schnitt.

Hier glänzen Custom PopUps wirklich. Sie können Ihr eigenes CSS schreiben, um jedes Standard-Styling außer Kraft zu setzen.

📝 CSS-Vorlage

Die App bietet eine vorgefertigte Vorlage mit gemeinsamen Selektoren:

.futureblink-popup
/* Hauptpopup-Container */
}
.futureblink-popup .title
/* Popup Titel */
}
.futureblink-popup.mobile .title
/* Mobile Titel außer Kraft setzen */
}
.futureblink-popup .description
/* Popup Beschreibung */
}
.futureblink-popup.mobile .description
/* Mobile Beschreibung überschreiben */
}
.futureblink-popup .cta-button
/* Call-to-Action-Button */
}
.futureblink-popup.mobil .cta-button
/* Mobile Button Overrheide */
}
.futureblink-popup .close-btn
/* Schlusssymbol */
}
.futureblink-popup.mobile .close-btn
/* Mobile Close Icon Override */
}

Fügen Sie Ihr benutzerdefiniertes CSS in das Feld ein und klicken Sie Beantragen.

⚠️ Wichtige Hinweise

• Custom CSS überschreibt alle anderen Designeinstellungen - verwenden Sie es, wenn Sie eine pixelgenaue Steuerung benötigen
• Mobile spezifische Selektoren lassen Sie Stil anders für Telefonbenutzer
• Klicken Zurücksetzen um die Standard-CSS-Vorlage jederzeit wiederherzustellen

🖱️ Schritt 4 — Setzen Sie die Trigger & Display Regeln

Umzug in die Platzierung/Zielsetzung Registrieren Sie, wann und wo Ihr Custom PopUp erscheint.

Da benutzerdefinierte PopUps manuell platziert werden, gelten die meisten Standard-Triggereinstellungen nicht auf die gleiche Weise. Sie können jedoch weiterhin konfigurieren:

• Anzeigefrequenz - Zeigen Sie jedes Mal, einmal pro Besuch oder Limit mit einer Abklingzeit
• Customer Targeting Login-Status, Kunden-Tags, Lebenszeit
• Geolokalisierung Alle Welt oder bestimmte Länder
• Zeitplanung Optionale Start- und Enddaten

Tiefe Erläuterungen zu jeder Targeting-Option finden Sie in der dedizierten Advanced Targeting-Dokumentation.

✅ Schritt 5 — Speichern und Veröffentlichen

Sobald alles gut aussieht:

1. Klicken Sparen um Ihre Konfiguration zu speichern
2. Klicken Veröffentlichen Um das Popup live auf Ihrer Storefront zu machen

⚠️ Sparen allein macht das Popup für Kunden nicht sichtbar. Sie müssen es veröffentlichen.

⚠️ Für manuelle Platzierung: Denken Sie daran, auch den Code-Snippet zu Ihrem Thema hinzuzufügen - die Veröffentlichung allein wird das Popup nicht automatisch platzieren.

Wenn das App-Embed noch nicht aktiviert ist, wird ein Banner Sie daran erinnern, es in Ihrem Shopify Theme Editor.

🎉 Endergebnis

Einmal erfolgreich konfiguriert:

✅ Ihr Popup erscheint genau dort, wo Sie es in Ihrem Theme platziert haben
✅ Custom CSS bietet Ihnen volle visuelle Kontrolle
✅ Ein Floating Action Button hält das Popup zugänglich (falls aktiviert)
✅ Ihr Popup respektiert Targeting-Regeln, Planung und Geräteeinstellungen
✅ Besucher interagieren mit einem vollständig markenspezifischen Erlebnis

Ihr Custom PopUp ist jetzt live und einzigartig für Sie 🚀

Aktualisiert am: 10/09/2026