---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features)
- [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)
- [Set up the store locator and store pages](https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages)
# Set up the store locator and store pages
The Location Finder shows locations with search, filters, list and a Google Maps view, while Location Detail presents a single location with opening hours and contact options. It requires an app with location data, a Google Maps API key and a Map ID per section.
## Before you start
- Plan
- Laioutr UI licence for the project (platform edition)
- Role
- Editor or Admin in the project; development for the API key
- Duration
- 8 min
### Prerequisites
- App with location data installed and connected
- Google Maps API key in the project configuration
- Map ID from the Google Cloud Console
Last reviewed on October 15, 2026
The store locator helps customers find the nearest store, dealer or pickup point. Laioutr UI provides two sections for it that display location data from a connected app.
### Location Finder
The **Location Finder** combines a search field, filters, a list of locations and a Google Maps view. Search works by name and address. On desktop, list and map sit side by side, and selecting a location centres the map. On mobile, two tabs switch between list and map, and the selected location appears as a card at the bottom. Each entry offers directions, a call button and a link to the detail page.
### Location Detail
**Location Detail** shows a single location with a map at the top, name, opening status, features and buttons for directions, call and email. Below follow address, opening hours as a weekly schedule and further details such as payment methods.
The map needs a Google Maps API key for the project and a Map ID per section.
## Step by step
1. 1 ### Step 1: Connect location data
In Cockpit, check under Apps that an app is installed and connected that provides locations with address, coordinates and opening hours.
2. 2 ### Step 2: Have the API key added
Development adds the Google Maps API key to the project configuration. Restrict the key to the project's own domains in the Google Cloud Console, because it is visible in the browser.
3. 3 ### Step 3: Add the Location Finder
Open the store finder page in Studio and add the **Location Finder** section. Enter the Map ID from the Google Cloud Console in the **Google Maps Map ID** field.
4. 4 ### Step 4: Choose the layout
Decide whether the finder uses the full width or sits centred as a boxed card. Add a heading that names the offer, such as stores or dealers.
5. 5 ### Step 5: Design the detail page
Open the page for single locations, add the **Location Detail** section and enter the Map ID here as well. Add further sections below as needed, such as store promotions.
6. 6 ### Step 6: Save and publish
Use **Save** to store the draft and **Publish** once everything looks right.
## Check the result
Search for a city in the preview, select a location in the list and check that the map moves to it. In the mobile view, switch between list and map, then open the detail page and test the opening hours and the directions and call buttons.
## Frequently asked questions
Why does the map stay empty?
Usually the Google Maps API key is missing from the project configuration or the Map ID from the section. Search, list and filters keep working without a key, only the map stays empty. The browser console names the missing setting.
Where do opening hours and opening status come from?
From the location data of the connected app. Opening hours contain a weekly schedule with a time zone and exceptions for single days. From this, the storefront shows whether a location is currently open and groups days with the same hours into one row.
Which filters are available?
The filters derive from the location data, such as services or features of a store. They are shown in the same filter panel as on product listings.
## Related
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min
Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.
- [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min
Header Shop, Mega Menu or Menu Side by Side, Top Bar and Footer form the navigation of a storefront and are usually maintained as global sections. In Studio, menu items, search, service links, contact details and footer columns are set up once and adapted per language.
- [Page type recipes: home, product listing, product detail, content](https://academy.laioutr.com/en/artikel/page-type-recipes-home-listing-detail-content)6 min
The main page types have proven recipes: which path applies, which data the page loads and which sections it typically contains. This overview helps to build a complete and consistent storefront.
## [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation)
Search this guide
1. [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min
2. [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min
3. [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min
4. [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)8 min
5. [Set up the store locator and store pages](https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages)8 min
6. [Build a pricing page with plan cards and a comparison table](https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table)9 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront features",
"item": "https://academy.laioutr.com/en/bereiche/storefront-features",
"position": 2
},
{
"@type": "ListItem",
"name": "Content and navigation",
"item": "https://academy.laioutr.com/en/leitfaeden/content-and-navigation",
"position": 3
},
{
"@type": "ListItem",
"name": "Set up the store locator and store pages",
"item": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Why does the map stay empty?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Usually the Google Maps API key is missing from the project configuration or the Map ID from the section. Search, list and filters keep working without a key, only the map stays empty. The browser console names the missing setting.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Where do opening hours and opening status come from?",
"acceptedAnswer": {
"@type": "Answer",
"text": "From the location data of the connected app. Opening hours contain a weekly schedule with a time zone and exceptions for single days. From this, the storefront shows whether a location is currently open and groups days with the same hours into one row.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "Which filters are available?",
"acceptedAnswer": {
"@type": "Answer",
"text": "The filters derive from the location data, such as services or features of a store. They are shown in the same filter panel as on product listings.
"
}
}
]
}
```