The Store locations section in Maison lets you display multiple physical stores, showrooms, pickup points, or regional locations in one organized section.
Customers can:
- Browse your store list
- Filter stores by region
- View each store's address, opening hours, phone number, and services
- Open a directions link
- Select locations from a map
- Use either a custom map image or an interactive Google map
Maison supports up to 12 Store blocks in one Store locations section.
Section overview
The Store locations section includes two main areas:
- Store list — displays each store's details
- Map — displays matching location pins
On larger screens, Maison displays the store list beside the map. On smaller screens, the layout stacks vertically.
The Maison demo uses:
| Setting | Demo value |
|---|---|
| Map type | Interactive Google map |
| Map style | Light |
| Zoom when a store is selected | 16 |
| Allow drag and zoom | Enabled |
| Show region filter | Enabled |
| Section width | Page |
| Stores | 4 |
| Regions | Europe, Asia, Americas |
STEPS:
1. Add the Store locations section
To add Store locations:
- Open the Maison theme editor.
- Open the page template where you want to display your stores.
- Click Add section.
- Select Store locations.
- Choose the required Map type.
- Add your Store blocks.
- Configure the section settings.
- Click Save.
Maison supports up to 12 Store blocks in the section.
2. Choose the Map type
Maison provides two Map types:
| Map type | Description |
|---|---|
| Map image | Uses your own uploaded image and lets you position each store pin manually. |
| Interactive Google map | Uses Google Maps and places stores using Latitude and Longitude. |
Choose the option that best matches your setup.
Map image
Use this option when you want a fully designed or branded map image.
You do not need a Google Maps API key for this mode.
Each Store block provides:
- Horizontal position
- Vertical position
These settings control where that store's pin appears on the image.
Interactive Google map
Use this option when you want a live Google map.
Each Store block requires:
- Latitude
- Longitude
The interactive map also requires a valid Google Maps API key in Maison's Theme settings.
3. Set up the Google Maps API key
The Interactive Google map option requires a Google Maps API key.
To add the key:
- Open the Maison theme editor.
- Open Theme settings.
- Open Maps.
- Find Google Maps API key.
- Enter your API key.
- Click Save.
Maison's Maps settings recommend enabling the following Google Maps Platform APIs for the key:
- Maps JavaScript API
- Maps Static API
- Geocoding API
The key should also be restricted to your store domain.
4. Add a Store block
Each Store block represents one physical location.
To add a store:
- Open the Store locations section.
- Click Add block.
- Select Store.
- Enter the store information.
- Configure its map location.
- Click Save.
Available Store settings include:
| Setting | Description |
|---|---|
| Region | Groups the store under a region filter. |
| City | Displays the city above the store name and beside the map pin. |
| Title | The store or showroom name. |
| Address | Displays the store address. |
| Hours | Displays opening hours. |
| Phone | Displays the phone number. |
| Services | Displays available services. |
| Directions link | Opens an external directions page. |
| Latitude | Interactive Google map only. |
| Longitude | Interactive Google map only. |
| Horizontal position | Map image only. |
| Vertical position | Map image only. |
Example:
| Setting | Example |
|---|---|
| Region | Europe |
| City | Paris |
| Title | Saint-Germain Flagship |
| Address | 16 Boulevard Saint-Germain, 75005 Paris, France |
| Hours | Mon–Sat 10:00–19:00 · Sun 12:00–18:00 |
| Phone | +33 1 23 45 67 89 |
| Services | Alterations · Styling · Click & collect |
5. Set up Region filters
Maison can automatically group stores by Region.
For example:
Europe
Asia
Americas
Stores that use the same Region value are grouped under the same filter.
For example:
Europe
└── Paris
Asia
├── Tokyo
└── Singapore
Americas
└── New York
To enable the filter:
- Open the Store locations section.
- Enable Show region filter.
- Enter the required Region value in each Store block.
- Click Save.
Maison automatically creates the region buttons from the Store blocks.
The default first filter is:
All
You can customize this using Label for all regions.
6. Customize the Store list labels
Maison lets you customize the labels used inside expanded Store details.
Available settings are:
- Label for all regions
- Hours label
- Phone label
- Services label
- Directions link label
Default values are:
| Setting | Default text |
|---|---|
| Label for all regions | All |
| Hours label | Hours |
| Phone label | Phone |
| Services label | Services |
| Directions link label | Get directions |
For example, you can change:
Get directions
to:
View on Google Maps
These labels apply to all Store blocks within the section.
7. Set up a Map image
If Map type is set to Map image:
- Upload an image in Map image.
- Open each Store block.
- Adjust Horizontal position.
- Adjust Vertical position.
- Repeat for every store.
Both position settings use values from:
0% to 100%
The pin is positioned relative to the uploaded map image.
For example:
Horizontal position: 46%
Vertical position: 34%
In Map image mode, the first Store is expanded automatically when the section loads.
When a customer selects a Region filter, Maison activates the first visible Store in that region.
8. Set up an Interactive Google map
If Map type is set to Interactive Google map, each store should have valid coordinates.
Enter:
- Latitude
- Longitude
For example:
Latitude: 48.8497
Longitude: 2.3573
To find coordinates in Google Maps:
- Open the location in Google Maps.
- Right-click the exact location.
- Click the displayed coordinates to copy them.
- Enter the Latitude and Longitude into Maison.
A store without valid coordinates remains visible in the Store list, but it is not placed on the interactive map.
9. Choose the Map style
Interactive Google map mode provides several styles:
- Default
- Light
- Dark
- Silver
- Retro
- Night
- Aubergine
The Maison demo uses:
Light
Choose a map style that fits your store's color palette and keeps location pins easy to identify.
10. Configure map zoom
Use Zoom when a store is selected to control how closely Maison zooms into a selected store.
Available range:
10–20
Default:
16
A lower number shows a wider geographic area.
A higher number focuses more closely on the selected location.
For example:
| Zoom | Suggested use |
|---|---|
| 10–12 | Wide city or regional view |
| 13–15 | City / neighborhood view |
| 16–18 | Individual store area |
| 19–20 | Very close street-level view |
When multiple stores are visible, Maison automatically adjusts the map to frame the visible locations.
11. Allow customers to drag and zoom the map
Interactive map mode includes Allow drag and zoom.
When enabled:
- Customers can interact with the Google map.
- Map gestures are enabled.
- Maison displays its zoom-in and zoom-out controls.
When disabled:
- The map still displays.
- Customer map gestures are disabled.
- The custom zoom controls are not displayed.
This can be useful when you want the Store locator to behave more like a controlled visual map rather than a fully interactive map.
12. Add a Directions link
The Directions link is optional.
For example:
https://maps.google.com/?q=16+Boulevard+Saint-Germain+Paris
When a Directions link is provided, Maison displays the section's Directions link label, which defaults to:
Get directions
The link opens in a new browser tab.
13. Understand Store selection behavior
Customers can interact with both the Store list and the map pins.
Map image mode
- The first Store is selected when the section loads.
- Clicking another Store opens its details and activates its pin.
- Clicking a pin selects the matching Store.
- Filtering by Region selects the first Store in the filtered list.
Interactive Google map mode
- No Store is selected when the section first loads.
- The map frames the available store pins.
- Clicking a Store selects it and focuses the map on its pin.
- Clicking a map pin selects the matching Store and scrolls the Store list to it.
- Clicking the currently selected Store again closes its details and returns the map to the visible group of stores.
This lets customers move between the store information and the corresponding map location.
14. Understand Region filtering with the map
When a customer selects a Region:
- Maison hides stores that do not belong to that Region.
- Matching map pins are shown.
- Other pins are hidden.
In Interactive Google map mode, Maison then adjusts the map to frame all visible pins in the selected Region.
For example:
Asia
could display:
Tokyo
Singapore
and automatically fit the map around those two locations.
Selecting:
All
shows all stores again.
15. Configure the section colors
Maison supports Color override for the Store locations section.
When enabled, you can customize:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
Use these settings when the Store locations section needs a different color treatment from the rest of the page.
16. Configure Section width and spacing
Available Section width options are:
- Page
- Full
- Narrow
The Maison demo uses:
Page
The section also includes:
- Section divider
- Spacing
Use these settings to control the overall position and separation of the Store locator within the page.
Desktop and mobile layout
On larger screens, Maison displays:
Store list | Map
The Store list uses a fixed column beside the map and can scroll independently when many stores are added.
On smaller screens, the section becomes a single-column layout.
The map has a minimum height of approximately:
- 720px on larger screens
- 360px on smaller screens
Region filters can scroll horizontally when there is not enough space to display all filter buttons.
Maison demo setup
The Maison Store locations demo contains four Store blocks:
| Region | City | Store |
|---|---|---|
| Europe | Paris | Saint-Germain Flagship |
| Asia | Tokyo | Aoyama |
| Asia | Singapore | Dempsey Hill |
| Americas | New York | SoHo |
The demo uses:
Map type: Interactive Google map
Map style: Light
Zoom when a store is selected: 16
Allow drag and zoom: Enabled
Show region filter: Enabled
Section width: Page
This creates the storefront filter:
All | Europe | Asia | Americas
Map image vs. Interactive Google map
| Feature | Map image | Interactive Google map |
|---|---|---|
| Google Maps API key required | No | Yes |
| Store position | Manual percentage position | Latitude / Longitude |
| Drag and zoom | No | Optional |
| Map styles | No | Yes |
| Automatically frame matching pins | No | Yes |
| Custom branded map artwork | Yes | No |
| Store list and Region filters | Yes | Yes |
| Directions link | Yes | Yes |
Recommended setup
For a small number of stores where you want full visual control:
- Use Map image.
- Upload a branded map.
- Position each pin manually.
- Enable Region filters only when useful.
For stores across multiple cities or countries:
- Use Interactive Google map.
- Add a valid Google Maps API key.
- Add Latitude and Longitude for every Store.
- Group stores with consistent Region names.
- Enable Show region filter.
- Use a moderate selected-store zoom such as
14–16. - Add a Directions link for each Store.
Notes and limitations
Please note the following behavior:
- A Store locations section supports up to 12 Store blocks.
- Region filters appear only when more than one non-empty Region exists.
- Stores with the same Region text are grouped together.
- Interactive Google map mode requires a Google Maps API key.
- Interactive map pins use Latitude and Longitude, not the Address field.
- Stores without coordinates remain in the Store list but do not appear on the interactive map.
- Map image mode uses manual Horizontal and Vertical pin positions.
- Directions links must be added manually.
- Store details such as Hours, Phone, and Services are shown only when those fields contain content.
- The interactive Google map loads when it approaches the customer's viewport rather than loading immediately with the initial page.
- The map language follows the current storefront locale.
- Map availability also depends on Google Maps Platform and the API key configuration.
Troubleshooting
If Store locations does not display correctly, check the following:
- Make sure at least one Store block has been added.
- The section supports a maximum of 12 Store blocks.
- If Region filters do not appear, make sure Show region filter is enabled and at least two different non-empty Region values exist.
- If stores that should be grouped together appear under separate filters, check that their Region values use exactly the same text.
- If using Interactive Google map, make sure a valid Google Maps API key has been added under Theme settings > Maps.
- Make sure the required Google Maps Platform APIs are enabled for the key.
- Make sure the API key is allowed on your storefront domain.
- If a Store appears in the list but not on the map, check its Latitude and Longitude.
- If coordinates are invalid or missing, Maison cannot place that Store's map pin.
- If using Map image, adjust the Store's Horizontal position and Vertical position.
- If the map focuses too closely or too widely after selecting a Store, adjust Zoom when a store is selected.
- If customers cannot drag or zoom the map, check Allow drag and zoom.
- If the Directions button is missing, make sure the Store has a Directions link.
- If Hours, Phone, or Services are missing, check the corresponding Store fields.
- Save your changes and test the Store locator on both desktop and mobile.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up Scrollspy Navigation in Maison
How to Set Up the Before & After Section in Maison