The Map section displays a Google Map for one business location, alongside store information such as an address, opening hours, and a directions button. You can customize its layout, appearance, and mobile display.
Demo Usage
- Demo: Be Yours – Peace, Contact Us
- Section: Our Store, below the contact form.
- What to look for: Store address, opening hours, Get directions button, and the map area.
STEPS:
1. Add the Map Section
- From Shopify admin, go to Online Store > Themes and click Customize.
- Open the page template where you want to display the location.
- Click Add section and select Map.
- Configure the map and add content blocks as needed.
- Click Save.
2. Configure Google Maps
| Setting | Description |
|---|---|
| Map address | Enter your complete business address so Google Maps can locate it. |
| Google Maps API key | Enter your Google Maps API key to enable the interactive map. |
| Map zoom | Set the zoom level from 12 to 20. Higher values show a closer view. |
| Map style | Choose Standard, Silver, Retro, Dark, Night, or Aubergine. |
| Image | Upload a fallback image to display if Google Maps cannot load. |
| Image focal point | Choose which part of the fallback image stays visible when cropped. |
To set up the map:
- Enter your full address in Map address.
- Obtain a Google Maps API key using Shopify's Google Maps API key guide.
- Paste the key into Google Maps API key.
- Adjust Map zoom and Map style, then click Save.
Important: A valid API key and address are required for the interactive map. Google Maps Platform configuration and billing requirements may apply. The Image serves as a fallback; it is not an interactive map.
3. Configure Desktop Layout
| Setting | Description |
|---|---|
| Desktop content position | Position the information box at the top, middle, or bottom and left, center, or right. |
| Desktop content alignment | Align text left, center, or right. |
| Desktop height | Choose Adapt to image, a fixed height from 400px to 750px, or Full screen. |
| Make section full width | Expand the section across the page width. |
| Show section divider | Add a divider above the section. |
4. Configure Mobile Layout
| Setting | Description |
|---|---|
| Mobile layout | Choose Map first or Text overlay. |
| Mobile content alignment | Align the text left, center, or right. |
| Mobile height | Choose Auto, Adapt to image, a fixed height, or Full screen. |
- Map first places the map area before the information box on mobile.
- Text overlay places the content over the map area.
5. Add Content Blocks
Under the Map section, click Add block and choose the content you need:
| Block | Purpose | Maximum |
|---|---|---|
| Heading | Show the store name or section title; adjust heading size and tag. | 2 |
| Subheading | Add a short label such as Address or Opening hours. | 2 |
| Text | Add the address, opening hours, or other store information. | 2 |
| Custom Liquid | Add optional advanced content through the editor. | 2 |
| Button | Add a call to action such as Get directions. | 1 |
For the Button block:
- Enter a Button label.
- Set the Button link, such as a Google Maps directions URL.
- Choose Button size or enable Use underline button style.
Important: The directions button needs a valid Button link. Entering a label alone does not create a destination.
6. Customize Colors, Highlight, and Spacing
The section provides Solid button label, Solid button background, Text, Background, Background gradient, Background opacity, and Highlight color settings, along with Top padding and Bottom padding.
For the Heading, Subheading, and Text blocks:
- Enable Highlight and choose a Highlight style, if needed.
- Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
Theme update: Be Yours 6.5.0 introduced separate button-color controls for the Map section. These controls are included in 9.5.1.
7. Notes and Limitations
- Map displays one business location. For multiple store locations with a location list, use the separate Store locator section.
- A valid Google Maps API key and complete address are needed for the interactive map.
- If the map does not load, the selected fallback image can appear instead.
- The Get directions button requires its own link.
- Check the section on both desktop and mobile after editing its layout.
Troubleshooting
- Map does not load: Check the address, API key, enabled Google Maps services, billing, and any website restrictions on the key.
- Wrong location: Enter a more specific address, including street, city, and country.
- Only an image appears: Check that the interactive map is configured correctly; the image is a fallback.
- Directions button does not work: Add a valid URL to Button link.
- Mobile content is misplaced: Review Mobile layout, Mobile content alignment, and Mobile height.
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 Gallery Section in Be Yours
How to Set Up the Scrolling Promotion Section in Be Yours