E-commerce
December 23, 2025
You sell online and in-store, but do your customers struggle to identify the nearest store or up-to-date opening hours? A store locator (store finder) brings together addresses, availability, and pickup options on a clear page. On Shopify, it relies on your locations and, for a headless or custom experience, on the GraphQL query locations from the Storefront API. This guide connects merchant setup, official APIs, browser-side geolocation, and address geocoding, without relying on unverifiable third-party marketing statistics.
Summary
What is a store locator?
A store finder is a page or module that lists your physical stores: formatted address, opening hours, phone number, directions links and, depending on the case, pickup availability or services (repairs, in-store returns). For the shopper, the challenge is to reduce the friction between intent (« I’m looking for a store near me ») and action (visiting or ordering with pickup). For the brand, it is a critical touchpoint in the omnichannel journey: it must reflect operational reality (inventory, teams, public holidays).
Customer journey and objectives
Before writing a line of code, list the use cases: does a customer want to see a product's stock in the window display? Choose a pickup point for an ongoing order? Or simply find the address of a store for an appointment? Each intent requires different information: a street name alone is not enough if the store is in a shopping center (floor directions, parking, wheelchair access). Marketing and retail teams must validate the same naming rules: «Boutique Lyon Centre» on the website and «Lyon Part-Dieu» on posters create confusion.
Also set measurable objectives: click-through rate on «Directions», number of pickups fulfilled after passing through the store finder, or average time to find a store (user tests). Without these indicators, you won't know whether a UX redesign helped conversion or just aesthetics. For international networks, anticipate time zones, local public holidays, and address display languages.
Business objective | Possible tracking indicator |
|---|---|
Boost in-store pickup | Share of orders with pickup vs delivery |
Reduce customer support calls of «where are you?» | Volume of tickets related to the address |
Qualify local traffic | Directions clicks by geographic area |
Finally, document who owns the data: the retail team updates opening hours, the IT department validates GPS coordinates, marketing harmonizes labels. A degraded store finder is almost always a governance issue, not just a technical one. A quarterly review of store listings, even a short one, prevents discrepancies from piling up between the field and the website.
Locations and in-store pickup
Before any front-end integration, configure the locations correctly in the Shopify admin. The official help describes managing storage and order fulfillment locations. Make sure each address is geocodable: the fields “address line 1”, city, region, and postal code must match the postal standards of the country served. To offer in-store pickup on the online store, you must enable this method for one or more locations: the procedure is detailed in the guide on local pickup (local pickup). Without this activation, the API features related to in-store pickup do not reflect a service actually offered to customers. If a store is temporarily closed for renovations, update the hours or disable pickup at that location to avoid disappointment.
Storefront API: locations and availability
The developer documentation specifies that the locations query requires the unauthenticated_read_product_pickup_locations access scope and returns locations that support in-store pickup. You can sort the results by proximity by passing the near argument with coordinates (GeoCoordinateInput) and setting sortKey to DISTANCE. The guide Support local pickup on storefronts shows how to: query a variant's availability via storeAvailability (inventory, estimated pickUpTime, location name); retrieve the list of locations; and optionally use the @inContext(preferredLocationId: ...) directive to bring the results closer to the customer's preference.
UX need | API entry point (Storefront) |
|---|---|
List of stores sorted by distance | Query |
Inventory / preparation time for pickup |
|
Prioritize a "favorite" store |
|
Think about pagination if you expose dozens of locations: a single query can increase client-side response time. Split by region, country, or page, and display a loading indicator so you do not leave the user looking at a blank screen. For testing, use development accounts and demo stores: validate both the "single store" and "national network" cases to avoid regressions when you add a point of sale.
The metaobjects and metafields can enrich each location: services offered (workshop, engraving), storefront photos, parking instructions. They do not replace native address fields, but they complement the experience when you build a custom theme section that merges Shopify data and editorial content.
Browser geolocation and privacy
To obtain the user's location without them entering their address, web applications use the Geolocation API (MDN) exposed via navigator.geolocation. The methods getCurrentPosition and watchPosition accept success and error callbacks: plan for both to handle denial, timeout, or unavailable hardware. MDN notes that the API is available only in secure contexts (HTTPS) and that, for privacy reasons, the browser asks for permission before transmitting coordinates.
“For privacy reasons, the user must grant permission for location information to be shared.”
MDN Web Docs, Geolocation API (MDN)
Always provide an alternative path: postal code or city field, alphabetical list, static map. Users may refuse geolocation, and some browsers or corporate policies limit access. Permissions-Policy headers (MDN) can also restrict use in third-party iframes: document these constraints if you integrate the store finder into a group website.
Geocoding and maps
When a customer enters an address or postal code, you need to convert that text into latitude and longitude to feed Shopify's near argument or compute distances client-side. Google's Geocoding API from Maps Platform converts an address into coordinates (forward geocoding) or the reverse (reverse geocoding); it requires a Google Cloud project setup, an API key, and compliance with the terms of use, including the specific EEA rules (Google Maps Platform terms) for accounts billed in the European Economic Area. Plan for handling ambiguities: several streets share the same name in a region; offer a list of candidates rather than a silent, incorrect choice. Even without an interactive map, you can display a “Directions” link to an external mapping service for each address.
UX, accessibility and performance
A good store finder remains readable on mobile: most local searches are done on smartphones. Provide sufficient touch targets, proper contrast, and helper text for address fields. Avoid blocking page load on a heavy map: load location data progressively, cache responses on the client side when appropriate, and limit geocoding requests (cost and quotas). Clearly indicate the source of the hours and the date of the last update when your organization changes schedules frequently.
SEO and local listings
A store finder does not replace a local visibility strategy: ensure consistency of the NAP data (name, address, phone) between your site, your Google Business Profile listings, and relevant directories. Search engines rely on consistent signals for “near me” queries. For the site itself, dedicated pages or anchors by city or region can help cover long-tail queries; cross-reference with your e-commerce SEO guide and your markup best practices.
Accessibility
Interactive maps often pose accessibility challenges (screen readers, keyboard navigation). Provide an equivalent text list of results, explicit labels on buttons, and understandable error messages if the search returns nothing. If you use a vendor iframe, check the title attribute and the ability to exit the map flow with the keyboard.
Implementation steps
Validate locations in the Shopify admin and in-store pickup for each relevant location. Check the addresses on a real map: an error in the street number or postal code throws off all distance-based sorting.
Create a headless app or a theme section that consumes the Storefront API with the correct scopes. Document the environment variables (Storefront key, API URL) and the API versions you are targeting.
Implement the
locationsquery with pagination and distance-based sorting when you have coordinates. Provide an explicit empty state if no store is within range.Obtain user coordinates via consent or by geocoding the entered form. Normalize inputs (trim, casing) before calling a geocoding provider.
Display the results as cards or a list, with actions (directions, call, hours). On mobile, prioritize the list above the map for a useful first screen.
Test geolocation denial, JavaScript disabled (HTML fallback list), and served countries. Also simulate high network latency to verify that spinners and error messages remain understandable.
Monitor quotas and billing for external map APIs. Alert the finance team if marketing traffic increases sharply.
Apps and alternatives
If you don't have development resources, the App Store offers store locator solutions with geolocation and location import: compare the features, recurring costs, and compatibility with your theme and your extensible checkout. A chatbot can complement the experience for simple questions (« where is your store in Lyon? »), but it does not replace a full list when you manage many points of sale.
Approach | Advantages | Limitations |
|---|---|---|
Third-party app | Fast deployment, updates handled by the vendor | Less control over design and recurring costs |
Theme + custom section | Strong visual integration | Maintenance is your responsibility |
Headless / Storefront API | Custom, multi-channel experience | Complexity and need for API expertise |
Merchants who use Shopify POS in-store must also keep on-the-ground realities in sync: a store marked open in POS but misconfigured in online locations creates inconsistencies for the customer.
Best practices and mistakes to avoid
Best practices
Explicitly ask for consent before calling the Geolocation API and explain the benefit (distance-based sorting).
Provide a sortable list or table even without JavaScript.
Update hours and holidays; a recurring error undermines trust.
Harmonize addresses with delivery and pickup data to avoid contradictions.
Monitor performance and the number of network calls when the page loads.
Common mistakes
Error | Consequence | Fix |
|---|---|---|
Pickup not enabled for the location | Missing or incomplete locations in the API | Check the configuration local pickup |
Missing Storefront scope | GraphQL errors | Add |
No fallback if denied | Empty or unusable page | City search or default list |
Outdated data | Customers on-site at a closed door | Internal process for updating hours |
The advantages
Better conversion of local searches into store visits or pickup.
Alignment between the marketing promise and store capacity.
Support for click-and-collect: the customer knows where to go.
Data for local marketing (ongoing activity, in-store events).
Complete with a chatbot
An AI chatbot like Qstomy can answer questions about stores: opening hours, services, pickup. It directs users to your store finder page or summarizes the key information. See chatbot for e-commerce and AI chatbot integration on Shopify.
Summary
An effective store locator combines Shopify configuration (locations, local pickup), data exposed by the Storefront API (locations, storeAvailability), browser geolocation with consent, and optionally geocoding via a map provider. Plan for fallback paths, proper accessibility, and recurring maintenance of opening hours. Specialized apps remain an alternative if you are not deploying custom development.
In short, treat the store finder as a product: business owners, improvement roadmap, user testing, and tracking of address-related incidents. This discipline prevents the page from becoming a static map, disconnected from the evolution of your physical network.
FAQ
Is development required?
For a custom integration with the Storefront API and a map, yes. For a turnkey solution, apps from the Shopify App Store often cover the need.
Which locations are exposed?
The locations that support in-store pickup according to the documentation for the locations query; check the scopes and the configuration in the admin.
Can a chatbot replace a store finder?
For a handful of stores, it may be enough. For a dense network, a dedicated page remains clearer.
Is Google Maps required?
No. Browser geolocation and distance sorting can be enough; Google Maps or the Geocoding API improve address search and directions.
Why HTTPS?
The Geolocation API requires a secure context on the browsers concerned; serve your store over HTTPS.
Location data and GDPR
Inform users of the purpose of processing, retention period, and legal basis if you store coordinates; for purely local flows without server-side storage, still document the use in your privacy policy.
Multiple brands or domains
If you operate multiple Shopify stores or country subdomains, centralize the location logic to avoid duplicates and schedule discrepancies. The same warehouse can serve multiple channels: clarify what is publicly visible on the store finder.
Franchise and reseller networks
Franchisees sometimes manage their inventory locally: define who edits locations in the admin and how updates are sent back to headquarters. Quarterly reviews of store listings reduce customer disputes.
Does the store finder display stock?
The locations list and in-store pickup rely on fulfillment configuration; variant-level stock details come through storeAvailability on the product. Do not promise an item on the shelf without verifying this chain.
Learn more
December 23, 2025
