The Store directory section helps customers find your physical stores and stockists. Display a list of locations alongside an interactive Google map, a picture for each store, or a simple grid of store cards. The Google map requires no API key. Available in Be Yours 10.0.0 or later.
Demo Usage
Beauty demo — Theme Features
Scroll to Store directory — “Find us — no API key and no app” to see the standalone section in action. Select a location from the list and click Load map to view its location on Google Maps.
STEPS
1. Add the Store Directory Section
- From your Shopify admin, go to Online Store > Themes and click Customize.
- Open the page or template where you want to show your locations.
- Click Add section and select Store directory.
- Edit the section settings and the existing Store blocks, then click Save.
2. Add and Configure Store Blocks
Each Store block represents one location. You can add up to 12 Store blocks.
- Select an existing Store block or click Add block > Store to add a location.
- Complete the fields below, then drag blocks to change their display order.
| Setting | Description |
|---|---|
| Name | Enter the store name. |
| Tag | Add a short label such as Flagship, Studio or Stockist. Leave blank to hide it. |
| Tag style | Choose Highlight (your own stores) or Muted (stockists). |
| Address | Enter the address shown to customers. It is also used for the map and directions unless you enter a separate map query. |
| Map query | Optional: enter a precise location or address, including the postcode, for more accurate map results. |
| Google Maps embed URL | Optional: paste the src URL from Google Maps > Share > Embed a map to use that location instead of the query. |
| Hours | Add the store's opening hours. |
| Phone | Enter a contact number. |
| Note | Add a short description displayed in the selected store's map caption card. |
| Directions link | Optional: choose a custom link. If left blank, a Google Maps directions link is generated from the map query or address. |
| Image | Add a picture for Image per store mode, or a preview image behind the Load map button in Google map mode. |
Tip: Give each location a complete address or a map query so that the map and automatically generated directions link can work correctly.
3. Choose How to Display the Map
Under Map, choose one of these options:
| Option | Description |
|---|---|
| Google map | Displays a Google Maps embed for the selected location. No API key is needed. |
| Image per store | Displays the picture assigned to each Store block instead of a live map. |
| No map, list as cards | Displays store details as cards without a map. |
When using Google map, you can adjust:
- Map zoom: Set the zoom level from 10–18.
- Map height: Adjust the map height from 360–640 px.
- Greyscale map: Show the map in greyscale.
- Load the map with the page: Enable immediate loading, or turn this off to show a Load map button first.
- Remember the click for the session: When manual loading is used, remember the visitor's choice for subsequent maps during that session.
- Line under the Load map button: Customize the privacy message; leave it blank to use the theme's default wording.
With Load the map with the page turned off, the Google map is not requested until the visitor clicks the button. This allows the visitor to choose when to load third-party map content.
Note: Image per store requires an image in at least one Store block. Without a usable image, the section displays the locations without the map area.
4. Customize Map Layout and Mobile Display
The following settings are available when a map or image is enabled:
- Caption card: Choose Top left, Top right, Bottom left or Bottom right. The card shows details for the selected store.
- Caption card spills past the map's edge: Allow the caption card to extend beyond the map edge.
- Map follows the list while scrolling: Keep the map beside the store list as customers scroll.
- Map on phones: Choose Opens under the chosen store or Pinned above the list.
- Directions link label: Customize the text of the directions link, such as Directions or Get directions.
In Image per store mode, select a store to switch the displayed picture. In No map, list as cards mode, customers can view the stores and use their directions links without opening an interactive map.
5. Configure the Heading and Section Appearance
Heading
- Subheading: Add a short introduction above the title.
- Heading: Enter the main title.
- Heading size: Choose Small, Medium or Large.
- Heading tag: Select H1, H2, H3 or div according to your page structure.
- Description: Add supporting text below the heading.
Layout and spacing
- Make section full width: Extend the section across the page width.
- Show section divider: Display a divider above the section.
- Top padding / Bottom padding: Adjust the spacing around the section.
Highlight and colors
- Turn on Enable highlight, then select Marker, Circle, Underline or Bold underline.
- Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
- Enable Use color scheme and choose a Color scheme. Alternatively, leave it off to use the section's custom text, background, gradient and highlight colors.
6. Notes and Troubleshooting
- The map shows the wrong location: Enter a more precise Map query with postcode, or provide a Google Maps embed URL for that store.
- The map is not visible: Check the selected Map mode and whether your Store blocks have a map address/query or an image in Image per store mode.
- A store cannot be selected: Provide an address or map query in Google map mode, or an image in Image per store mode.
- The map does not appear immediately: Turn on Load the map with the page, or click Load map when manual loading is enabled.
- The directions link is missing: Add a valid Directions link, or enter an address or map query so the theme can generate one.
- Need more than 12 stores? The section supports a maximum of 12 Store blocks.
Version note: Store directory was introduced in Be Yours 10.0.0, including a keyless Google map, optional consent-before-loading, image-per-store mode and mobile map layout options. See the official release notes.
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.
Share:
How to Set Up the Statement Section in Be Yours
How to set up Multicolumn Section in Be Yours