Store locator

Store locator lists your physical stores with their address, phone, opening hours and directions, and lets customers find the nearest one by typing a city or postal code or by sharing their location. With a Google Maps API key it also shows the stores on a map. Use it on a “Find a store” page; it works on any page.

Create the store locator page

The theme includes a page template made for this section. In your Shopify admin, go to Online Store > Pages, create a page such as “Stores”, and under Theme template choose store-locator. The page shows its title and content first, then the Store locator. Then add the page to your menu so customers can find it.

You can also add the section to any other page from the theme editor.

Add your stores

Each store is a Store block, up to 50 per section. The block’s Name is also what you see in the theme editor sidebar, so you can tell your stores apart. A store without a name is hidden.

• Address: write it the way it’s written in that country, one line per row. The Directions link opens Google Maps with the route to this address, so make it complete.
• Phone and Email become links that call or write to the store. Leave them empty to hide them.
• Latitude and Longitude place the store on the map and are needed for distance search. In Google Maps, right-click the store and select the coordinates at the top of the menu to copy them; paste the first number in Latitude and the second in Longitude. A store without coordinates still appears in the list, but not on the map.
• Opening hours: write each day as you want customers to read it, such as “10:00 AM–7:00 PM”, or “Closed”. Leave a day empty to hide it. Today’s day is highlighted for the customer. Hours written as a time range can also be read by search engines.
• Button: an optional extra link for each store, such as “Book an appointment”. Fill in both Label and Link.

With a single store, the section skips the search and shows that store’s details straight away.

If you have more than 50 stores, add a second Store locator section below the first, for example one per country. Each section searches only its own stores, so give stores in different sections different names.

Get a Google Maps API key

The map and the search by address are provided by Google and need your own API key. The theme doesn’t include one, and Google bills the use of the key to your Google account. Google offers a monthly free allowance, which a store locator often stays within, but check the current pricing on Google’s site.

1. Sign in to the Google Cloud console, create a project and set up a billing account for it.
2. In APIs and services, enable the Maps JavaScript API and the Geocoding API. The first draws the map, the second turns what customers type into a place on the map.
3. In APIs and services > Credentials, create an API key.
4. Restrict the key, so nobody else can use it on their website:
   • under Application restrictions, choose Websites and add your store’s domains, for example https://www.yourstore.com/* and https://yourstore.myshopify.com/*;
   • under API restrictions, allow only the Maps JavaScript API and the Geocoding API.
5. Copy the key and paste it in Google Maps API key in the section.

Google explains each step in Use API keys. Changes to a key can take a few minutes to apply.

If the key is wrong, restricted to other domains or over its quota, the map area says that the map isn’t available and the list stays usable. The theme editor reminds you when the key is missing.

How the search works

With a key, customers type a city, address or postal code, or select Use my location; the browser asks for their permission first. The section then:

• keeps the stores within the Search radius, nearest first, with the distance in the Distance unit you chose;
• if none is close enough, says so and names the nearest store, with a button to see it;
• with No limit, sorts all the stores by distance, and lists stores without coordinates at the end.

Use my location appears only if at least one store has coordinates. Turn it off with Show location button if you prefer customers to type.

Without a key there is no map. The search box then finds stores whose name or address contains what customers type, and the stores appear as cards with all their details. Use my location still works, measuring distances from the coordinates you entered.

If the browser has JavaScript turned off, customers see the full list of stores, and each name leads to that store’s details.

Ask for cookie consent before showing the map

When the map loads, Google receives the customer’s IP address and may set cookies. In regions where privacy law requires consent first, such as the European Union, turn on Ask for cookie consent before showing the map.

With it on, the map loads only for customers who accept preferences cookies in the cookie banner of your store, which you set up in Settings > Customer privacy in your Shopify admin. Other customers see a short note and a Show map button that loads the map for that visit only. If they accept cookies later, the map appears by itself. Until the map loads, the search filters stores by text, as it does without a key. For customers in regions where your banner doesn’t ask for consent, the map loads as usual.

Whether you need this depends on where you sell and on your privacy policy. If in doubt, ask your legal advisor.

Arrange the page

On computers the search and the store list sit in one column and the map in the other; Map position on desktop chooses the side. In right-to-left languages, such as Arabic and Hebrew, the sides swap automatically. On phones and tablets the search comes first, then the map, then the list. Selecting a store opens its details in place of the list, and All stores goes back.

The map loads just after the rest of the page, so it doesn’t slow down the first view.

Show it only between two dates

Turn on Schedule visibility and set a start, an end, or both. See Scheduling. Single stores can’t be scheduled.

Settings

Settings: Store locator

Setting	Type	Default	Options
Heading	Text	Find a store	—
Map
Google Maps API key Required to show the map and search by address. Turn on the Maps JavaScript API and the Geocoding API for the key, and restrict it to your store's domains. Learn more	Text	—	—
Map position on desktop In right-to-left languages, the map shows on the opposite side. Shown when Google Maps API key is set	Drop-down	Right	Right Left
Ask for cookie consent before showing the map Google Maps may set cookies. When on, the map loads only for customers who accept preferences cookies in your store's cookie banner, or who select Show map. Shown when Google Maps API key is set	Checkbox	Off	—
Search
Show location button Customers can search from where they are. The browser asks for permission first.	Checkbox	On	—
Distance unit	Drop-down	Kilometers	Kilometers Miles
Search radius Measured in the distance unit above. Stores farther away are hidden after a search.	Drop-down	100	25 50 100 250 500 No limit
Layout
Use full page width	Checkbox	On	—
Vertical spacing	Drop-down	Compact	Compact Regular Spacious
Color scheme	Color scheme	scheme-1	—
Schedule
Schedule visibility	Checkbox	Off	—
Start date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when Schedule visibility is on	Text	—	—
End date and time Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when Schedule visibility is on	Text	—	—

Blocks

Store

Settings: Store

Setting	Type	Default	Options
Name	Text	Store name	—
Address	Multi-line text	Street and number Postal code, City Country	—
Phone	Text	—	—
Email	Text	—	—
Location on map
Latitude	Text	—	—
Longitude	Text	—	—
Opening hours
Monday	Text	—	—
Tuesday	Text	—	—
Wednesday	Text	—	—
Thursday	Text	—	—
Friday	Text	—	—
Saturday	Text	—	—
Sunday	Text	—	—
Button
Label Leave blank to hide the button.	Text	—	—
Link	Link	—	—