Fortschrittsbalken im Shopify-Theme platzieren: Warenkorb-Drawer, Warenkorb, Produktseite

Den Balken im Warenkorb-Drawer oder anderswo platzieren

Die empfohlene Methode ist Fortschrittsbalken platzieren: Sie zeigen auf die Stelle in Ihrem Theme, und die App merkt sie sich. Das funktioniert für den Warenkorb-Drawer (Cart Drawer), die Warenkorbseite, die Produktseite und jeden anderen Bereich des Themes.

1. Öffnen Sie in der App Theme-Integration, Tab Platzierungen.
2. Prüfen Sie unter Themes das Theme, an dem Sie arbeiten (Theme auswählen). Das Live-Theme trägt das Badge (aktuelles Theme). Platzierungen werden pro Theme gespeichert.
3. Klicken Sie im Abschnitt App-Embed-Aktivierung auf Aktivieren, falls das App-Embed noch nicht aktiv ist, aktivieren Sie Yaco Progress Bar im Theme-Editor und speichern Sie.
4. Klicken Sie unter Warenkorb-Drawer & allgemeine Platzierungen auf Fortschrittsbalken platzieren (oder Platzierungen verwalten, sobald eine Platzierung existiert).
5. Der Theme-Editor öffnet sich mit dem Menü Yaco-Fortschrittsbalken integrieren. Klicken Sie auf Fortschrittsbalken hinzufügen und dann auf das Element der Seite, an dem der Balken erscheinen soll.
6. Passen Sie das Formular bei Bedarf an und klicken Sie auf Speichern.

Während Sie auf die Seite zeigen, umrahmt die App das Element unter dem Cursor und zeichnet eine Linie dort, wo der Balken eingefügt wird. Der Theme-Inspector von Shopify kann aktiv bleiben: Seine Umrisse werden während der Platzierung ausgeblendet.

Um den Balken im Warenkorb-Drawer zu platzieren, legen Sie zuerst ein Produkt in den Warenkorb und öffnen den Drawer, dann klicken Sie auf Fortschrittsbalken hinzufügen: Sobald die Platzierung läuft, wählt ein Klick auf die Seite eine Stelle und öffnet nichts mehr.

Einstellungen einer Platzierung

Jede Platzierung hat eigene Einstellungen, im Theme-Editor oder über die Liste Platzierungen dieses Themes auf derselben Seite:

• Referenzelement und Position relativ zum Referenzelement: wo der Balken sitzt (davor, danach, als erstes Kind, als letztes Kind oder anstelle des Elements).
• Sichtbarkeitsbedingung: immer sichtbar, nur wenn der Warenkorb Artikel enthält, oder nur wenn er leer ist.
• Auf Templates anzeigen: die Platzierung auf bestimmte Seitenvorlagen beschränken. Standardmäßig alle.
• Stufenfilter: alle Stufen anzeigen, nur bestimmte, oder einzelne an dieser Stelle ausblenden.
• Design: welches Design diese Platzierung verwendet.
• CSS-Klassen und Container-CSS: die Abstände um den Balken feinjustieren.

Mit Integration deaktivieren schalten Sie eine Platzierung ab, ohne sie zu löschen.

Den Balken bei leerem Warenkorb ausblenden

Wählen Sie in der Sichtbarkeitsbedingung die Option, die den Balken nur bei Artikeln im Warenkorb zeigt: Der Balken bleibt ausgeblendet, solange der Warenkorb leer ist, und erscheint, sobald ein Produkt hinzugefügt wird.

• Balken mit Fortschrittsbalken platzieren gesetzt: Öffnen Sie die Platzierung über Platzierungen dieses Themes und wählen Sie When the cart contains items in ihrer Sichtbarkeitsbedingung (im Theme-Editor Wenn der Warenkorb Artikel enthält).
• Balken mit dem App-Block Yaco progress bar hinzugefügt: Wählen Sie im Theme-Editor den Block aus, wählen Sie Wenn der Warenkorb Artikel enthält in seiner Sichtbarkeitsbedingung und klicken Sie auf Speichern.

Die Bedingung zählt die Artikel im Warenkorb, nicht den Fortschritt zu einer Stufe: Eine Stufe mit Schwelle 0 bleibt ebenfalls ausgeblendet, bis ein Produkt hinzugefügt wird. Die Option When the cart is empty (im Block Wenn der Warenkorb leer ist) bewirkt das Gegenteil, für eine Botschaft nur für leere Warenkörbe.

Platzierungen aus einem anderen Theme oder Shop übernehmen

• Duplizieren in der Karte Platzierungen dieses Themes kopiert die Platzierungen eines anderen Themes dieses Shops oder eines anderen Shops, in dem Sie Yaco mit demselben Shopify-Konto nutzen. Ein Shop erscheint, sobald Sie Yaco dort mit diesem Konto geöffnet haben. Eine im Theme bereits verwendete Platzierung wird nie doppelt hinzugefügt.
• Nutzen andere Yaco-Shops dasselbe Theme in derselben Version, schlägt Ihnen ein Hinweis Platzierungen bereit für Ihr Theme deren Platzierungen vor. Sie sind anonymisiert und mit Gleiche Version oder Ähnliche Version gekennzeichnet. Wählen Sie die gewünschten aus und prüfen Sie das Ergebnis.
• Wenn Sie in Shopify ein Theme duplizieren, werden seine Platzierungen automatisch in das neue Theme übernommen.

Alternative Methoden

Der Tab Alternative Methoden bündelt weitere Wege, den Balken einzufügen:

• Produktseite & Warenkorbseite: die App-Blöcke des Theme-Editors. Klicken Sie bei Yaco progress bar und Yaco recommendations auf Zur Produktseite hinzufügen oder Zur Warenkorbseite hinzufügen: Der Theme-Editor öffnet sich mit dem bereits hinzugefügten Block, Sie müssen nur noch auf Speichern klicken. Jeder Block zeigt seinen Status in Ihrem veröffentlichten Theme, zum Beispiel App-Block · 1 aktiv. In den Einstellungen des Blocks Yaco recommendations wählt die Empfehlungs-ID, welche Empfehlungen erscheinen (leer = Standard). In den Einstellungen des Blocks Yaco progress bar haken Sie unter Stufen die Stufen, die erscheinen sollen, nach Namen an und wählen unter Design das Design nach Namen (leer = Standarddesign). Der Stufenfilter legt fest, ob die angehakten Stufen die einzigen angezeigten oder die ausgeblendeten sind; bei Alle Stufen anzeigen werden die Häkchen ignoriert. Die Sichtbarkeitsbedingung blendet den Block je nach Warenkorb aus, auf allen Seiten, auf denen er sitzt; im Theme-Editor erscheint ein ausgeblendeter Block als gepunkteter Rahmen, damit Sie ihn weiter auswählen können. Der Rahmen nennt den Grund: Balken in der App deaktiviert, keine Stufe angelegt, keine Stufe gilt für die Vorschau, keine der angehakten Stufen gilt (Stufenfilter) oder die Sichtbarkeitsbedingung. Container-CSS unter Farben & CSS fügt dem Container des Blocks eigene CSS-Deklarationen hinzu, wie das Container-CSS einer Platzierung; sie gelten auch, wenn ein Design ausgewählt ist.
• Ich bin Entwickler: Kopieren Sie die Codezeile mit In Zwischenablage kopieren und fügen Sie sie in ein beliebiges Liquid-Template ein. Code bearbeiten öffnet den Code-Editor des Themes.
• Auto Warenkorb-Drawer-Integration (Oben im Warenkorb-Drawer oder Unten im Warenkorb-Drawer): eine ältere, als Veraltet markierte Methode, die nicht bei allen Themes funktioniert. Nutzen Sie besser Fortschrittsbalken platzieren. Dieser Abschnitt erscheint nur, wenn Ihr Shop sie noch nutzt: Sobald beide Kästchen abgewählt und gespeichert sind, verschwindet er.

Für den Checkout lesen Sie Fortschrittsbalken im Checkout.

2:00

0:58

Was Screenreader und KI-Einkaufsassistenten lesen

Auf jeder Seite, auf der das App-Embed aktiv ist, fügt Yaco Progress Bar eine Zusammenfassung der aktuellen Angebote hinzu: für Screenreader und für KI-Assistenten, die Ihren Shop im Auftrag eines Kunden durchsuchen. Die Zusammenfassung wird nicht angezeigt und verändert das Aussehen der Seite nicht. Sie ist auch bei geschlossenem Warenkorb-Drawer vorhanden.

• Sie listet nur die Stufen auf, auf die der Besucher Anspruch hat: Markt, Land, Zeitraum und Kundenregeln jeder Stufe gelten wie beim Balken.
• Für jede Stufe nennt sie den Namen, die angebotenen Geschenke mit ihrem regulären Preis, den Schwellenwert und den Fortschritt des Warenkorbs, oder dass die Stufe freigeschaltet ist.
• Hat eine Stufe ein Enddatum, nennt sie es in der Zeitzone Ihres Shops. Die Stufe verschwindet zu diesem Zeitpunkt aus der Zusammenfassung, auch auf einer Seite, die offen bleibt.
• Gilt eine Stufe nur für bestimmte Länder, nennt sie diese. Ist sie auf Märkte beschränkt, nennt sie das Land des Besuchers. Ein Assistent, der aus einem Land surft, verspricht das Angebot dann keinem Kunden in einem anderen Land.
• Lässt sich eine Rabatt- oder Geschenkstufe mit keinem anderen Rabatt kombinieren (alle drei Kombinationssymbole aus), sagt sie, dass das Angebot nicht mit Rabattcodes kombinierbar ist. Sonst sagt sie nichts zur Kombination: Auch der Code muss sie erlauben.
• Zählt ein Balken nur einen Teil des Warenkorbs (Warenkorb-Artikelfilterung oder Kaufart), sagt sie das und nennt die Produkte oder Kollektionen, die zählen oder nicht zählen. Ein Assistent verspricht dann keinen Fortschritt mit einem Produkt, das die Stufe nicht voranbringt.
• Sie folgt dem Warenkorb, wie der Balken, und endet mit dem Datum, an dem Sie den Balken zuletzt gespeichert haben.

Der Balken selbst wird als Fortschrittsbalken angekündigt, mit der laufenden Stufe und dem Warenkorbbetrag im Verhältnis zum Schwellenwert.

Es gibt nichts einzurichten. Es gibt keine Zusammenfassung, wenn der Balken deaktiviert ist, wenn keine Stufe für den Besucher gilt, oder für Besucher der Holdout-Gruppe eines A/B-Tests des Balkens. Ein Assistent, der die Seite nur herunterlädt, ohne sie in einem Browser zu öffnen, sieht die Zusammenfassung nicht.

Eine kostenlose individuelle Integration anfragen

Finden Sie die richtige Stelle nicht, klicken Sie im Hinweis Benötigen Sie Hilfe beim Platzieren des Fortschrittsbalkens in Ihrem Theme? auf Kontaktieren Sie uns. Das Yaco-Team platziert den Balken für Sie, kostenlos. Die Angabe Ihres Collaborator-Anfragecode ist optional, beschleunigt aber die Bearbeitung: Shopify leitet Ihnen dann unsere Mitarbeiteranfrage weiter, und sobald Sie sie annehmen (über die E-Mail von Shopify oder unter Einstellungen › Nutzer), können wir Ihren Shop öffnen, auch wenn er passwortgeschützt ist. Wenn Sie nichts anderes angeben, platzieren wir den Balken in Ihrem Warenkorb-Drawer direkt unter dessen Kopfzeile; nennen Sie uns gern eine andere Stelle, etwa über dem Kassen-Button. Die meisten Integrationen werden am selben Tag oder am nächsten Werktag erledigt.

Im Theme-Editor bietet das Yaco-Menü dieselbe Anfrage: Kostenlose maßgeschneiderte Integration anfragen öffnet sie in der App.

Ist der Balken platziert, aber unsichtbar, lesen Sie Balken wird nicht angezeigt oder Probleme mit dem Warenkorb-Drawer.