Übersicht
Dieser Artikel behandelt das Hinzufügen eines Klaviyo Anmeldeformulars zu einem Shopify Laden. Wir verwenden jedes der kostenlosen Themes von Shopify als Beispiel. Zu jedem Thema gibt es einen Videoüberblick über den Prozess. Wenn du dein Theme hier nicht siehst oder ein benutzerdefiniertes Theme verwendest, haben wir am Ende dieses Leitfadens auch einen Abschnitt, der den grundlegenden Prozess zum Hinzufügen eines Klaviyo Anmeldeformulars zu deinem Shopify Laden beschreibt. Du kannst dir auch die Videos unten ansehen, um den allgemeinen Ansatz zu verstehen.
Finde dein Thema in der Liste unten:
BrooklynBrooklyn
Füge ein Klaviyo Anmeldeformular zu Shopify's kostenlosem Brooklyn-Theme hinzu.
Erzählung
Füge ein Klaviyo Anmeldeformular zu Shopify's kostenlosem Narrative Thema hinzu.
Angebot
Hinzufügen eines Klaviyo Anmeldeformulars zu Shopify's kostenlosem Supply Theme.
Jumpstart
Hinzufügen eines Klaviyo Anmeldeformulars zu Shopify's kostenlosem Jumpstart-Theme.
Debüt
Hinzufügen eines Klaviyo Anmeldeformulars zu Shopify's kostenlosem Debut Thema.
Grenzenlos
Hinzufügen eines Klaviyo Anmeldeformulars zu Shopify's kostenlosem Thema Boundless.
Pop
Hinzufügen eines Klaviyo Anmeldeformulars zu Shopify's kostenlosem Thema Pop.
Einfach
Hinzufügen eines Klaviyo Anmeldeformulars zu Shopify's kostenlosem Simple Theme.
Minimal
Füge ein Klaviyo Anmeldeformular zu Shopify's kostenlosem Minimal-Theme hinzu.
Benutzerdefiniertes Thema
Um ein Klaviyo Anmeldeformular zu einem Shopify Laden hinzuzufügen, folgen wir der gleichen grundlegenden Vorgehensweise, die in den Videos zu jedem der Shopify's kostenlosen Themen oben beschrieben wurde. In diesem Abschnitt werden die Schritte dieses Ansatzes für Benutzer mit benutzerdefinierten Themen beschrieben, die nicht genau mit den obigen Beispielen übereinstimmen. Der grundsätzliche Ablauf ist jedoch ähnlich, also verwende die Videos oben bei Bedarf als Referenz.
- In deinem Klaviyo-Konto findest du die Liste, zu der du Kunden, die sich anmelden, hinzufügen möchtest. Klicke auf die Liste und dann auf die Registerkarte Anmeldeformular.
- Wähle die Registerkarte Standard Einbetten. Auf diesem Bildschirm kannst du deine Stileinstellungen bearbeiten. Nachdem du dein Formular bearbeitet hast, scrolle zum unteren Ende des Bildschirms. Klicke in den Codeblock, um den Formularcode zu kopieren.
- Wechsle zu deinem Shopify Laden-Admin. Klicke auf Online-Shop und wähle Code bearbeiten aus dem Dropdown-Menü Aktionen. Dies öffnet den Shopify Webeditor.
- Als Nächstes blätterst du zum Ordner Snippets und klickst auf Ein neues Snippet hinzufügen. Nenne dein neues Snippet z.B. "Klaviyo-Form". Füge deinen Klaviyo-Formularcode in das neue Snippet ein und klicke auf Speichern. Dein Klaviyo Formularcode ist jetzt als Themendatei in deinem Shopify Laden gespeichert.
- Als Nächstes referenzieren wir deine neue Snippet-Datei in der Fußzeile deines Ladens. Suche nach der Datei
footer.liquidund klicke darauf, um sie im Webeditor zu öffnen. - Finde den Bereich in deiner
footer.liquid-Datei, in dem du dein Formular einfügen möchtest, und referenziere dein Formular mit der folgenden Codezeile, wobei "Klaviyo-Form" dem Namen deines neuen Snippets entspricht.{% include 'klaviyo-form' %} - Der letzte Schritt ist das Bereinigen von bestehenden Anmeldeformularen. Scanne die Datei zunächst auf alle vorhandenen
<form>Elemente. Wenn du welche findest, markiere das öffnende und schließende Formularelement sowie den Code dazwischen und drücke⌘ /, um den Code auszukommentieren. - Suche nach allen Anweisungen, die ein Standard-Newsletter-Snippet enthalten. Diese werden ähnlich wie die folgenden aussehen:
{% include 'newsletter-form' %}
Danach sollte dein Formular auf deiner Storefront in der Fußzeile zu sehen sein. Du kannst das Formular testen, indem du eine E-Mail-Adresse übermittelst, die Bestätigungs-E-Mail in deinem Posteingang öffnest und akzeptierst und deine Liste in Klaviyo überprüfst, um sicherzustellen, dass die E-Mail-Adresse der Liste hinzugefügt wurde.