# Store locator Source: 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](https://console.cloud.google.com/), 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](https://developers.google.com/maps/documentation/javascript/get-api-key). 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](https://docs.ictsviluppo.example/dossier/scheduling). Single stores can’t be scheduled. ## Settings | 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](https://developers.google.com/maps/documentation/javascript/get-api-key) | 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 | 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 | — | — |