Widżet koszyka

Daj klientom możliwość wyboru punktu odbioru bezpośrednio w koszyku — zanim przejdą do kasy. Widżet koszyka Globe dodaje selektor dostawy do strony koszyka lub szuflady koszyka, dzięki czemu klienci mogą wybrać między dostawą do domu a punktem odbioru bez opuszczania koszyka.

Jak to działa

Widżet dodaje do koszyka dwie opcje w formie kart:

Dostawa do domu — klient chce standardowej dostawy na swój adres. Wybranie tej opcji usuwa wcześniej zapisany punkt odbioru.
Punkty odbioru — klient chce odebrać przesyłkę w punkcie odbioru. Kliknięcie tej karty otwiera interaktywną mapę i listę, zasilane przez Leaflet i OpenStreetMap (nie jest wymagany klucz API Google Maps).

Na mapie klienci mogą wyszukiwać według adresu, używać swojej lokalizacji i przeglądać znaczniki wszystkich pobliskich punktów odbioru. Po wyborze punktu karta aktualizuje się, aby wyświetlić nazwę i adres wybranego punktu wraz z przyciskiem Zmień.

Wybór jest zapisywany w koszyku i automatycznie trafia do zamówienia.

Na życzenie widżet pokaże też trzecią kartę, Odbiór osobisty, dla zamówień odbieranych w Twoim sklepie. Zobacz Odbiór osobisty.

Klienci wybierają między dostawą do domu a punktami odbioru bezpośrednio w koszyku.

Konfiguracja

Upewnij się, że w Globe skonfigurowany jest co najmniej jeden przewoźnik. Zobacz Dodawanie przewoźników punktów odbioru, jeśli jeszcze tego nie zrobiłeś.
Włącz widżet w swoim motywie Shopify:
- W panelu administracyjnym Shopify przejdź do Online Store → Motywy → Dostosuj.
- Otwórz Osadzenia aplikacji w lewym panelu.
- Znajdź Cart pickup points i włącz.
- Kliknij Zapisz.
Możesz też otworzyć edytor motywu bezpośrednio z Globe — przejdź do Ustawienia → Widżet koszyka i kliknij Otwórz edytor motywu.

Włącz osadzenie aplikacji Cart pickup points w swoim motywie.
W aplikacji Globe przejdź do Ustawienia → Widżet koszyka i skonfiguruj umiejscowienie (patrz poniżej).

Umiejscowienie

Widżet wstawia się do koszyka w selektorze CSS, który podajesz. Różne motywy używają różnych struktur HTML, dlatego musisz wskazać widżetowi właściwy element w swoim motywie.

Popularne selektory:

Typ motywu	Selektor do wypróbowania
Pełna strona koszyka	`.cart__footer`
Szuflada koszyka	`.cart-drawer__summary`
Ogólny	`#cart-totals`

Nie jesteś pewny, którego selektora używa Twój motyw? Kliknij Pomoc obok pola selektora CSS w Globe — poprowadzi Cię przez znalezienie właściwego selektora za pomocą DevTools przeglądarki. Możesz też skontaktować się z pomocą techniczną, a my zidentyfikujemy go dla Ciebie.

Możesz dodać wiele celów umiejscowienia, jeśli Twój motyw ma zarówno pełną stronę koszyka, jak i szufladę koszyka — widżet pojawi się w obu.

Skonfiguruj selektor CSS i układ dla każdego celu umiejscowienia.

Dostosowanie

Tłumaczenia

Dostosuj cztery etykiety, które widzą klienci: nagłówek, „Dostawa do domu”, „Punkty odbioru” i przycisk „Zmień”. Tłumaczenia można ustawić dla każdego języka — widżet automatycznie wykrywa język przeglądarki klienta i wyświetla odpowiedni tekst. Aplikacja pokazuje tylko języki opublikowane w Twoim sklepie Shopify.

Kolory

Osiem ustawień kolorów pozwala dopasować widżet do projektu Twojego sklepu: kolor nagłówka, kolor tekstu, tło karty, obramowanie karty (normalne), obramowanie karty (wybrane), kolor ikony, tło przycisku i kolor tekstu przycisku.

Układ

Wybierz między poziomym (dwie karty obok siebie) lub pionowym (karty ułożone jedna nad drugą). Układ poziomy sprawdza się dobrze przy szerokich układach koszyka; pionowy lepiej pasuje do wąskich szuflad koszyka.

Automatyczne wypełnianie adresu przy kasie

Gdy klient wybierze punkt odbioru w koszyku, Globe może automatycznie wypełnić formularz adresu wysyłki przy kasie adresem tego punktu odbioru. Oszczędza to klientowi ponownego wpisywania adresu.

Włącz to w Ustawienia → Widżet koszyka → Automatyczne wypełnianie adresu przy kasie.

Jeśli Twój motyw używa niestandardowego przycisku kasy, wpisz selektor CSS przycisku w polu Niestandardowy selektor przycisku kasy (obsługuje wiele selektorów oddzielonych przecinkami, np. .cart__checkout-button, #checkout).

Płatność za pobraniem

Jeśli pobierasz opłatę za pobranie przez osobną stawkę wysyłki (np. „Paczkomat InPost (pobranie)”), dodaj słowa kluczowe COD w Ustawienia → Widżet koszyka → Dostosowanie dostawy w kasie. Przy wybranym punkcie widoczna zostanie wtedy zwykła i pobraniowa stawka. Zobacz Płatność za pobraniem w punktach odbioru.

Odbiór osobisty

Jeśli klienci mogą odebrać zamówienie w Twoim sklepie, widżet może pokazać trzecią kartę, Odbiór osobisty, obok dostawy do domu i punktów odbioru. Gdy klient ją wybierze, kasa otworzy się od razu na odbiorze w sklepie, a klient wybierze tam sklep. Jeśli potem przełączy na dostawę do domu lub punkt odbioru, kasa znów otworzy się na wysyłce.

Karta jest domyślnie wyłączona.

Wymagania w Shopify

W panelu administracyjnym Shopify przejdź do Ustawienia → Wysyłka i dostawa → Odbiór w sklepie (Pickup in store). Kasa proponuje tylko lokalizacje z włączonym odbiorem, uzupełnionym adresem i towarem na stanie (lub dostępnym przez przesunięcie magazynowe).

Włączenie

W Globe przejdź do Ustawienia → Widżet koszyka → Ustawienia zaawansowane.
Zaznacz Pokaż odbiór osobisty.
W polu Pokaż tylko w tych krajach wybierz kraje, w których masz sklep. Puste pole oznacza wszędzie.
Kliknij Zapisz.

Jeśli Globe pokaże ostrzeżenie o uprawnieniach, otwórz Globe w panelu administracyjnym Shopify i zaakceptuj aktualizację. Do tego czasu karta pozostaje ukryta.

Kraje

Kraj widżet ustala tak samo jak przy punktach odbioru: według rynku sklepu internetowego albo według kraju przypisanego do jego języka. Wybieraj tylko kraje, w których masz sklep. W przeciwnym razie klient stamtąd zobaczy w kasie odbiór w sklepie, ale nie znajdzie żadnego sklepu.

Teksty karty

Tytuł i podtytuł karty ustawisz dla każdego języka w sekcji Tłumaczenia tekstu widgetu, obok tekstów pozostałych kart. Domyślny tytuł to Odbiór osobisty w języku klienta. Możesz go zmienić, np. na Odbiór w naszym sklepie w Krakowie.

Ograniczenia

Klienci spoza wybranych krajów nie widzą karty.
Przyciski płatności ekspresowych w koszyku (Apple Pay, Shop Pay) pomijają wybór z widżetu.
Jeśli wyłączysz odbiór w Shopify, kasa otworzy się na wysyłce. Widżet tego nie wykryje, więc wyłącz też Pokaż odbiór osobisty.

Wymagania

Zainstalowana aplikacja Globe z aktywną subskrypcją
Co najmniej jeden przewoźnik punktów odbioru skonfigurowany w Globe
Osadzenie aplikacji Cart pickup points włączone w edytorze motywu

Explore the cart widget feature in Globe for Shopify — pricing & live demo →