Cart widget

Give customers a way to choose their pickup point directly in the cart — before they reach checkout. The Globe cart widget adds a delivery selector to your cart page or cart drawer, so customers can pick between home delivery and a pickup point without ever leaving the cart.

Available on all Shopify plans

The cart widget works on Basic, Shopify, Advanced, and Plus plans. Shopify Plus stores already have pickup point selection built into checkout — the cart widget is most useful for stores on other plans.

Not a complete replacement for post-checkout selection

Customers who use the Buy Now button, express payment methods (Apple Pay, Google Pay), or direct checkout links bypass the cart entirely and will not see the widget. For these customers, the Thank You and Order Status page selection remains the fallback. We recommend keeping that flow active alongside the cart widget.

Stores with complex shipping setups — many shipping zones, conditional rates, or carrier-calculated pricing — may also find that the widget’s simplified home/pickup toggle does not fit their checkout flow well.

---

How it works

The widget adds two card-style options to your cart:

• Home delivery — the customer wants a standard delivery to their address. Selecting this clears any previously saved pickup point.
• Pickup points — the customer wants to collect from a pickup point. Clicking this card opens an interactive map and list, powered by Leaflet and OpenStreetMap (no Google Maps API key required).

From the map, customers can search by address, use their location, and browse markers for all nearby pickup points. Once they choose a point, the card updates to display the selected point’s name and address, along with a Change button.

The selection is saved to the cart and flows into the order automatically.

Customers choose between Home delivery and Pickup points directly in the cart.

---

Setup

1. Make sure at least one carrier is configured in Globe. See Adding pickup point carriers if you haven’t done this yet.

2. Enable the widget in your Shopify theme:

   • In Shopify admin, go to Online Store → Themes → Customize.
   • Open App embeds in the left panel.
   • Find Cart pickup points and toggle it on.
   • Click Save.

   You can also reach the theme editor directly from Globe — go to Settings → Cart Widget and click Open theme editor.

   Enable the Cart pickup points app embed in your theme.

3. In the Globe app, go to Settings → Cart Widget and configure the placement (see below).

---

Placement

The widget injects itself into your cart at a CSS selector you specify. Different themes use different HTML structures, so you need to point the widget at the right element in your theme.

Common selectors:

Theme type	Selector to try
Full cart page	.cart__footer
Cart drawer	.cart-drawer__summary
Generic	#cart-totals

Not sure which selector your theme uses? Click Get help next to the CSS selector field in Globe — it walks you through how to find the right selector using your browser’s DevTools. You can also contact support and we’ll identify it for you.

You can add multiple placement targets if your theme has both a full cart page and a cart drawer — the widget will appear in both.

Configure the CSS selector and layout for each placement target.

---

Customisation

Translations

Customize the four labels customers see: the heading, “Home delivery”, “Pickup points”, and the “Change” button. Translations can be set per language — the widget automatically detects the customer’s browser language and shows the matching text. The app only shows languages that are published in your Shopify store.

Colors

Eight color settings let you match the widget to your store’s design: heading color, text color, card background, card border (normal), card border (selected), icon color, button background, and button text color.

Layout

Choose between horizontal (the two cards sit side by side) or vertical (the cards stack on top of each other). Horizontal works well on wide cart layouts; vertical is better suited for narrow cart drawers.

---

Checkout address prefill

When a customer selects a pickup point in the cart, Globe can automatically pre-fill the checkout shipping address form with that pickup point’s address. This saves the customer from re-entering the address and reduces friction.

Enable this in Settings → Cart Widget → Checkout address prefill.

Not recommended for Shopify Plus

Shopify Plus stores use the checkout extension for pickup point selection, which handles address data natively. The prefill feature is designed for standard plan stores only.

If your theme uses a non-standard checkout button, enter the button’s CSS selector in the Custom checkout button selector field (supports multiple selectors separated by commas, e.g. .cart__checkout-button, #checkout).

---

Prerequisites

• Globe app installed with an active subscription
• At least one pickup point carrier configured in Globe
• The Cart pickup points app embed toggled on in your theme editor