Zum Inhalt springen

Warenkorb-Widget

Geben Sie Kunden die Möglichkeit, ihren Abholpunkt direkt im Warenkorb auszuwählen — bevor sie zur Kasse gehen. Das Globe Warenkorb-Widget fügt Ihrer Warenkorbseite oder Ihrem Warenkorb-Drawer einen Lieferselektor hinzu, sodass Kunden zwischen Lieferung nach Hause und einem Abholpunkt wählen können, ohne den Warenkorb zu verlassen.


Das Widget fügt Ihrem Warenkorb zwei kartenförmige Optionen hinzu:

  • Lieferung nach Hause — der Kunde möchte eine Standardlieferung an seine Adresse. Durch Auswahl dieser Option wird ein zuvor gespeicherter Abholpunkt gelöscht.
  • Abholpunkte — der Kunde möchte an einem Abholpunkt abholen. Ein Klick auf diese Karte öffnet eine interaktive Karte und Liste, betrieben von Leaflet und OpenStreetMap (kein Google Maps API-Schlüssel erforderlich).

Auf der Karte können Kunden nach Adresse suchen, ihren Standort verwenden und Markierungen für alle nahegelegenen Abholpunkte durchsuchen. Nach der Auswahl eines Punktes aktualisiert sich die Karte, um den Namen und die Adresse des ausgewählten Punktes sowie einen Button Ändern anzuzeigen.

Die Auswahl wird im Warenkorb gespeichert und fließt automatisch in die Bestellung ein.

Auf Wunsch zeigt das Widget eine dritte Karte, Abholung im Geschäft, für Bestellungen, die in Ihrem Geschäft abgeholt werden. Siehe Abholung im Geschäft.

Warenkorb-Widget im Shop-Warenkorb Kunden wählen direkt im Warenkorb zwischen Lieferung nach Hause und Abholpunkten.


  1. Stellen Sie sicher, dass mindestens ein Spediteur in Globe konfiguriert ist. Weitere Informationen finden Sie unter Abholpunkt-Spediteure hinzufügen.

  2. Aktivieren Sie das Widget in Ihrem Shopify-Theme:

    • Gehen Sie in der Shopify-Administration zu Online Store → Themes → Anpassen.
    • Öffnen Sie App-Einbettungen im linken Panel.
    • Suchen Sie Cart pickup points und schalten Sie es ein.
    • Klicken Sie auf Speichern.

    Sie können den Theme-Editor auch direkt aus Globe öffnen — gehen Sie zu Einstellungen → Cart Widget und klicken Sie auf Theme-Editor öffnen.

    App-Einbettungen-Umschalter im Shopify Theme-Editor Aktivieren Sie die App-Einbettung Cart pickup points in Ihrem Theme.

  3. Gehen Sie in der Globe-App zu Einstellungen → Cart Widget und konfigurieren Sie die Platzierung (siehe unten).


Das Widget fügt sich in Ihren Warenkorb an einem CSS-Selektor ein, den Sie angeben. Verschiedene Themes verwenden unterschiedliche HTML-Strukturen, daher müssen Sie das Widget auf das richtige Element in Ihrem Theme ausrichten.

Häufige Selektoren:

Theme-TypZu verwendender Selektor
Vollständige Warenkorbseite.cart__footer
Warenkorb-Drawer.cart-drawer__summary
Generisch#cart-totals

Nicht sicher, welchen Selektor Ihr Theme verwendet? Klicken Sie in Globe auf Hilfe neben dem CSS-Selektor-Feld — es führt Sie durch das Auffinden des richtigen Selektors mit den DevTools Ihres Browsers. Sie können auch den Support kontaktieren, und wir identifizieren ihn für Sie.

Sie können mehrere Platzierungsziele hinzufügen, wenn Ihr Theme sowohl eine vollständige Warenkorbseite als auch einen Warenkorb-Drawer hat — das Widget wird in beiden angezeigt.

Widget-Platzierungskonfiguration in Globe Konfigurieren Sie den CSS-Selektor und das Layout für jedes Platzierungsziel.


Übersetzungen

Passen Sie die vier Labels an, die Kunden sehen: die Überschrift, „Lieferung nach Hause”, „Abholpunkte” und den Button „Ändern”. Übersetzungen können pro Sprache festgelegt werden — das Widget erkennt automatisch die Browsersprache des Kunden und zeigt den passenden Text an. Die App zeigt nur Sprachen an, die in Ihrem Shopify-Shop veröffentlicht sind.

Farben

Acht Farbeinstellungen ermöglichen es Ihnen, das Widget an das Design Ihres Shops anzupassen: Überschriftsfarbe, Textfarbe, Karten-Hintergrund, Kartenrand (normal), Kartenrand (ausgewählt), Symbolfarbe, Schaltflächen-Hintergrund und Schaltflächen-Textfarbe.

Layout

Wählen Sie zwischen horizontal (die beiden Karten nebeneinander) oder vertikal (die Karten übereinander). Horizontal eignet sich gut für breite Warenkorblayouts; vertikal ist besser für schmale Warenkorb-Drawer geeignet.


Wenn ein Kunde im Warenkorb einen Abholpunkt auswählt, kann Globe das Versandadressformular beim Checkout automatisch mit der Adresse dieses Abholpunkts vorausfüllen. Dies erspart dem Kunden die erneute Eingabe der Adresse.

Aktivieren Sie dies unter Einstellungen → Cart Widget → Adressvorbefüllung beim Checkout.

Wenn Ihr Theme einen nicht standardmäßigen Checkout-Button verwendet, geben Sie den CSS-Selektor des Buttons in das Feld Benutzerdefinierter Checkout-Button-Selektor ein (unterstützt mehrere durch Komma getrennte Selektoren, z.B. .cart__checkout-button, #checkout).


Wenn Sie die Nachnahmegebühr über einen eigenen Versandtarif berechnen (z. B. „Packeta Abholpunkt (Nachnahme)“), tragen Sie Ihre COD-Schlüsselwörter unter Einstellungen → Cart Widget → Checkout-Lieferanpassung ein. Beim gewählten Punkt bleiben dann der reguläre und der Nachnahme-Tarif sichtbar. Siehe Nachnahme an Abholpunkten.


Wenn Kunden Bestellungen in Ihrem Geschäft abholen können, zeigt das Widget eine dritte Karte, Abholung im Geschäft, neben Lieferung nach Hause und Abholpunkten. Wählt der Kunde sie, öffnet sich der Checkout direkt bei der Abholung im Geschäft, und der Kunde wählt dort das Geschäft. Wechselt er danach zu Lieferung nach Hause oder zu einem Abholpunkt, öffnet sich der Checkout wieder beim Versand.

Die Karte ist standardmäßig ausgeschaltet.

Voraussetzung in Shopify

Gehen Sie in der Shopify-Verwaltung zu Einstellungen → Versand und Zustellung → Abholung im Geschäft (Pickup in store). Der Checkout bietet nur Standorte mit aktivierter Abholung, hinterlegter Adresse und Ware auf Lager (oder per Warenumlagerung verfügbar) an.

Einschalten

  1. Gehen Sie in Globe zu Einstellungen → Cart Widget → Erweiterte Einstellungen.
  2. Aktivieren Sie Abholung im Geschäft anzeigen.
  3. Wählen Sie unter Nur in diesen Ländern anzeigen die Länder, in denen Sie ein Geschäft haben. Leer bedeutet überall.
  4. Klicken Sie auf Speichern.

Zeigt Globe einen Hinweis zu Berechtigungen, öffnen Sie Globe im Shopify-Admin und bestätigen Sie die Aktualisierung. Bis dahin bleibt die Karte ausgeblendet.

Länder

Das Land bestimmt das Widget wie bei den Abholpunkten: über den Markt der Storefront oder über das Land, dem ihre Sprache zugeordnet ist. Wählen Sie nur Länder, in denen Sie ein Geschäft haben. Sonst öffnet sich für Kunden dort im Checkout die Abholung, aber sie finden kein Geschäft.

Texte der Karte

Titel und Untertitel der Karte legen Sie pro Sprache unter Widget-Text-Übersetzungen fest, neben den Texten der anderen Karten. Der Standardtitel ist Abholung im Geschäft in der Sprache des Kunden. Sie können ihn ändern, zum Beispiel in Abholung in unserem Laden in Graz.

Einschränkungen

  • Kunden außerhalb der gewählten Länder sehen die Karte nicht.
  • Express-Buttons im Warenkorb (Apple Pay, Shop Pay) umgehen die Auswahl im Widget.
  • Schalten Sie die Abholung in Shopify aus, öffnet sich der Checkout beim Versand. Das Widget erkennt das nicht, schalten Sie deshalb auch Abholung im Geschäft anzeigen aus.

  • Globe-App installiert mit aktivem Abonnement
  • Mindestens ein Abholpunkt-Spediteur in Globe konfiguriert
  • Die App-Einbettung Cart pickup points im Theme-Editor aktiviert