The cart widget adds two cards to your cart page and cart drawer: Home delivery and Pickup point. The customer picks a point on a map, and checkout then shows only that courier's rate, named after the point. It works on every Shopify plan.
Demo
Store: https://shipdock-cart-widget.myshopify.com/
Password: demo
Limits: read this first
Every order has to go through the cart. These buttons and links open checkout without the cart, so the customer never sees the widget and the order arrives without a pickup point. Turn them off (step 5). The customer can still choose a point afterwards on the Thank you or Order status page.
Buy it now on product pages
express payment buttons on product pages and in Featured product sections: Shop Pay, Apple Pay, Google Pay, PayPal
Buy now or Checkout now buttons from other apps, such as sticky add-to-cart bars or upsell pop-ups
direct checkout links, for example in emails or ads
Checkout follows the cart. With a pickup point chosen, checkout shows only that courier's rate (and its cash on delivery variant), and home delivery is hidden. With Home delivery chosen, the pickup point rates are hidden. To change the delivery method, the customer goes back to the cart.
A point in another country than the shipping address is not used. Example: the customer picks a Czech point in the cart, then enters a Slovak address in checkout. Checkout hides that courier's pickup point rates and the point does not go to the order. What stays depends on When the cart carries no choice:
Show all shipping rates: home delivery and the pickup point rates of the other couriers. If the customer pays for one of them, they choose the point on the Thank you or Order status page.
Hide pickup points: home delivery only.
To use a point in the new country, the customer goes back to the cart and chooses again.
The choice cannot be made required. The widget lives in the cart, so it cannot stop a checkout without a point. On Shopify Plus, use the pickup point widget in checkout instead: there, customers cannot pay without a point.
Shopify themes only. Headless stores are not supported.
The shipping address stays the customer's. The order carries the pickup point, but its shipping address is not replaced with the point's address. Check this if a warehouse or fulfilment app ships your orders.
The cart knows only your rate conditions, not the courier's own limits. Example: your Packeta pickup point rate has no weight limit, so the cart offers Packeta points to a 25 kg cart too, even if the courier's lockers take only lighter parcels. Neither the cart nor checkout can know the courier's limit.
Set a maximum weight on the pickup point rate in Shopify (for example up to 10 kg). The cart then hides that courier for heavier carts.
The cart counts the weight of the products only, not the package weight from your Shopify shipping settings. A cart just under the limit can still get a different result in checkout.
Dimensions are never checked, because Shopify does not pass them. Add oversized products to Pickup point exclusions.
Shipping profiles do not decide where pickup points show. Example: your General profile has pickup point rates, and a second profile "Oversized" has home delivery only. The cart cannot tell which profile a product belongs to, so it still offers pickup points for the oversized product. The same goes for any products you never want to send to a pickup point.
Exclude those products in ShipDock under Pickup point exclusions instead: add the tag
shipdock-no-pickup, pick products or only some variants, or pick up to 2 collections.While such a product is in the cart, the pickup point card is greyed out, the choice switches to home delivery and checkout hides the pickup point rates.
Exclusions work in the cart, so they do not cover orders that skip the cart (see the first point).
Paid ShipDock plan (Lite or higher). If you cancel your plan, the widget turns off and your settings are kept. After upgrading, turn it on again.
Prices in the cart can differ from checkout. The cart shows the lowest price per courier, checkout always charges the rate that really applies. Typical cases:
Several shipping profiles. If the cart holds products from two profiles, Shopify adds up the rates of both in checkout. The cart does not know the profiles, so it can show a lower price than checkout.
A discount code entered in checkout. Free shipping from the code shows only in checkout.
Another currency than your store currency. Price conditions such as free shipping over a set amount are not evaluated in the cart, only weight conditions.
Rates the cart does not see: Shopify local delivery and local pickup, rates changed by other apps, B2B price lists.
The map shows the 100 nearest points. Customers move the map or search to see more.
Before you start
Connect at least one pickup point courier and map its shipping rates by name, or set it up with ShipDock shipping rates. The widget takes its couriers, countries and prices from these rates.
Set it up
In ShipDock, open Settings → Widget → Cart widget settings.
Under Widget status, choose Test mode and click Save. For now, only you see the widget.
In Shopify, open Online Store → Themes → Customize → App embeds, turn on Cart widget and save the theme. Back in ShipDock, click Check on the Theme tile.
Place the widget in both the cart page and the cart drawer. Many themes open a cart drawer after Add to cart, and customers check out from it without ever seeing the cart page. A widget on the cart page only is then never seen.
Cart page: in the theme editor, open the cart page, click Add block in the section with the checkout button, choose Cart widget, drag it next to the button and save.
Cart drawer, or a theme that takes no app blocks on the cart page: in ShipDock, under Placement in the cart, click Add placement, enter the CSS selector of the element the widget should sit next to and set Show on to All pages, so the widget also appears in a drawer opened from a product page. To find the selector, turn on Placement helper in the app embed settings and click the element in the editor preview.
Step by step with screenshots: How to place the cart widget in the cart drawer with a CSS selector.
Need help? Not sure where the widget should go in your theme, or the drawer does not show it? Write to us in the chat and we are happy to help you set it up.
Turn off the buttons that skip the cart. In the theme editor, open a product page, click the Buy buttons block and untick Show dynamic checkout buttons. Do the same in every product template and every Featured product section.
Click Open as tester, add a product to the cart and choose a pickup point, once in the cart drawer and once on the cart page. Checkout should show one shipping rate named after the point.
Check that the Pickup point selector block is on your Thank you and Order status pages (see Recommended settings).
Switch Widget status to Live and click Save.
What your customers see
Two cards in the cart, Home delivery and Pickup point. The pickup point card opens a window with search, a map, a list sorted by distance and a courier filter. In checkout, only the chosen courier's rate is left, named after the point, for example Packeta - Z-BOX Bratislava (12345).
Recommended settings
See How to add the pickup point widget to the Thank you and Order status pages.
When the cart carries no choice decides what happens to orders that skipped the cart. Pick one:
Hide pickup points: the strict option. Orders that skipped the cart can only use home delivery, so no pickup point order arrives without a point and nobody has to choose one after ordering. If hiding would leave no rate at all, checkout still shows every rate.
Show all shipping rates: the lenient option. Customers who skipped the cart can still choose a pickup point rate and pick the point afterwards on the Thank you or Order status page, or from the pickup point reminder email.
Also worth setting:
Show prices in the cart under Countries and couriers: off by default. Tick it so customers see the price before checkout.
Preselected option in the cart: None (the customer has to choose) makes every customer decide. Home delivery suits stores where most orders go home; checkout then hides pickup point rates until the customer picks a point.
Cash on delivery: name the COD rate of each courier with a cash on delivery word (for example COD), so both rates stay in checkout for the chosen point. Your own words go into the Cash on delivery keywords card.
Pickup point exclusions: oversized or heavy products, and anything you keep in a separate shipping profile without pickup point rates. Shipping profiles alone do not hide the pickup point card.
Placement: the cart page and the cart drawer (step 4). Then add a product from a product page, open the drawer and check the widget is there. Place the widget above any express payment buttons in the cart.
Other settings: Shipping name in checkout (the rate name per language, default {provider} - {name} ({id})), Edit appearance (colours and custom CSS) and the texts in Settings → Translations → Cart widget.
Troubleshooting
The widget does not show: in Test mode only testers see it. Check that the app embed is on in the published theme (click Check) and that the block or a placement is in place.
Checkout shows all rates: if the Checkout tile says Filtering off, click Turn on checkout filtering. Also check that the courier's rates are mapped for that country.
Orders arrive without a pickup point: the customer skipped the cart. Turn off the buttons from step 5 and any quick checkout apps, or set When the cart carries no choice to Hide pickup points.