So installieren Sie Yaco Progress Bar in Ihrem Shopify-Shop

App installieren und der Einrichtungsanleitung folgen

Installieren Sie Yaco Progress Bar aus dem Shopify App Store und öffnen Sie die App: Die Startseite zeigt eine Einrichtungsanleitung mit drei Schritten und einem optionalen vierten. Gehen Sie sie der Reihe nach durch.

Schritt	Wozu er dient	Schaltfläche
1. Stufen & Rabatte konfigurieren	Die Liste der Stufen öffnen, um sie zu prüfen oder zu bearbeiten: Der Schritt wird abgehakt, sobald Sie sie geöffnet haben	Zur Konfiguration
2. In Shopify aktivieren	Das App-Embed in Ihrem Theme aktivieren	App-Einbettung aktivieren oder Zur Theme-Integration
3. In das Haupttheme integrieren	Festlegen, wo der Balken erscheint (Warenkorb-Drawer, Warenkorbseite, Produktseite)	Fortschrittsbalken platzieren
4. Ihr Plan (optional)	Sehen, wo Ihre kostenlose Testphase steht, oder einen bezahlten Plan wählen	Pläne ansehen

Nach einer Erstinstallation wird eine Willkommens-E-Mail an jede Person gesendet, die Yaco in Ihrem Shop geöffnet hat, in ihrer Sprache (an die E-Mail-Adresse Ihres Shops, falls es noch niemand geöffnet hat). Sie fasst die gefundenen Stufen und die offenen Schritte zusammen.

Die für Sie angelegten Stufen prüfen

Bei der Installation sieht sich die App die Angebote an, die in Ihrem Shop bereits eingerichtet sind: Gratisversand und jeden aktiven automatischen Rabatt mit einem Minimum (einem Betrag oder einer Artikelanzahl), „Kaufe X, erhalte Y“ inbegriffen. Jeder Rabatt wird zu einer eigenen Stufe, damit der Balken ankündigt, was Ihr Checkout bereits gewährt. Ein Rabatt „Kaufe X, erhalte Y“, der ab einem Einkaufsbetrag einen Artikel eines einzigen Produkts schenkt („ab 100 € Einkauf die Tasche gratis“ oder „20 € Rabatt auf die Tasche“), wird zu einer Stufe Gratisprodukt: Der Balken legt dieses Produkt in den Warenkorb, sobald der Betrag erreicht ist, und Ihr Shopify-Rabatt bestimmt weiterhin seinen Preis (Meinen Shopify-Rabatt verwenden). Andere Rabatte „Kaufe X, erhalte Y“ (eine Anzahl zu kaufender Artikel, mehrere Produkte oder eine Kollektion zur Auswahl) werden zu einer Stufe, die nur den Fortschritt zeigt. Ein Rabatt, der auf bestimmte Produkte beschränkt ist, bekommt einen eigenen Balken. Ein Rabatt, der einem Kundensegment oder bestimmten Kunden vorbehalten ist, wird nur importiert, wenn die App bereits Zugriff auf Ihre Kunden hat, den sie erst später anfragt: Bei der Installation wird er daher meist übersprungen. In diesem Fall listet die Startseite der App diese Rabatte auf: Klicken Sie auf Kundenzugriff erlauben und hinzufügen, bestätigen Sie in Shopify, und die App fügt sie als Stufen hinzu, die nur diese Kunden sehen. Der Support kann sie auch später importieren. Rabatte anderer Apps werden nicht importiert: Die App kann ihre Bedingungen nicht lesen. Der erste Schritt der Anleitung listet die Stufen unter Wir haben diese Stufen aus deinem Shop vorkonfiguriert: auf. Klicken Sie auf Stufen ansehen, um die Liste zu öffnen und sie zu prüfen.

Wird kein Angebot gefunden, startet der Balken mit einer Beispielstufe für Gratisversand. Dieses Beispiel ändert Ihre Shopify-Versandtarife nicht: Ersetzen Sie es durch Ihr echtes Angebot oder lesen Sie Gratisversand-Balken, um eines einzurichten. Weitere Prämien legen Sie wie unter Stufe hinzufügen beschrieben an.

Importierte Stufen folgen ihrem Rabatt

Eine aus einem automatischen Rabatt importierte Stufe bleibt mit ihm verknüpft. Wenn Sie den Rabatt in Shopify ändern (Mindestbetrag, Wert, Produkte oder Kollektionen, geschenktes Produkt, berechtigte Kunden, Daten), folgt die Stufe innerhalb weniger Sekunden, und mit ihr der Balken in Ihrem Shop. Haben Sie eine Einstellung der Stufe selbst in der App geändert (ihren Betrag, ihren Namen oder ihre Texte, ihre Daten, ihren Balken, ihr geschenktes Produkt), behält die App Ihre Änderung und überschreibt diese Einstellung nicht mehr; die übrigen folgen weiter dem Rabatt. Wenn Sie den Rabatt in Shopify deaktivieren, erhält er ein Enddatum: Ab diesem Datum wird die Stufe nicht mehr angezeigt.

In der Stufe zeigt ein Hinweis Mit Ihrem Shopify-Rabatt „…“ verknüpft, mit einer Schaltfläche, die den Rabatt in Shopify öffnet. Die Rabattauswahl der Stufe lautet Meinen Shopify-Rabatt verwenden (Ihr Rabatt gewährt den Vorteil, die Stufe zeigt ihn an) oder Rabatt von Yaco verwalten lassen (die App erstellt einen eigenen Rabatt, mit den Einstellungen hinter dem Badge Mehr Funktionen). Wenn Sie zu Rabatt von Yaco verwalten lassen wechseln, fragt die App, was mit Ihrem Rabatt geschehen soll: Lassen Sie „…“ beim Speichern in Shopify deaktivieren angehakt, damit Ihren Kunden der Vorteil nicht doppelt angeboten wird. Es wird nichts gelöscht, und die App merkt sich die Daten des Rabatts. Das Kästchen ist nicht angehakt, wenn die Stufe nicht alle Kunden Ihres Rabatts erreicht (Märkte, Traffic-Quelle, Warenkorbbedingungen), und gesperrt, wenn eine andere Stufe den Rabatt noch verwendet. Lassen Sie Ihren Rabatt aktiv, bleibt der Hinweis Ihr Rabatt „…“ ist noch aktiv auf der Stufe, bis Sie ihn in Shopify deaktivieren. Eine von Yaco verwaltete Stufe folgt Ihrem Rabatt nicht mehr. Wenn Sie zurück zu Meinen Shopify-Rabatt verwenden wechseln, wird der Rabatt der App beim Speichern entfernt, und die App bietet an, Ihren Rabatt wieder zu aktivieren: mit seinen früheren Start- und Enddaten, wenn die App ihn deaktiviert hatte, sonst ohne Enddatum.

Wenn Sie den Rabatt in Shopify löschen, wird die Stufe nicht gelöscht: Die App deaktiviert sie, damit Ihr Balken keinen Rabatt verspricht, den der Checkout nicht mehr gewährt, und auf der Stufe erscheint ein Hinweis, mit dem Badge Shopify-Rabatt gelöscht in der Liste der Stufen. Klicken Sie in der Stufe auf Rabatt von Yaco erstellen lassen, um sie mit einem von der App erstellten Rabatt mit demselben Wert wieder zu aktivieren (prozentualer Rabatt oder fester Betrag), oder auf Vom Shopify-Rabatt trennen, um sie unverändert zu behalten und selbst zu verwalten. Gilt der Rabatt nur noch für Kunden, die die Stufe nicht ansprechen kann, wird die Stufe ebenso deaktiviert. Eine Stufe, die ihrem Rabatt nicht folgt, wurde importiert, bevor es diese Verknüpfung gab, oder von Hand angelegt: Ändern Sie sie in der App.

Das App-Embed aktivieren

Der Balken wird über ein App-Embed geladen. Es wird einmal pro Theme im Shopify-Theme-Editor aktiviert.

1. Klicken Sie in der Anleitung auf App-Einbettung aktivieren. Der Theme-Editor öffnet sich bei den App-Embeds.
2. Aktivieren Sie Yaco Progress Bar.
3. Klicken Sie oben rechts im Theme-Editor auf Speichern.

Sie können es auch von Hand erledigen: Öffnen Sie im Shopify-Admin Onlineshop › Themes › Anpassen, klicken Sie in der linken Seitenleiste auf das Symbol für App-Embeds, aktivieren Sie Yaco Progress Bar und speichern Sie.

Verliert Ihr veröffentlichtes Theme das App-Embed, nachdem es aktiviert war, zum Beispiel wenn Sie ein anderes Theme veröffentlichen, wird der Balken nicht mehr angezeigt. Die Startseite öffnet dann die Einrichtungsanleitung erneut, auch wenn Sie sie geschlossen hatten, beim Schritt In Shopify aktivieren. In jedem Browser geschieht das jedes Mal, wenn ein Theme ohne das App-Embed veröffentlicht wird: Wenn Sie sie wieder schließen, bleibt sie geschlossen, bis Sie ein anderes Theme veröffentlichen.

Festlegen, wie die Konfiguration lädt (optional)

In den Einstellungen des App-Embeds bietet Konfigurationsquelle zwei Optionen:

• Nach dem Laden (empfohlen), die Standardeinstellung: Die Seiten laden so schnell wie ohne die App, und der Balken holt seine Konfiguration bei Yaco, sobald die Seite geladen ist.
• In der Seite (schwerere Seite): Die Konfiguration wird in jede Seite geschrieben. Haben Ihre Geschenkprodukte Hunderte von Varianten, kann das Laden jeder Seite um bis zu 0,3 s länger dauern.

Behalten Sie meist Nach dem Laden. Wählen Sie In der Seite nur, wenn Sie an B2B-Käufer verkaufen und die Geschenkliste ihren Katalogpreis zeigen soll: Mit Nach dem Laden zeigt sie den öffentlichen Preis. Haben Sie das App-Embed vor November 2026 aktiviert, steht die Einstellung womöglich noch auf In der Seite: Ändern Sie sie in den Einstellungen des App-Embeds.

Den Balken im Theme platzieren

Das App-Embed lädt den Balken, aber Sie entscheiden, wo er erscheint. Klicken Sie auf Fortschrittsbalken platzieren: Der Theme-Editor öffnet sich mit dem Yaco-Menü, und Sie klicken auf die Stelle der Seite, an der der Balken erscheinen soll, zum Beispiel im Warenkorb-Drawer. Die vollständige Methode und die Alternativen (App-Block auf der Produkt- oder Warenkorbseite, eine Codezeile für Entwickler) finden Sie unter Theme-Platzierung.

Wenn andere Shops den Balken bereits in derselben Version Ihres Themes platziert haben, platziert die App ihn bei der Installation für Sie. Der Schritt heißt dann Integration im Haupttheme prüfen: Klicken Sie auf Im Theme-Editor prüfen, um zu sehen, wo der Balken erscheint, und verschieben Sie ihn bei Bedarf. Der Schritt wird abgehakt, sobald Sie den Editor aus der Anleitung geöffnet haben.

Ist Ihr Theme schwer zu integrieren, bietet die Seite Theme-Integration die Schaltfläche Kontaktieren Sie uns, um beim Yaco-Team eine kostenlose individuelle Integration anzufragen.

Den Integrationsstatus prüfen

Unter der Einrichtungsanleitung (direkt unter der Begrüßung, sobald die Anleitung geschlossen ist) bleibt die Karte Integrationsstatus auf der Startseite. Die Karte hat eine Zeile pro Bereich, Onlineshop (Ihr veröffentlichtes Theme) und danach Checkout, und eine Spalte pro Funktion, Fortschrittsbalken und Empfehlungen. Unter Onlineshop zeigt das Badge App-Integration, ob die App-Integration (App-Embed) aktiviert ist:

• Onlineshop: In der Zeile App-Block stehen die Blöcke, die Sie selbst im Theme-Editor platzieren, mit der Anzahl ihrer Stellen, zum Beispiel 2 aktiv. In der Zeile Yaco-Platzierungen stehen die Integrationen, die die App Ihrem Theme hinzufügt, verwaltet im Tab Platzierungen der Theme-Integration, sowie die Codezeilen, die mit der Methode Ich bin Entwickler in Ihr Theme eingefügt wurden, zum Beispiel 2 Integrationen. Gezählt wird jede Kopie dieses Codes in Ihrem veröffentlichten Theme, eine pro Vorkommen. Ein Klick auf ein Badge zeigt die Liste: Platzierungen (den automatischen Warenkorb-Drawer eingeschlossen) öffnen den Tab Platzierungen, Theme-Dateien öffnen den Code-Editor des Themes bei dieser Datei. Der Theme-Code wird alle 10 Minuten erneut geprüft: Um eine Änderung nach dem Einfügen oder Entfernen des Codes sofort zu sehen, klicken Sie unten in der Liste auf Aktualisieren.
• Checkout: Eine einzige Zeile mit den Blöcken, die Sie im Checkout-Editor platzieren, zum Beispiel 1 aktiv. Diese Zeile erscheint nur in Shopify-Plus-Shops: Shopify behält die Anpassung des Checkouts Plus vor. Enthält Ihr Yaco-Plan den Checkout nicht (kostenloser Plan oder Starter), erscheint stattdessen ein Badge Premium: Die Blöcke, die Sie im Checkout-Editor platzieren, bleiben für Ihre Kunden unsichtbar, bis Sie zu Premium oder Optimize wechseln.

Ein grünes Badge bedeutet erledigt. App-Integration deaktiviert erscheint gelb, nicht platziert unter Fortschrittsbalken in der Zeile Yaco-Platzierungen orange: Ein Schritt fehlt. Ein graues Badge (nicht platziert) ist kein Fehler: Der Balken kann über die App-Einbettung und die Yaco-Platzierungen erscheinen, ganz ohne App-Block, und Empfehlungen sind optional. Ein Klick auf das Badge App-Integration öffnet den Theme-Editor bei der App-Integration. Ein Klick auf ein anderes Badge öffnet die zuständige Seite: der Tab Alternative Methoden der Theme-Integration für die Zeile App-Block, die Liste der Integrationen für die Zeile Yaco-Platzierungen, Checkout für den Balken im Checkout, Empfehlungen für die Empfehlungen im Checkout.

Ihr Plan (optional)

Der kostenlose Plan startet bei der Installation der App von selbst: Der Balken erscheint in Ihrem Shop, sobald das App-Embed aktiviert und der Balken platziert ist. Sie müssen nichts bezahlen, um diesen Schritt abzuschließen: Er wird abgehakt, sobald Sie Pläne ansehen öffnen, die Seite, die Ihre Testphase erklärt und was sich danach ändert. Die Anleitung zeigt dann 4 von 4 Aufgaben abgeschlossen. Wer die Liste der Stufen oder Pläne ansehen öffnet, hakt diese Schritte für Ihr ganzes Team ab, in jedem Browser. In einem Entwicklungsshop oder einem passwortgeschützten Shop zeigt der Schritt an, dass Ihr Balken ohne Abonnement erscheint: Ihre Testphase beginnt, sobald Ihr Shop öffentlich ist.

Der Schritt zeigt, wo Ihre 14-tägige Testphase mit allen Stufen steht. Die Testphase ist ein Bonus zum kostenlosen Plan: Sie beginnt, wenn Ihr Balken zum ersten Mal in Ihrem Shop erscheint, sofern Sie mindestens zwei aktive Stufen haben (mit nur einer Stufe schlägt der Schritt vor, eine zweite hinzuzufügen), danach zählt der Schritt die verbleibenden Tage. Nach der Testphase behält der kostenlose Plan 1 aktive Stufe. Klicken Sie auf Pläne ansehen, um die Pläne zu vergleichen. Siehe Abonnement.

Zeigt der Schritt Nötig, damit Ihr Balken erscheint, hat Ihr Shop noch keinen Plan, was bei einer älteren Installation vorkommen kann: Klicken Sie auf Pläne ansehen und dann auf der Karte Gratis auf Aktivieren.

Öffnen Sie nach dem Platzieren Ihren Shop in einem privaten Fenster, legen Sie ein Produkt in den Warenkorb und prüfen Sie, ob der Balken erscheint und sich füllt. Falls nicht, lesen Sie Balken wird nicht angezeigt.