Shopify App: CleverReach Double Opt-In Anmeldeformulare in Ihren Shop einbinden

Wir haben eine App entwickelt mit der Sie schnell und einfach Ihren Shopify Shop mit unserem E-Mail Marketing Tool CleverReach verbinden und mit Ihrem E-Mail Marketing durchstarten können.

Die Integration hat viele hilfreiche Funktionen, zum Beispiel wird automatisch bei der Installation ein Double Opt-In Anmeldeformular für Ihren Newsletter Versand angelegt.

Bei der App Installation können Sie auswählen, ob eine neue Empfängerliste für die Verbindung erstellt werden soll, oder Sie können eine bereits bestehende Empfängerliste aus Ihrem CleverReach Account auswählen.

Je nachdem wie Sie sich entscheiden, haben Sie in Bezug auf die Anmeldeformulare für Ihren Newsletter Versand folgende Optionen:

  1. Sie haben eine bestehende Empfängerliste aus CleverReach bei der Installation ausgewählt und haben bereits ein Formular für diese Liste in CleverReach erstellt? Nach der Installation können Sie das Double Opt-In Anmeldeformular in Ihrem Plugin Dashboard in Shopify auswählen und in Ihrem Shopify Shop einfügen.
  2. Sie haben bei der Installation ausgewählt, dass eine neue Empfängerliste erstellt werden soll? Unsere App erstellt während der Installation automatisch ein Double Opt-In Anmeldeformular für Sie! Das Formular trägt den gleichen Namen wie Ihre neue Empfängerliste.
  3. Bei der Verbindungsherstellung möchten Sie das eine bestehende Empfängerliste aus CleverReach verwendet wird, aber Sie haben noch kein Formular für die Liste in CleverReach angelegt? Kein Problem! Unsere App erstellt automatisch ein Double Opt-In Formular während der Installation für Ihre Empfängerliste. Das Formular heißt wie Ihre Empfängerliste.

Weitere Formulare können Sie bei einem kostenpflichtigen Account in CleverReach® erstellen und mit Ihrer Empfängerliste für Shopify verknüpfen. Dadurch können Sie mehrere Formulare für die Anmeldung zum Newsletter nutzen.

Wie Sie ein bereits bestehendes Formular in CleverReach kopieren, erfahren Sie weiter unten in diesem Beitrag.

Generell können Sie in Shopify ein Anmeldeformular für Ihren Newsletter durch den Theme Editor in Ihren Shop einbinden, als Proxy Page und ein Formular kann in Seiten eingebunden werden.

Einfügen eines Double Opt-In Anmeldeformulars über den Theme Editor

Um das CleverReach®-Formular mit dem Theme-Editor einzufügen, gehen Sie in Ihrem Shopify Account unter [Online Store] auf den Abschnitt [Themes].

Es wird Ihnen das aktuelle Theme angezeigt, welches in Ihrem Shopify Shop aktiv ist.

Um das Seitenlayout zu bearbeiten, klicken Sie auf [Anpassen]:

Bildschirmfoto_2020-09-11_um_11.04.29.png

Es wird der Theme Editor geöffnet, in dem Sie links alle Abschnitte sehen können, die sich derzeit auf der Seite befinden.

Um einen neuen Abschnitt hinzuzufügen, klicken Sie auf den Button [Abschnitt hinzufügen] am unteren Rand dieser Liste.

Bildschirmfoto_2020-09-11_um_08.56.25.png

Es werden Ihnen verschiedene Profiltypen vorgestellt, darunter unter [CleverReach] Ihre CleverReach®-Formulare.

Hier werden alle Formulare angezeigt, die Sie in Ihrem Account für die Empfängerliste Ihrer Shopify Kunden angelegt haben.

Wählen Sie im nächsten Schritt das Formular aus, welches Sie gerne auf Ihrer Seite einfügen möchten.

Bildschirmfoto_2020-09-11_um_09.59.59.png

Im nächsten Fenster können Sie:

  • die Formularüberschrift bzw. den Titel
  • die Unter-Überschrift
  • das Formular

in CleverReach® bearbeiten.

Hinweis: Wenn Sie auf den Link klicken, gelangen Sie direkt in das Formular in Ihrem CleverReach® Account, wo Sie z. B. weitere Abfrage Elemente zum Formular hinzufügen können.

Sie können live im Editor Ihre Anpassungen sehen und mitverfolgen. Wenn Sie mit dem Design des Formulars fertig und zufrieden sind, können Sie die Änderungen speichern und das Design veröffentlichen.

Bildschirmfoto_2020-09-11_um_10.48.30.png

Double Opt-In Anmeldeformular als Proxy Page einfügen

Gehen Sie zunächst in Shopify auf das CleverReach Dashboard und zu dem Reiter [Formulare]. Wählen Sie das Formular aus, dass Sie einfügen möchten.

Klicken Sie im nächsten Schritt auf das Symbol mit den drei Punkten ("...") für weitere Optionen und dann im Dropdown-Menü auf [Seite hinzufügen]:

Bildschirmfoto_2020-09-07_um_15.18.46.png

In dem sich öffnenden Dialog sehen Sie einen Link, der zu jedem Seiteninhalt oder jeder Navigation hinzugefügt werden kann. Klicken Sie auf die Schaltfläche [Kopieren], um diesen Link in die Zwischenablage zu kopieren.

Bildschirmfoto_2020-09-07_um_15.19.09.png

Hinweis: Wenn Sie die Proxy-URL unter dem Anwendungsabschnitt ändern, verwenden Sie bitte eine angepasste Basis-Proxy-URL für den Formularlink. Zu dieser Möglichkeit gelangen Sie, wenn Sie in Shopify auf [Apps] und dann bei unserem CleverReach Plugin auf [Über] klicken: 

Bildschirmfoto_2020-09-07_um_15.21.34.png

Wenn Sie beispielsweise eine Newsletter-Seite zur Navigation hinzufügen möchten, klicken Sie auf [Online Store > Navigation] und wählen Sie das gewünschte Menü aus.

Bildschirmfoto_2020-09-07_um_15.22.16.png

Klicken Sie im nächsten Schritt auf die Schaltfläche [Add] (Menüpunkt hinzufügen).

Bildschirmfoto_2020-09-07_um_15.30.42.png

Geben Sie den gewünschten Menüpunktnamen ein und fügen Sie den Formularlink in das Linkfeld ein.

Bildschirmfoto_2020-09-07_um_15.23.17.png

Nach dem Speichern der Änderungen wird das Anmeldeformular in Shopify angezeigt.

Screenshot_7.png

Schon ist Ihr Double Opt-In Anmeldeformular auf der gewünschten Seite eingebunden und Ihre Kunden können sich direkt für Ihren Newsletter anmelden.

Double Opt-In Anmeldeformular in Pages (Seiten) einfügen

Die dritte Möglichkeit ein CleverReach®-Formular in eine Seite einzufügen, besteht darin, einen Formularausschnitt zu kopieren und ihn manuell in den Seitencode einzufügen.

Gehen Sie in Shopify auf [Apps], auf das [CleverReach] Plugin und dann auf den Reiter [Formulare].

Hier wählen Sie das Formular aus, welches Sie in Shopify einfügen möchten. Gehen Sie bei dem jeweiligen Formular rechts auf das Drei-Punkte-Symbol ("....") für weitere Optionen und klicken Sie dann auf [Formular hinzufügen] im Dropdown-Menü.

Bildschirmfoto_2020-09-11_um_11.36.18.png

In dem sich öffnenden Fenster sehen Sie einen HTML-Code-Ausschnitt, der in die Seite eingefügt wird, auf der Sie Ihr Formular einfügen möchten.

Klicken Sie auf den Button [Kopieren], um den Code in die Zwischenablage zu kopieren.

Bildschirmfoto_2020-09-11_um_10.50.55.png

Gehen Sie im nächsten Schritt zurück zur Shop-Administration und öffnen Sie die Seite (Blog, Produkt, Sammlung usw.), in der Sie das CleverReach®-Formular einfügen möchten.

Wenn Sie einen neuen Blog Beitrag erstellen und ein Formular hinzufügen möchten, können Sie beispielsweise den Code selber bearbeiten und ein HTML-Element hinzufügen. Klicken Sie bei der Erstellung des Beitrags im Editor auf die Schaltfläche mit den Tags ("<>"), um den Seitencode zu öffnen.

Bildschirmfoto_2020-09-11_um_12.04.36.png

Sie können nun den HTML-Code aller Elemente dieser Seite sehen.

Fügen Sie den kopierten Code an der gewünschten Stelle ein und speichern Sie die Änderungen.

mceclip7.png

Nach dem Speichern können Sie auf die Schaltfläche [Ansicht] klicken, um die Seite im Schaufenster zu sehen. Jetzt können Sie das CleverReach®-Formular auf Ihrer Seite sehen und können schnell und einfach Newsletter Abonnenten dazu gewinnen.

Formular in Themenseiten einfügen (erweiterte Möglichkeit für User mit Programmierkenntnissen)

Eine weitere Möglichkeit ein CleverReach®-Formular in eine Theme Seite einzufügen, besteht darin, einen Formularausschnitt zu kopieren und ihn manuell in den Themencode einzufügen.

Gehen Sie hierfür auf [Apps - CleverReach E-Mail Marketing] in Shopify und in den Formularbereich.

Wählen Sie dort das Formular aus, das Sie einfügen möchten und klicken Sie auf das Drei-Punkte-Symbol ("....") für weitere Optionen.

Im nächsten Schritt klicken Sie auf [Formular hinzufügen] im Dropdown-Menü.

Bildschirmfoto_2020-09-11_um_11.36.18.png

In dem sich öffnenden Dialog sehen Sie einen HTML-Code-Ausschnitt, der in die Seite eingefügt wird, auf der Sie Ihr Anmeldeformular für Ihren Newsletter einbinden möchten.

Klicken Sie auf den Button [Kopieren], um den Code in die Zwischenablage zu kopieren.

Bildschirmfoto_2020-09-11_um_10.50.55.png

Gehen Sie zurück zur Shop-Administration und öffnen Sie [Online Shop -> Themes -> Aktuelles Theme -> Anpassen].

Bildschirmfoto_2020-09-11_um_11.04.29.png

Klicken Sie auf [Theme Aktionen] und dann auf [Code bearbeiten].

Bildschirmfoto_2020-09-11_um_11.38.48.png

Wählen Sie den Seitentyp des Themas (Blog, Produkt, Sammlung usw.) aus und fügen Sie den CleverReach Formularausschnitt an die gewünschte Stelle ein.

mceclip12.png

Das eingefügte Formular erscheint nun auf allen Seiten des ausgewählten Seitentyps (z.B. Produkt, Blog, Sammlung).

mceclip13.png

Bestehendes Double Opt-In Formular in CleverReach kopieren

Wenn Sie ein bestehendes Formular in Ihrem kostenpflichtigen CleverReach Account haben, dass Sie in der Shopify-Integration verwenden möchten, können Sie dieses Formular kopieren. Alle Einstellungen und Stile werden in ein neues Formular kopiert.

Schritt 1: Klicken Sie bei dem Formular rechts auf den Pfeil, damit sich das Drop Down Menü öffnet:

Bildschirmfoto_2019-12-13_um_10.03.01.png

Schritt 2: Klicken Sie im nächsten Schritt auf [Kopieren]:

Bildschirmfoto_2019-12-13_um_10.03.16.png

Schritt 3: Geben Sie einen Namen für das Formular ein und wählen Sie Ihre Empfängerliste für Shopify aus, die zu der Verbindung gehört.

Bildschirmfoto_2019-12-13_um_09.59.06.png

Klicken Sie auf [Formular kopieren], um Ihr Formular zu kopieren.

Bildschirmfoto_2020-08-05_um_16.57.40.png

Schritt 4: Das neu erstellte Double Opt-In Formular kann jetzt in Ihrem Shopify Account verwendet und in Ihrem Shopify Shop für die Newsletter Anmeldung eingebunden werden.

Bildschirmfoto_2020-08-05_um_16.57.21.png

Hinweis: Sie können schnell und einfach den nächsten Newsletter aus Shopify heraus an Ihre Kunden versenden. Klicken Sie hierfür unter [Kunden] den Reiter [Weitere Aktionen] auf. Dort haben Sie einen Button, um Ihren Newsletter schnell und einfach an Ihre Kunden zu senden:

Bildschirmfoto_2020-04-09_um_15.21.47.png

Hilfe & Support

Sollten Sie Fragen haben oder Hilfe benötigen, können Sie gerne jederzeit unser Service Team kontaktieren.