Shopify Installation (deutsch)

Diese Installationsanleitung erläutert, wie Du das Leafer Snippet erfolgreich konfigurierst und in Deinem Shopify Shop installierst. Bitte folge den Arbeitsschritten in der korrekten Reihenfolge.

Import

Im ersten Schritt muss ein Produkt im Shopify Shop angelegt werden. Wir haben dafür eine Importdatei vorbereitet, die nur in den Shopify Shop importiert werden muss.

Importdatei Download

Die Datei kannst Du hier herunterladen in deinem Leafer Account finden.

Die Import Funktion findest Du in Deinem Shopify Shop unter dem Menüpunkt Produkte → Alle Produkte(1). Hier klickst Du oben rechts auf Importieren (2) und lädst die Datei hoch.

Bitte lasse den Haken in der Checkbox weg und klicke auf den Button mit der Beschriftung Hochladen und fortfahren. Daraufhin öffnet sich ein Bestätigungsmenü, das ungefähr wie im folgenden Bild aussieht.

Bitte achte darauf, dass die Angaben im Bestätigungsmenü den Angaben in etwa unserem Screenshot entsprechen und klicke dann auf Produkte importieren. Dadurch startet der Import, der auch innerhalb einer Minute abgeschlossen sein sollte.

Es werden drei Leafer Produkte importiert. Wenn Du nun in Deinem Shop nach dem Begriff “Leafer” suchst, dann sollten die neuen Produkt erscheinen. Dies bestätigt, dass der Import erfolgreich abgeschlossen wurde.

Varianten ID herausfinden

Im nächsten Schritt musst Du die Varianten ID herausfinden.

Bitte öffne im nächsten Schritt das Leafer Produkt in der Produktverwaltung Deines Shopify Shops und warte bis die Seite vollständig geladen ist. Klicke dann an das Ende der URL im URL Fenster Deines Browsers und ergänze dort die Endung .xml. (s. folgender Screenshot) und drücke Enter.

Durch das Drücken der Eingabetaste (Enter) öffnet sich eine XML Ansicht das Produktes, der die Varianten ID entnommen werden kann. (s. nächster Screenshot).

Hinweis

Die Varianten ID wird in jedem Shop individuell erzeugt. Es ist wichtig, dass Du die gesamte ID korrekt kopierst, damit die Installation des Snippets erfolgreich ist.

Konfiguration

Im nächsten Schritt konfigurierst Du Dein Leafer Snippet. Bitte besuche dazu https://shopify.leafer.de und folge den Fragen im Formular:

Snippet Typ

Du hast die Wahl zwischen zwei Anzeigearten: dem mitscrollenden Sticky Snippet und dem an einer bestimmten Stelle integrierbaren Static Snippet:

Sticky Snippet

Das Sticky Snippet befindet sich auf allen Seiten des Shops an der unteren rechten Seite des Browserfensters.

Static Snippet

Das Static Snippet kann an einer (oder mehreren) gewünschten Stelle(n) im Shop eingefügt werden. Der empfohlene Ort dafür ist direkt auf der Warenkorbseite, sodass Kunden das Snippet sehen, bevor Sie den Checkout betreten.

Button Verhalten

Du kannst entscheiden was passieren soll, sobald ein Kunde den Button zum Hinzufügen eines Baumes anklickt:

• Zum Warenkorb weiterleiten - Durch den Klick wird das Leafer Produkt in den Warenkorb gelegt und der Kunde automatisch zum Warenkorb geleitet.
• Seite aktualisieren - Durch den Klick wird das Leafer Produkt in den Warenkorb gelegt und automatisch ein Neuladen der Seite ausgelöst.
• Keine weitere Aktion - Durch den Klick wird nur das Leafer Produkt in den Warenkorb gelegt.

Kostenverteilung

Bitte wähle hier die Option aus, für die Du Dich bereits in Schritt 2 entschieden hast. Solltest Du Dich umentscheiden wollen, dann musst Du auch Schritt 2 wiederholen und die korrekte Produkt ID aus Shopify herauskopieren.

Varianten ID

Bitte kopiere hier die in Schritt 2 herausgesuchte Varianten ID in das Feld. Achte dabei darauf keine überzähligen Zeichen oder Leerzeichen einzufügen.

Dein Snippet

Durch die korrekte Auswahl und Eingabe der Felder wird hier automatisch der Leafer Snippet Code generiert. Bitte kopiere diesen nun in die Zwischenablage, um das Snippet im Folgenden im Shop zu installieren.

Snippet in Theme einfügen

Gehe nun über Onlineshop → Themes ins theme Menü (1) Deines Shopify Shops und mache eine Sicherheitskopie des aktuellen Themes (2). Danach kannst Du den Theme Code über Code bearbeiten (3) öffnen.

Hinweis

Jedes Shopify Theme hat einen anderen Quellcode und andere Dateibezeichnungen. In dieser Anleitung installieren wir das Snippet im Shopify Standardtheme. Der Quellcode und Aufbau sowie die Dateibezeichnungen können bei Deinem Theme abweichen.

Installation des Sticky Snippets

Bitte folge diesen Anweisungen, wenn Du Dich in Schritt 3 für das Sticky Snippet entschieden hast:

Suche nach der Datei mit dem Namen theme.liquid (1) und füge das in Schritt 3 kopierte Snippet VOR dem </body> Tag ein (2).

Klicke danach oben rechts auf Speichern (3).

Installation des Static Snippets

Bitte folge diesen Anweisungen, wenn Du Dich in Schritt 3 für das Static Snippet entschieden hast:

Hinweis

Beim Static Snippet hast Du die Freiheit selbst zu entscheiden an welchen Stellen im Shop das Snippet angezeigt werden soll. Wir zeigen hier die Installation beispielhaft anhand der Warenkorbseite.

Um das Snippet unterhalb der Warenkorbinhalte anzuzeigen gehen wir zum Warenkorbtemplate (1) und fügen das Snippet dort direkt vor dem schließenden </div> ein (2).

Klicke danach oben rechts auf Speichern (3).

Entsprechend kann das Static Snippet auch auf jeder anderen Seite des Shops eingebunden werden.

Prüfen

Nach dem Klick auf Speichern erscheint das Snippet in Deinem Shop. Bitte prüfe noch einmal kurz, ob das Snippet auch korrekt angezeigt wird, indem Du den Shop aufrufst.

Hinweis

Sollte das Snippet nicht korrekt angezeigt werden, dann aktiviere bitte die in Schritt 4 erstellte Theme Kopie und wende Dich an den Leafer Support (s.u.).

Webhook einrichten

Als letzten schritt wird der Webhook eingerichtet, um die Bestellungen zu übertragen.

Einstellungen aufrufen

Gehe unter Settings in die Notifications.

Webhook anlegen

1. Lege einen neuen webhook an
2. Waehle Order creation
3. Sekretiere JSON
4. Hinterlege den API Endpunkt zu Leafer
5. Waehle die letzte Version von Shopify

Token kopieren

Hinterlege den Verifizierungstoken bei Leafer im B2B Bereich

Tipps

Leafer Produkt von Suchmaschinen ausnehmen

Das in Schritt 1 importierte Leafer Produkt kann gegebenen Falles von Suchmaschinen wie Google erfasst werden und unter den Suchergebnissen erscheinen. Dies lässt sich vermeiden, indem man das Produkt mit einem besonderen Metafield versieht.

Metafields sind Freifelder, die man in Shopify z.B. für Produkte oder Collections anlegen kann.

Um Metafields anlegen und bearbeiten zu können benötigt man eine Metafield App. Im Shopify App Store gibt es eine große Auswahl an Apps - inklusive kostenloser Optionen: https://apps.shopify.com/search?q=metafields

Installiere eine dieser Apps und öffne das Leafer Produkt mit dem Metafield Editor. Füge dann ein Metafield mit den folgenden Eingaben hinzu:

Name	Wert
namespace	seo
key	hidden
value	1
value_type	integer

Durch das Speichern dieses Metafields teilst Du dem Google Crawler mit, dass dieses Produkt nicht indiziert werden soll.

Leafer Produkte aus automatischen Kategorien ausschließen

Um das in Schritt 1 importierte Leafer Produkt aus automatisch befüllten Kategorien auszuschließen brauchen diese lediglich eine Logik Ergänzung. Gehe zur entsprechenden Kategorie und füge unter “alle Bedingungen” die folgende Bedingung hinzu:

Produkttitel - enthält nicht - Leafer

Dadurch wird das Leafer Produkt automatisch aus der Kategorie ausgeschlossen.