Skip to main content
In this tutorial you add the Zippendo service point picker to your Shopify checkout. Instead of one long list with a shipping method for every service point, your customers see each service point shipping method once. When they choose it, the service point nearest to them is already picked, with its address and opening hours. Want a different one? They click Change service point and choose from a list, or from a map if you add your own Google Maps key.
Shopify checkout with the GLS pakkeshop shipping method selected. Below it, the nearest service point with its distance, address and opening hours, and a Change service point button

What your customers see: the nearest service point is already chosen

It takes about 10 minutes. You start in Zippendo, then add the picker in Shopify’s checkout editor.
What you need
Not on Shopify Plus? Your customers can still choose a service point: each one shows up as its own shipping method. See Show your shipping prices in Shopify checkout.

​
Step 1: Switch on the picker in Zippendo

1

Open your webshop's settings

Click Order channels in the menu on the left. On the Connected tab, click your Shopify webshop. You land on the Orders & checkout tab.
2

Choose the Zippendo checkout picker

Scroll down to the Service points at checkout card. Under Customers pick a service point from, choose Zippendo checkout picker.
Service points at checkout card with the list open: Rate list (one rate per service point), Service point map (Shopify, experimental) and Zippendo checkout pickerService points at checkout card with the list open: Rate list (one rate per service point), Service point map (Shopify, experimental) and Zippendo checkout picker

Choose Zippendo checkout picker

Can’t choose it, and it says Turn off service points in the cart first? Your customers already pick their service point in the cart. Only one of the two can be on: switch off Service points in the cart first.
3

Approve the new permissions, if Zippendo asks

If the card says Approve Zippendo’s new permissions in Shopify, click Approve in Shopify. Shopify opens and asks you to approve. Do that, come back to Zippendo, reload the page and choose Zippendo checkout picker again.
4

Open the checkout editor

The card now shows Checkout picker status, with Waiting for the first checkout until the picker has been shown to a customer. Click Open checkout editor. Shopify’s checkout editor opens in a new tab.
Service points at checkout card with Zippendo checkout picker chosen, the Checkout picker status, an Open checkout editor button, and boxes for an optional Google Maps key and an optional Google address search keyService points at checkout card with Zippendo checkout picker chosen, the Checkout picker status, an Open checkout editor button, and boxes for an optional Google Maps key and an optional Google address search key

Checkout picker status, with the Open checkout editor button

The two Google key boxes below are optional. You can add them now or later: see “A map and address search” at the bottom of this page.

​
Step 2: Add the Zippendo block to your checkout

The checkout editor is part of Shopify, so the names here are Shopify’s.
1

Open Apps

At the top of the left panel, click Apps: the third icon, with four small squares. You see Zippendo service point picker.
2

Add the block

Click the + next to Zippendo service point picker, then click Checkout.
The Apps panel of Shopify's checkout editor with Zippendo service point picker and a small menu: Add to, Checkout

Click + next to Zippendo service point picker, then Checkout

​
Step 3: Switch on two settings

The block’s settings open on the left, under Checkout behavior. Switch on both:
  • Allow app to block checkout: gives the picker a moment to save your customer’s choice before they pay. It never stops anyone from paying.
  • Include block in Shop Pay: customers who pay with Shop Pay see the picker too.
Settings of the Zippendo service point picker block, with Allow app to block checkout and Include block in Shop Pay both switched on

Both switches on

​
Step 4: Save

Click Save at the top right of the checkout editor. Want to check where the block went? Click the first icon at the top of the left panel: Zippendo service point picker sits under Shipping method.
The sections of the checkout in Shopify's checkout editor. Under Delivery, Ship, Shipping method and Shipping option list, the Zippendo service point picker block is listed

The block sits under Shipping method

​
Step 5: Try it as a customer

Open your webshop, put a product in the cart and go to checkout. Type a delivery address and choose your service point shipping method. The nearest service point is chosen for you. Click Change service point to see the others. Your customers can search for a postcode or a service point name and page through the list with the arrows. If you added a Google address search key, they can also search for an address or an area.
The picker opened in Shopify checkout: List and Map buttons, a search box, the nearest service points with their distance, and arrows to page through the list

After Change service point: search, and choose from the nearest service points

Back in Zippendo, the Checkout picker status changes from Waiting for the first checkout to Live. From now on, orders arrive with the service point your customer chose.
Until the picker has been shown in a checkout, Zippendo keeps showing one shipping method per service point, so your customers can always choose. When you want to stop using the picker, always switch it off in Zippendo first, and only then remove the block in Shopify.
Out of the box, customers get a list they can search by postcode or service point name. You can add two extras with your own Google keys:
  • A map: with a Google Maps key, customers can switch between List and Map, and choose a service point by clicking its pin.
  • Address search: with a Google address search key, customers can search for any address or area, and move the map to see the service points there.
Paste the keys into the two boxes on the Service points at checkout card. How to get them, step by step: Get Google keys for the service point map and address search.

​
Good to know

  • Apple Pay and Google Pay skip the part of checkout where the picker is. The order still comes in, and Zippendo uses the service point nearest to the delivery address.
  • Pickup in store or Shopify’s pickup points: if your webshop offers these, read the checkout editor steps on Service point picker in checkout.
  • Switch it off: on the card, choose Rate list (one rate per service point).
All the details: Service point picker in checkout