Shopify - Yook Tech Guide
Starte mit Yook und folge dieser Schritt-für-Schritt-Anleitung, die alles von der Installation über das Testen bis hin zum Livegang abdeckt. Die Einrichtung der Shopify App dauert ca. 15-30 Minuten.
Yook in Shopify App Store
Um Yook zu installieren, kannst du einfach den Shopify App Store besuchen: https://apps.shopify.com/yook.
Die Installation erfolgt in vier Schritten.
1- Hinzufügen des Produkts "Klimabeitrag".
Um deinen Kunden die Möglichkeit zu geben, einen Beitrag zu leisten, muss die Anwendung ein Produkt in deinem Katalog erstellen. Wir versuchen, dieses Produkt in deinem Shop nicht sichtbar zu machen. Um dieses Problem zu lösen, kannst du dich an Klimabeitrag aus der Produktliste entfernen wenden.
2- Installation in deinem Theme
Je nach Art deines Themes (OS2.0 oder älter) wirst du von unserem Installer dazu angeleitet, Yook zu deiner Customer Journey hinzuzufügen.
3- Konfiguration von Yook
Du kannst nun die App mit der Yook-API verbinden und deine individuelle Klimabeitragsoption auswählen.
API-Schlüssel eingeben
Unter "Yook-Umgebungen" kannst du sowohl den API-Schlüssel für die LIVE- als auch für die TEST-Umgebung eingeben. Solange du dich im Testmodus befindest, wähle bitte TEST in der Dropdown-Liste "Aktuelle Umgebung" und klicke auf "Speichern". Sobald du dich entscheidest, live zu gehen, wähle "LIVE" und speichere deine Änderungen.
If you didn't receive the API keys yet, please contact us at [email protected].
Variante für Klimaausgleich wählen
Für den Kauf des Klimaausgleichs bieten wir dir drei Varianten an, die du für deinen Shop unter Variante einstellen kannst.
Variante 1 | Variante 2 | Variante 3 |
Nur Shop | Nur Kund*innen | Shop und Kund*innen |
Der Shop leistet mit jeder Bestellung einen Klimaausgleich zum Festpreis. | Die Kund*innen können wählen, ob sie selbst für die Bestellung einen Klimaausgleich erwerben. | Der Shop leistet mit jeder Bestellung einen Klimaausgleich und die Kund*innen können wählen, ob sie selbst für die Bestellung auch noch einen Klimaausgleich erwerben. |
Berechnungsmethode für Klimaausgleich wählen
Um den Ausgleichsbetrag zu berechnen, den deine Kund*innen für ihre Bestellung zahlen können, kannst du eine dieser beiden Methoden wählen:
Festbetrag (brutto)
Unabhängig davon, wie viel deine Kund*innen kaufen, wird der Wert für den Klimaausgleich immer gleich bleiben. Der erwartete Preis sollte die Mehrwertsteuer enthalten.
Stelle den Klima-Beitragstyp auf "FIXED" und trage den Wert des Klima-Beitrags in das Feld "Customer Offset Amount".
Prozentsatz
Der angegebene Prozentsatz wird verwendet, um den Wert des Klimaausgleichs abhängig vom Gesamtwert des Warenkorbs zu berechnen.
Setze den Klima-Beitragstyp auf "PERCENTAGE" und trage den Prozentwert in das Feld "Customer Offset Amount".
Unsere Empfehlung:
Starte mit einem Festbetrag und lege den Klimabeitrag auf unter 1 € fest. Wenn es keine großen Unterschiede zwischen den Warenkorbwerten deiner Kund*innen gibt, kannst du auch einen Prozentsatz von 1% des Warenkorbs wählen.
Grundsätzlich wählen Kund*innen häufiger einen Klimabeitrag aus, wenn auch der Shop mit einem eigenen Anteil unterstützt.
Bitte stelle sicher, dass du alle deine Änderungen speicherst.
4- Aktivierung von Yook
Dieser letzte Schritt ermöglicht es dir, Yook für deine Nutzer sichtbar zu machen (oder zu verstecken).
Awesome! You have now successfully installed the Yook app and connected it to the Yook backend!
Details zur Integration in das Theme
Um Yook in dein Shop-Theme zu integrieren, musst du das Yook-Widget in deine Warenkorb-Seite integrieren. Dafür hast du zwei Möglichkeiten:
A: OS 2.0 Theme
B: Nutze den Yook Wizard
C: Integriere manuell ein Code-Snippet in dein Theme (Liquid-Template)
Wenn du eine normale Warenkorb-Seite verwendest, brauchst du wahrscheinlich nur die Anweisungen unter B befolgen. Wenn du eine "Schublade" (Drawer) für deinen Warenkorb verwendest, befolge die Anweisungen unter C.
A - OS 2.0 Theme
Die neuen Shopify OS 2.0-Themen machen die Integration von externen Anwendungsblöcken sehr einfach.
Folge unseren Anleitungen :
B - Theme per Wizard integrieren
Für Designs vor OS2.0 kannst du unseren wysiwyg (What You See Is What You Get)-Wizard verwenden, mit dem du die Position unseres Widgets auswählen und dann sehen kannst, wie es aussehen wird. Klicke dazu einfach auf "Installieren":
Folge den Anweisungen am unteren Rand der neu geöffneten Registerkarte (Warenkorbvorschau).
Wähle den Bereich aus, in den du das Yook-Widget integrieren möchtest.
Du siehst nun eine Vorschau des Yook-Widgets. Bestätige (oder widerrufe) deine Wahl über den grünen (oder roten) Kreis oben rechts im Widget.
Zum Schluss speichere deine Änderungen und ...
Voilà! Das Yook-Widget ist jetzt in deinem ausgewählten Thema vollständig aktiviert!
C - Theme manuell integrieren
Diese Integration erfordert einen Eingriff in den Code deines Themes. Wenn du dich damit nicht wohl fühlst oder Hilfe brauchst, kontaktiere uns unter [email protected].
Du musst zunächst die gleichen ersten Schritte wie bei B- Theme Per Wizard integrieren befolgen:
Klicke dazu einfach auf "Installieren":
Folge den Anweisungen am unteren Rand der neu geöffneten Registerkarte (Warenkorbvorschau).
An dieser Stelle schließt du den Assistenten, indem du unten rechts auf das Kreuz klickst.
Dann musst du dein Theme bearbeiten und herausfinden, wo du unsere Widget einfügen willst. Sobald du herausgefunden hast, welche Datei deines Themes du bearbeiten musst, fügst du den folgenden Code-snippet an der Stelle ein, an der du das Widget sehen möchtest.
Du kannst die CSS-Klasse des zukünftigen Widgets erweitern, indem du Folgendes schreibst:
Klimabeitrag aus der Produktliste entfernen
Die Yook-App für Shopify verwendet reguläre Produkte, um die Klimabeiträge zu verwalten. Diese Produkte (und ihre Varianten) werden erstellt, wenn du die Yook-App zum ersten Mal installierst. Dies kann dazu führen, dass die Yook-Klimabeiträge in deinen Produktlisten erscheinen.
Eine einfache Lösung besteht darin, alle Yook-Produkte aus deinem Shopify-Produktkatalog (genannt "Collections") zu entfernen. Gehe dafür zunächst auf "Produkte" und klicke dort auf "Collections".
Wähle dann die Collection aus, die du ändern möchtest, und füge unter "Bedingungen" eine Regel zum Ausschluss von Yook-Produkten hinzu, etwa so: Produktanbieter" ist nicht gleich "Yook". Speichere dann die Änderungen.
Rabatte auf Klimabeiträge deaktivieren
Wir empfehlen, die Rabatte auf die Yook-Klimabeiträge zu deaktivieren. Dazu kannst du entweder die zuvor erstellte Collection verwenden (die bereits Yook-Produkte ausschließt) oder eine eigene erstellen.
Texte anpassen
Wenn du dich (nach einem Gespräch mit unserem Support-Team [email protected]) dafür entscheidest, die Kommunikation innerhalb des Yook-Widgets anzupassen, kannst du diese Änderungen über die Registerkarte "Translations" vornehmen.
Wähle zunächst die Sprache(n), für die du die Änderungen vornehmen möchtest.
Wähle dann die Textabschnitte aus, die du ändern möchtest.
Du kannst anschließend den Text bearbeiten und auch HTML-Tags für zusätzliche Gestaltung verwenden. Um den Betrag des Klimabeitrags in der lokalen Währung anzuzeigen, kannst du den Platzhalter {offset} verwenden.
Speichere deine Änderungen und wiederhole den Vorgang, bis du mit dem Ergebnis zufrieden bist.
Glückwunsch! Du hast die vollständige Einrichtung der Yook-App in deinem Shopify-Shop abgeschlossen und bietest nun Klimaschutz zum Mitmachen an 🎉
Last updated
