How to Add an Interactive Pickup Point Map to Shopify

Hong Kong shoppers don't just want SF Express pickup—they want to find the right locker or pickup point quickly, often on mobile, near home, work, or an MTR station.

A plain address field at checkout isn't enough. An interactive pickup point map lets customers see locations visually, compare nearby options, and choose with confidence—before the shipping address is filled in.

This guide explains why maps matter for SF Express pickup on Shopify, what Shopify does (and doesn't) provide out of the box, and how Hong Kong Pickup Points delivers a built-in map experience without custom development.

Why an interactive map matters for SF Express pickup

SF Express operates one of Hong Kong's largest self-service logistics networks. SF Locker (EF Locker) alone covers 900+ lockers across residential estates, malls, commercial buildings, and transport hubs—many available around the clock.

Hong Kong's MTR-centred lifestyle makes map-based selection especially valuable. Most residents commute by public transport, and SF has placed lockers along those daily routes—in podiums, malls, and near stations—so customers can pick a point on their way home rather than search by district name alone.

Alongside lockers, customers can collect from staffed SF Express stores and partner pickup points. That's a lot of locations to search by address alone.

An interactive map helps because it:

The goal isn't just "show a map." It's to help customers discover, compare, and confirm the right SF Express location in seconds.

What Shopify provides natively

Shopify excels at checkout, shipping zones, and rates—but it does not ship with:

• A database of SF Express pickup points and lockers
• An interactive map for carrier pickup selection
• GPS-based nearby search for logistics locations
• Automatic address prefill from a selected SF Express point

Shopify's native local pickup feature is designed for your retail locations, not SF Express's citywide network. For SF Locker and SF Express points, merchants typically use a dedicated pickup app from the Shopify App Store or build a custom integration.

With 1,200+ locations across Hong Kong, list-only dropdown selection quickly becomes unwieldy. Hong Kong Pickup Points is built for this scale: it combines an interactive map, GPS-based nearby search, and list filtering in one checkout flow—so customers can find the right SF Express point without scrolling through hundreds of names.

Build your own map vs use a pickup app

Option A: Custom build

You could integrate a third-party maps provider, maintain your own pickup-point database, sync SF Express data, and wire selection into checkout URL prefill. That gives full control, but you inherit:

• Ongoing data sync (SF adds, closes, and moves locations)
• Geocoding and coordinate accuracy
• Multilingual labels (English, Traditional Chinese, Simplified Chinese)
• Mobile geolocation permissions and privacy handling
• Theme and checkout installation and maintenance

Option B: Use a dedicated Shopify app (recommended)

A purpose-built app handles the heavy lifting: location data, map UI, checkout address population, and theme integration. For most Hong Kong merchants, this is faster, cheaper, and more reliable than maintaining a custom map stack.

What Hong Kong Pickup Points provides

Hong Kong Pickup Points is built specifically for Hong Kong Shopify stores. Its map is integrated into the customer pickup flow—not bolted on as a separate page.

Interactive map at checkout

When customers choose Pickup from Locker/Point, they can switch between List and Map views. The map includes:

• Clustered markers when many points are close together (zoom in to expand clusters)
• Provider-specific pin icons with a highlighted selected state
• Popups showing pickup point details when a marker is tapped
• Pan and zoom controls optimised for mobile and desktop
• Localized map labels (English, Traditional Chinese, and Simplified Chinese)

The map defaults to a Hong Kong-centred view and automatically fits bounds to visible pickup points.

Two search modes: filter and GPS location

Customers can find pickup points in two ways:

Filter mode — Browse by:

• Provider (e.g. SF Express locker, SF Express store, partner locations)
• Area (Hong Kong Island, Kowloon, New Territories, Macau)
• Sub-district

Use current location — With the customer's permission, the app:

• Reads device GPS coordinates
• Fetches nearby pickup points from the server (sorted by distance)
• Shows the customer's position on the map
• Zooms to their location for quick nearby selection

Location data is used only to return results and is not retained on the server.

Standalone "View Map" page per location

Each pickup point can open a dedicated map page in a new tab—useful when customers want a larger map, working hours, and address details before deciding. This works for both SF Express points and custom retail stores (Pro plan).

1,200+ automatically updated locations

The app includes 1,200+ SF Express pickup points and lockers across Hong Kong, kept up to date as the network changes. That accuracy matters for shipping: when a customer picks a location on your map, the address passed into Shopify checkout must match a real, active pickup point. Wrong or outdated entries lead to failed deliveries, courier rejections, and support tickets after the order is placed.

With a maintained pickup list, your map and checkout stay aligned—customers choose valid locations, you fulfil with confidence, and you avoid manually tracking which lockers or stores are still open.

Checkout address prefill

After a customer selects a point on the map (or in the list), the app passes the formatted address into Shopify checkout shipping fields—so the map isn't just visual; it drives accurate checkout data.

How to add the interactive map to your Shopify store

If you already installed Hong Kong Pickup Points, follow these steps to enable the map experience.

Step 1: Install the app and choose a plan

1. Install from the Shopify App Store.
2. Start the 14-day free trial on Starter or Pro.
3. Both plans include built-in map display and GPS-based location detection.

Step 2: Install on your storefront

1. Open Getting Started or Install App in the merchant portal.
2. For Online Store 2.0 themes: enable the theme app extension in the Theme Editor.
3. For older themes: use the checkout script (script tag) fallback.

See the full walkthrough in How to Add SF Express Pickup Points to Shopify.

Step 3: Enable the map in Settings

1. Go to Settings in the app.
2. Set App Status to Enabled.
3. Turn on Show Pickup Points Map.
4. Select the providers and service areas you want on the map.
5. Save changes.

When the map is enabled, customers default to Map view in the pickup selector (they can still switch to List).

Step 4: (Optional) Add your retail stores to the map — Pro

On the Pro plan, add custom retail pickup locations with address, business hours, and map coordinates. Merchant geocoding uses the English address and sub-district, with an optional draggable pin for fine-tuning. These stores appear alongside SF Express markers.

Step 5: Test on mobile

1. Add a product and click Checkout.
2. Choose Pickup from Locker/Point.
3. Confirm the Map tab loads with clustered markers.
4. Try Use current location and verify nearby points appear.
5. Select a marker, continue to Shopify checkout, and confirm the address is pre-filled.

Most Hong Kong customers will use the map on mobile—test there first.

Best practices for pickup maps on Shopify

1. Offer list and map — Some customers prefer scrolling; others prefer the map. Support both.
2. Keep home delivery — Map-based pickup is an alternative, not a replacement.
3. Be transparent about location permission — Only request GPS when the customer taps "Use current location."
4. Use clear copy — Mention SF Express lockers, pickup points, and (if applicable) your retail stores.
5. Limit providers by strategy — Hide provider types or areas you don't actually fulfil through.
6. Test after theme changes — Re-check the map if you switch themes or edit the app embed.

Common questions

Does the map work without Shopify Plus?
Yes. The pickup map runs on the storefront before standard Shopify checkout—no Plus requirement for the map itself.

Do I need my own maps API key?
No. The app manages map infrastructure for the customer-facing pickup experience.

Can customers still pick a point without sharing GPS?
Yes. Filter mode (area, district, provider, list) works without location permission.

How often are SF Express locations updated?
The pickup list is updated regularly so new, moved, or closed locations stay accurate on your map and at checkout—without you maintaining spreadsheets.

Next steps

An interactive pickup map turns a overwhelming list of 1,200+ SF Express locations into a fast, visual choice—especially on mobile. For Hong Kong Shopify merchants, that means less checkout friction, fewer address mistakes, and a pickup experience shoppers already expect from local ecommerce.

• Install Hong Kong Pickup Points from the Shopify App Store
• Read How to Add SF Express Pickup Points to Shopify for full setup steps
• See the Complete Guide to SF Locker for Shopify Stores