Skip to main content

Enabling the map on the Checkout page (Shopify Plus)

The Map display on Checkout integration displays the map-based pickup point selection solution directly on the Checkout page, fitting seamlessly into the purchase flow. This integration requires a Shopify Plus plan; if you have a lower plan but still want to offer pickup point selection during checkout, see the Setting up the Checkout pickup point list article.

Enabling the Checkout map

  1. In the Shopify admin, open the PickupBird by Digiloop app and go to the Integration and Design menu.

  2. Select the Map display on Checkout option by clicking Settings.

  3. On the Checkout design tab that appears, you need to enter an active Google Maps API key for the map to display.

  4. Save by clicking Activate.

  5. Under App extensions, if Shopify Plus is active and the API key is saved, activate the integration.

If you get stuck, contact PickupBird support by email or via the in-app chat.

Setting up app extensions

You've already activated the integration in the PickupBird by Digiloop app, but for it to display correctly in your store, you also need to configure the Shopify extensions. On the General Settings tab, in the App extensions section, set up the elements you want to use by clicking Checkout settings.

Use the Pickup point selector Map display on Checkout page settings to place the interactive map on the relevant page.

Use the Selected pickup point on Thank you page and Selected pickup point on Order Status page settings to place the block showing the selected pickup point on the relevant page.

Example setup using the Pickup point selector Map display on Checkout page

  1. Click Checkout settings for this element, which opens the Checkout page editor.

  2. Find the Package Point Checkout Map element under the PickupBird by Digiloop block, and add the map element to the Checkout page using the + icon.

  3. Use the Sections icon in the top right to open the page structure in the editor.

  4. Simply move the Package Point Checkout Map element to the location where you want it displayed.

  5. Save the settings by clicking Save.

  6. Close the page to return to the PickupBird by Digiloop app.

  7. Click the Refresh link so the app can verify that the settings are correct.

    • Status: On - you have already activated the extension

    • Status: Off - you haven't activated the extension yet

  8. Repeat for each extension element.

Did this answer your question?