> ## Documentation Index
> Fetch the complete documentation index at: https://www.zippendo.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Add the service point picker to Shopify checkout

> Step by step, with pictures. On Shopify Plus, let your customers choose their service point in a picker under the shipping method, instead of scrolling a long list.

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](https://mintcdn.com/zippendo/3iHx7f4_tYAQ-H01/images/tutorials/shopify-service-point-picker/06-checkout-picker.png?fit=max\&auto=format\&n=3iHx7f4_tYAQ-H01\&q=85\&s=03434e9719adebf1a89e2347ee4edf46)

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.

> [!NOTE]
>
> **What you need**
>
> * A Shopify webshop on the **Shopify Plus** plan. Shopify only lets apps add things to the checkout page on Shopify Plus.
> * Your shipping prices at checkout. See [Show your shipping prices in Shopify checkout](https://www.zippendo.com/docs/tutorials/shopify-checkout-prices.md).
> * A [shipping rule](https://www.zippendo.com/docs/tutorials/shipping-rules.md) that delivers to a service point, such as "GLS Pakkeshop".

> [!NOTE]
>
> 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](https://www.zippendo.com/docs/tutorials/shopify-checkout-prices.md).

## 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 picker](https://mintcdn.com/zippendo/3iHx7f4_tYAQ-H01/images/tutorials/shopify-service-point-picker/01-service-point-choice-light.png?fit=max\&auto=format\&n=3iHx7f4_tYAQ-H01\&q=85\&s=725c3d71cc793788b2ac4db56c72ccda)

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 key](https://mintcdn.com/zippendo/3iHx7f4_tYAQ-H01/images/tutorials/shopify-service-point-picker/02-picker-status-light.png?fit=max\&auto=format\&n=3iHx7f4_tYAQ-H01\&q=85\&s=44ae3f93d8bef66cf0965987d9cbb618)

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](https://mintcdn.com/zippendo/3iHx7f4_tYAQ-H01/images/tutorials/shopify-service-point-picker/03-shopify-editor-add-block.png?fit=max\&auto=format\&n=3iHx7f4_tYAQ-H01\&q=85\&s=b8af27f9bc947d59b6bbca1e0a0592bd)

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](https://mintcdn.com/zippendo/3iHx7f4_tYAQ-H01/images/tutorials/shopify-service-point-picker/04-shopify-editor-block-settings.png?fit=max\&auto=format\&n=3iHx7f4_tYAQ-H01\&q=85\&s=947e4915901fcb23b90c8b008d6b489e)

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](https://mintcdn.com/zippendo/3iHx7f4_tYAQ-H01/images/tutorials/shopify-service-point-picker/05-shopify-editor-block-placed.png?fit=max\&auto=format\&n=3iHx7f4_tYAQ-H01\&q=85\&s=d982185736a3da235625650b930b69dd)

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](https://mintcdn.com/zippendo/3iHx7f4_tYAQ-H01/images/tutorials/shopify-service-point-picker/07-checkout-picker-list.png?fit=max\&auto=format\&n=3iHx7f4_tYAQ-H01\&q=85\&s=5bd91e8d8cb986d303edc9f2be5ba6c2)

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

> [!TIP]
>
> 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.

> [!WARNING]
>
> 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.

## A map and address search

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](https://www.zippendo.com/docs/how-to/google-maps-key.md).

## 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](https://www.zippendo.com/docs/order-channels/shopify-checkout-pickup-picker.md).
* **Switch it off**: on the card, choose **Rate list (one rate per service point)**.

All the details: [Service point picker in checkout](https://www.zippendo.com/docs/order-channels/shopify-checkout-pickup-picker.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.