E-commerce
December 23, 2025
You sell online and in-store, but your customers struggle to identify the nearest store or up-to-date 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 journey, on the Storefront API GraphQL query locations. 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 points of sale: formatted address, opening hours, phone number, directions links, and, depending on the case, pickup availability or services (repair, in-store returns). For the buyer, the challenge is to reduce friction between intent (“I’m looking for a store near me”) and action (visit or order with pickup). For the brand, it is a critical touchpoint in the omnichannel journey: it must reflect operational reality (stock, teams, public holidays).
Customer journey and objectives
Before writing a single line of code, list the use cases: does a customer want to see a product’s stock availability on the storefront? Choose a pickup point for an ongoing order? Or simply find a store’s address for an appointment? Each intent requires different information: the street name alone is not enough if the point of sale is in a shopping center (floor directions, parking, accessibility access). Marketing and retail teams must validate the same naming rules: “Lyon Center Boutique” on the website and “Lyon Part-Dieu” on posters create confusion.
Also set measurable goals: click-through rate on “Directions,” number of pickups completed after using the store finder, or average time to find a store (user testing). Without these indicators, you won’t know whether a UX redesign improved conversion or only aesthetics. For international networks, anticipate time zones, local public holidays, and the display languages for addresses.
Business goal | Possible tracking indicator |
|---|---|
Boost in-store pickup | Share of orders with pickup vs delivery |
Reduce customer service calls asking “where are you?” | Volume of address-related tickets |
Qualify local traffic | Direction clicks by geographic area |
Finally, document who owns the data: the retail team updates opening hours, the IT department validates GPS coordinates, and 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 brief one, prevents discrepancies between on-the-ground reality and the website from piling up.
Locations and in-store pickup
Before any front-end integration, properly configure locations in the Shopify admin. The official help describes the management of storage and order fulfillment locations. Make sure each address is geocodable: the “address line 1,” city, region, and postal code fields 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. Without this activation, 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 its 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 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 variant availability via storeAvailability (inventory, estimated time pickUpTime, location name); retrieve the list of locations; optionally use the @inContext(preferredLocationId: ...) directive to align results with customer preference.
UX need | API entry point (Storefront) |
|---|---|
List of stores sorted by distance | Query |
Stock / pickup preparation time |
|
Prioritize a “favorite” store |
|
Consider 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 the user is not left staring 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 new point of sale.
Metaobjects and metafields can enrich each location: offered services (workshop, engraving), storefront photos, parking instructions. They do not replace native address fields but 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 requiring them to enter their address, web applications use the Geolocation API (MDN) exposed via navigator.geolocation. The getCurrentPosition and watchPosition methods accept success and error callbacks: plan for both to handle denial, timeout, or hardware unavailability. MDN reminds us that the API is available only in secure contexts (HTTPS) and that, for privacy reasons, the browser requests 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: ZIP/postal code or city field, alphabetical list, static map. Users may refuse geolocation, and some browsers or enterprise policies limit access. Permissions-Policy headers (MDN) can also restrict usage 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, this text must be converted into latitude and longitude to feed Shopify’s near argument or calculate distances client-side. Google Maps Platform’s Geocoding API converts an address into coordinates (forward geocoding) or the reverse (reverse geocoding); it requires Google Cloud project configuration, an API key, and compliance with terms of use, including specific EEA rules (Google Maps Platform terms) for accounts billed in the European Economic Area. Plan for handling ambiguities: several streets may have 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: the majority of local searches are done on smartphones. Provide sufficiently large touch targets, proper contrast, and help text for address fields. Avoid blocking page load with a heavy map: load location data progressively, cache responses client-side when relevant, and limit geocoding calls (cost and quotas). Clearly indicate the source of opening hours and the date of the last update when your organization frequently changes schedules.
SEO and local listings
The store finder does not replace a local visibility strategy: ensure consistency of NAP data (name, address, phone) across your site, your Google Business Profile listings, and relevant directories. Search engines rely on signal consistency 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 textual list of results, explicit labels on buttons, and understandable error messages if the search returns nothing. If you use a provider iframe, check the title attributes and the ability to exit the map flow using the keyboard.
Implementation steps
Validate locations in Shopify admin and in-store pickup for each relevant point of sale. Check addresses on a real map: an error in street number or postal code throws off all distance-based sorting.
Create a headless app or theme section that consumes the Storefront API with the correct scopes. Document environment variables (Storefront key, API URL) and the API versions you are targeting.
Implement the
locationsquery with pagination and distance sorting when you have coordinates. Provide an explicit empty state if no store is within range.Obtain user coordinates through consent or by geocoding the submitted form. Normalize inputs (trim, case) before calling a geocoding provider.
Display 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 refusal, JavaScript disabled (HTML fallback list), and supported 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 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 complete list when you manage many points of sale.
Approach | Advantages | Limitations |
|---|---|---|
Third-party app | Fast deployment, updates managed by the publisher | Less control over design and recurring costs |
Theme + custom section | Strong visual integration | Maintenance is your responsibility |
Headless / Storefront API | Tailored, omnichannel experience | Complexity and need for API expertise |
Merchants who use Shopify POS in-store must also synchronize on-the-ground realities: a store that is open in POS but poorly configured in online locations creates inconsistencies for the customer.
Best practices and mistakes to avoid
Best practices
Explicitly request consent before calling the Geolocation API and explain the benefit (sorting by distance).
Provide a sortable list or table even without JavaScript.
Update opening hours and holidays; recurring errors undermine trust.
Standardize addresses with delivery and pickup data to avoid contradictions.
Monitor performance and the number of network calls when the page loads.
Common errors
Error | Consequence | Fix |
|---|---|---|
Pickup not enabled at the location | Locations missing or incomplete in the API | Check the local pickup configuration |
Missing Storefront scope | GraphQL errors | Add |
No fallback if permission is denied | Blank or unusable page | City search or default list |
Outdated data | Customers arriving to find a closed door | Internal process for updating opening hours |
The benefits
Better conversion of local searches into visits or pickups.
Alignment between marketing promise and store capacity.
Support for click-and-collect: the customer knows where to go.
Data for local marketing (inventory, 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 fallback flows, proper accessibility, and recurring maintenance of opening hours. Specialized apps remain an alternative if you are not deploying custom development.
In summary, treat the store finder as a product: business owners, an improvement roadmap, user testing, and tracking incidents related to addresses. This discipline prevents the page from becoming a static map, disconnected from changes in 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?
Locations that support in-store pickup according to the locations query documentation; check scopes and 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 mandatory?
No. Browser geolocation and distance sorting may be enough; Google Maps or the Geocoding API improve address search and routing.
Why HTTPS?
The Geolocation API requires a secure context on the relevant browsers; 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 recording, still document usage in your privacy policy.
Multiple brands or domains
If you operate multiple Shopify stores or country-specific subdomains, centralize location logic to avoid duplicates and discrepancies in opening hours. The same warehouse can serve multiple channels: clarify what is publicly visible in the store finder.
Franchise networks and resellers
Franchisees sometimes manage their inventory locally: define who edits locations in the admin and how updates are reported back to headquarters. Quarterly reviews of store profiles reduce customer disputes.
Does the store finder display stock?
The locations list and in-store pickup rely on fulfillment configuration; stock details by variant go through storeAvailability on the product. Do not promise an item is on shelf without verifying this chain.
Go further
December 23, 2025
