> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Wie man benutzerdefinierte PopUps einrichtet > ℹ️ **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 🚀 ---