The Store Locator section in the Be Yours theme allows you to display a Google Maps-powered store locator on your storefront. Customers can search locations, view store details, get directions, and browse a list of store locations.
This section is useful for brands with physical stores, showrooms, pickup points, stockists, retail partners, or regional offices.
How to setup Store Locator Section
STEPS:
1. Before You Start
Before adding the Store Locator section, make sure you have a valid Google Maps API key.
The Store Locator section uses Google Maps services to:
- Display the map.
- Convert store addresses into map coordinates.
- Show search and autocomplete.
- Display directions.
- Calculate distance information.
- Show place details.
Recommended preparation:
- Create or open a Google Cloud project.
- Enable the required Google Maps Platform APIs.
- Create a Google Maps API key.
- Add proper domain restrictions to the API key.
- Copy the API key.
- Add the key to the Store Locator section in the Theme Editor.
The map may not work correctly if the API key is missing, invalid, restricted incorrectly, or if the required Google Maps services are not enabled.
2. Adding the Store Locator Section
To add the Store Locator section to your store:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Customize.
- Open the page template where you want to add the store locator.
- Click Add section.
- Select Store Locator.
- Add your Google Maps API key.
- Add location blocks.
- Click Save.
The Store Locator section can be added to most page templates, but it is not available in the header, footer, or custom overlay groups.
Only one Store Locator section can be added to a template.
3. Google Maps API Key Settings
The Map API key setting is required for the Store Locator section to work.
Map API key
Add your Google Maps API key in this field.
Without a valid key, the map may not load, and store locations may not display.
Recommended API key setup:
| Setting | Recommendation |
|---|---|
| API key restrictions | Restrict the key to your storefront domain. |
| Billing | Make sure billing is enabled in Google Cloud if required. |
| APIs | Enable the Google Maps services used by the store locator. |
| Referrer restrictions | Add your Shopify storefront domain and preview domain if needed. |
Example allowed domains:
https://your-store.com/*
https://your-store.myshopify.com/*
If you are testing on a theme preview URL, you may also need to allow the Shopify preview domain.
4. Adding Store Locations
Each Location block represents one store, showroom, pickup point, or stockist.
To add a location:
- Open the Store Locator section in the Theme Editor.
- Click Add block.
- Select Location.
- Add the location title.
- Add the full address.
- Optionally add a button label and button link.
- Click Save.
The section supports up to 10 location blocks.
Location block settings:
| Setting | Description |
|---|---|
| Title | The name of the store or location. |
| Address | The full address used by Google Maps to find the location. |
| Button label | Optional button text for the location. |
| Button link | Optional link for the location button. |
Example:
| Setting | Example |
|---|---|
| Title | Downtown Store |
| Address | 123 Main Street, New York, NY 10001, United States |
| Button label | View store |
| Button link | /pages/downtown-store |
Use complete and accurate addresses for the best geocoding result.
5. Writing Good Store Addresses
The Store Locator section converts the address text into map coordinates automatically.
For best results, use a complete address.
Recommended address format:
Street address, City, State or Province, Postal code, Country
Example:
123 Main Street, New York, NY 10001, United States
Tips:
- Include the country name.
- Include the postal code when available.
- Avoid abbreviations when possible.
- Make sure the address can be found on Google Maps.
- Use one clear address per location block.
If Google cannot find an address, the location may not appear correctly on the map.
6. Section Layout Settings
The layout settings control the map size, width, divider, and mobile height.
Map zoom
- Map zoom: Controls the default zoom level of the map.
- Minimum:
4 - Maximum:
17
Recommended values:
| Store coverage | Suggested zoom |
|---|---|
| Country-wide locations | 4–6 |
| State or region | 6–9 |
| City-wide locations | 10–13 |
| Single store or nearby stores | 14–17 |
Image ratio
This setting controls the desktop height of the store locator area.
Available height options:
| Option | Description |
|---|---|
| 400px | Short map area |
| 450px | Compact map area |
| 500px | Medium map area |
| 550px | Medium-tall map area |
| 600px | Default map area |
| 650px | Tall map area |
| 700px | Extra tall map area |
| 750px | Large map area |
| 100vh | Full viewport height |
Full width
- Full width: Makes the Store Locator section span the full browser width.
If disabled, the section stays within the page width and displays with rounded corners.
Show divider
- Show divider: Adds a divider line around the section area.
7. Mobile Layout Settings
The mobile layout setting controls the height of the store locator on smaller screens.
Mobile image ratio
Available mobile height options:
| Option | Description |
|---|---|
| Auto | Uses automatic height. |
| 200px | Very short mobile map. |
| 250px | Short mobile map. |
| 300px | Compact mobile map. |
| 400px | Medium mobile map. |
| 500px | Tall mobile map. |
| 600px | Extra tall mobile map. |
| 100vh | Full mobile viewport height. |
Recommended mobile setup:
| Use case | Recommended value |
|---|---|
| Simple page with few locations | 400px or 500px |
| Main store locator page | 100vh |
| Small embedded map area | 300px or 400px |
8. Map Language and Region Settings
The Store Locator section supports map language and region settings.
Map language
The Map language setting controls the language used by Google Maps UI elements.
Available options include:
- Auto
- Browser default
- English
- Vietnamese
- Japanese
- Thai
- Korean
- Simplified Chinese
- Traditional Chinese
- French
- German
- Spanish
Recommended option:
Auto
When set to Auto, the section uses the current storefront locale.
Map region
The Map region setting helps Google Maps bias results toward a specific region.
Use a country or region code.
Example:
US
GB
VN
This is useful when addresses may exist in multiple countries or when you want Google Maps results to prioritize a specific market.
9. Color Settings
The color settings control the store locator panel, text, button accent, and border colors.
Available color settings:
| Setting | Description |
|---|---|
| Overlay color | Controls the locator surface/panel background color. |
| Text color | Controls the main text color. |
| Button label color | Controls the primary accent color used by the locator. |
| Border color | Controls the outline and border color. |
Recommended setup:
| Element | Recommendation |
|---|---|
| Overlay color | Use a light background for readability. |
| Text color | Use a high-contrast text color. |
| Button label color | Use your brand accent color. |
| Border color | Use a subtle neutral color. |
10. Padding Settings
Padding settings control the spacing above and below the Store Locator section.
| Setting | Description |
|---|---|
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
Use larger padding when the Store Locator is placed between content sections. Use smaller padding when it is the main content of the page.
11. Recommended Setup
For a dedicated store locator page, we recommend:
| Setting | Recommended value |
|---|---|
| Full width | Enabled |
| Image ratio | 100vh or 700px |
| Mobile image ratio | 100vh |
| Map zoom | 5–8 for multiple stores, 12–15 for local stores |
| Map language | Auto |
| Map region | Store's main country or market |
| Show divider | Optional |
| Location blocks | Add all stores, up to 10 |
For a small contact page map, we recommend:
| Setting | Recommended value |
|---|---|
| Full width | Disabled |
| Image ratio | 500px or 600px |
| Mobile image ratio | 400px or 500px |
| Map zoom | 14–17 |
| Location blocks | 1–3 locations |
12. Notes and Limitations
Please note the following behavior:
- Only one Store Locator section can be added to a template.
- The section supports up to 10 location blocks.
- A valid Google Maps API key is required.
- Store addresses are geocoded from the address text.
- If an address cannot be found by Google Maps, that location may not display correctly.
- The section depends on Google Maps Platform availability and API configuration.
- The map language can follow the storefront locale when set to Auto.
- The region setting can help bias map results but does not replace a complete address.
- The optional location button appears only when a button label is added.
Troubleshooting
If the Store Locator section does not display correctly, please check the following:
- Make sure a valid Google Maps API key has been added.
- Make sure the required Google Maps Platform APIs are enabled.
- Make sure the API key is not restricted incorrectly.
- Make sure your storefront domain is allowed in the API key restrictions.
- Make sure at least one Location block has been added.
- Make sure each Location block has a valid address.
- Make sure the address can be found on Google Maps.
- If the map loads but locations do not appear, check the address formatting.
- If search or directions do not work, check that the Google Maps services required for those features are enabled.
- If the map language looks wrong, check the Map language setting.
- If the map focuses on the wrong region, set the Map region field.
- If the section height looks wrong on mobile, adjust the Mobile image ratio setting.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
Product Highlights Block Guide
Product Breadcrumbs Guide