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 Yaco-Menü Platzierungen. Klicken Sie auf Fortschrittsbalken hinzufügen (oder Weitere Platzierung hinzufügen, sobald es eine Platzierung gibt) und dann auf das Element der Seite, an dem der Balken erscheinen soll. Dieser Klick beendet die Platzierung: Der Balken erscheint als Vorschau und das Formular öffnet sich. Klicken Sie auf Speichern, um ihn zu behalten, oder auf Abbrechen, um ihn zu verwerfen; vor Speichern wird nichts gespeichert.
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.

Beim Klick übernimmt der Balken die seitlichen Abstände des gewählten Elements. Reicht dieses Element bis zum Bildschirmrand, etwa ein Produktbild auf dem Handy, richtet sich der Balken stattdessen am benachbarten Inhalt aus, zum Beispiel am Produkttitel. Diese Abstände gelten für alle Bildschirmgrößen: Passen Sie sie bei Bedarf unter Layout im Formular der Platzierung an.

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. Während der Auswahl schrumpft das Menü auf eine Zeile mit der Schaltfläche Abbrechen, damit die Seite sichtbar bleibt. In einem schmalen Warenkorb-Drawer oder in der mobilen Vorschau des Theme-Editors dockt es unten an; ziehen Sie den Griff nach oben, um es nach oben zu verschieben, oder nach unten, um es auf seine Titelleiste einzuklappen. Ein Klick auf den Griff oder den Titel klappt es ein oder aus.

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.
• Layout: der Abstand außen und innen auf jeder Seite (oben, rechts, unten und links, jede einzeln einstellbar), und die Breite: Voll oder Begrenzt auf eine max. Breite in px, ausgerichtet Links, in der Mitte oder Rechts. Vom Theme übernehmen berechnet Abstände und Breite neu wie beim Platzieren des Balkens und behält den Rahmen.
• Rahmen: eine Farbe als Hintergrund, eine Rahmenlinie (Stärke in px und Farbe), ein Eckenradius und ein Schatten (Keiner, Leicht, Mittel oder Stark) um den Balken, nur für diese Platzierung. Eine Rahmenfarbe, die vor der Stärke gewählt wird, zeichnet eine Linie von 1 px; leeren Sie die Farbe oder setzen Sie die Stärke auf 0, um die Linie zu entfernen. Farben und Aussehen des Balkens selbst bleiben in seinem Design.
• CSS-Klassen und Container-CSS: für Entwickler, jedes andere CSS. Layout und Rahmen schreiben in dasselbe Container-CSS: Eine Änderung im einen ist im anderen sichtbar. Ein von Hand geschriebener Schatten erscheint als Individuell (Entwickler-Einstellungen).

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

Jede Platzierung verwendet Ihr Standarddesign, sofern Sie unter Design kein anderes wählen. Um den Balken im Warenkorb-Drawer anders anzuzeigen als auf der Produktseite, legen Sie pro Stelle eine Platzierung an und stellen deren Stufenfilter und Sichtbarkeitsbedingung ein: Ein zweites Design ist nicht nötig. Erstellen Sie eins nur, wenn eine Platzierung anders aussehen soll.

Im Theme-Editor zeigt das Formular diese Einstellungen mit kurzen Bezeichnungen, eine pro Zeile: Typ, Position, Element, Sichtbarkeit, Templates, dann Stufen und Design für einen Balken oder Empfehlung für Empfehlungen. Darunter zeigt Layout die Abstände als Box: die äußeren Felder um die inneren, jedes auf der Seite, die es einstellt. Wenn Sie mit der Maus über ein Feld fahren oder es anklicken, wird diese Seite auf der Seite hervorgehoben: der Abstand außen orange, der Abstand innen grün. Geben Sie eine Zahl in px ein oder einen Wert wie auto oder 2em. Danach folgt Rahmen. Name der Platzierung und Schalter Aktiv stehen oben. Um eine andere Stelle auszuwählen, klicken Sie auf die Pfeil-Schaltfläche (ein klickender Pfeil) neben Element und dann auf die Seite. Das Layout (Abstände und maximale Breite, auch die im Wrapper-CSS geschriebenen) wird dann für das neue Element neu berechnet; Rahmen und die übrigen Regeln im Wrapper-CSS bleiben erhalten. CSS-Klassen, Wrapper-CSS und, für Empfehlungen, Integrations-ID (Analytics) liegen unter Entwickler-Einstellungen, eingeklappt am Ende des Formulars; die Zeile unter diesem Titel nennt den Inhalt. Entfernen steht unten links, weit weg von Abbrechen und Speichern. Abbrechen (oder das Kreuz) setzt eine geänderte Platzierung auf ihren gespeicherten Stand zurück.

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.
• Im Theme-Editor bietet Platzierungen anderer Shops übernehmen auf einem Theme ohne Platzierung dieselben Platzierungen an. Die angehakten erscheinen als Vorschau auf der Seite; gespeichert wird erst, wenn Sie auf Importieren klicken. Haben Sie selbst Platzierungen angehakt und schließen das Fenster, ohne sie zu importieren, warnt die App zuerst: Klicken Sie auf Ohne Import verlassen, um sie zu verwerfen.
• Schlägt im Theme-Editor ein Import fehl, zeigt das Fenster das an und bleibt mit Ihrer Auswahl offen: Klicken Sie auf Importieren, um es erneut zu versuchen.
• 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 (keine der drei Klassen unter Kombinierbar mit angehakt), 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.
• Im kostenlosen Plan endet sie mit „Angebote verwaltet mit Yaco Progress Bar von Yaco Studio“, in der Sprache des Besuchers. Diese Zeile ist reiner Text ohne Link und wird ebenfalls nicht angezeigt. Bezahlte Pläne, Starter eingeschlossen, fügen sie nicht hinzu.

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 in der Gruppe ohne Balken eines A/B-Tests. 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: Der Link Hilfe nötig? Kostenlose Integration nach Maß unten im Menü öffnet sie in der App. Er bleibt sichtbar, während Sie den Platz für die Leiste wählen.

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