Map

Theme: Multipurpose Fashion Theme

Help Center > Sections & Blocks > Utility Sections > Map

Overview

The Map section displays a map with your store location. Optionally shows an overlay card with address and hours. Use it on a Contact page or near the footer. Supports Google Maps (embed URL or API) and Mapbox. Helps customers find your physical location.

Where to Add This Section

Go to Online Store > Themes > Customize.
Select Default page (or Contact page template).
Click Add section.
Choose Map.
Save.

📷 Image placeholder: Add a screenshot of Map section with overlay card.

Quick Setup (3 Steps)

Add address — Enter address in Address or Map address.
Add map — Use Map embed URL (Google) or Mapbox token.
Overlay card — Enable Show overlay card; add address text and hours.

Section Settings

Setting	Description
Heading	Section title
Subheading	Optional subtitle
Address	Address text for overlay card
Address hours	Opening hours or extra info
Map embed URL	Google Maps iframe `src` URL
Google API key	For Maps JavaScript API (if required)
Mapbox token	For Mapbox (alternative to Google)
Map address	Address for geocoding
Map height	Section height
Zoom level	Map zoom (1–20)
Map style	Map appearance
Section width	Full, Boxed
Show overlay card	Address card overlay on map
Enable scroll zoom	Allow scroll-to-zoom on map

Step-by-Step Setup

Step 1: Get map source

Option A: Google Maps embed

Go to Google Maps.
Search for your address.
Click Share > Embed a map.
Copy the iframe src URL (the URL inside the src="..." attribute).
Paste into Map embed URL.

Option B: Google Maps API

Get a Google Maps API key from Google Cloud Console.
Enable Maps JavaScript API.
Add key to Google API key.
Enter Map address for geocoding.

Option C: Mapbox

Sign up at mapbox.com.
Get your access token.
Add to Mapbox token.
Enter Map address.

Step 2: Add section and configure

Add Map section to Contact page (or desired template).
Heading — "Find us" or "Our location".
Address — Full address for overlay card.
Address hours — "Mon–Fri 9am–6pm" or similar.
Map embed URL or Mapbox token — From Step 1.
Map height — 300–500px typical.
Zoom level — 15–17 for street-level view.
Show overlay card — Enable to display address and hours on map.
Save.

Step 3: Test

View on storefront; confirm map loads.
Test overlay card visibility.
Verify address and hours are correct.
Test on mobile for touch/scroll behavior.

Map provider notes

Google Maps

Embed URL: no API key required for basic embed.
JavaScript API: requires API key; may have usage limits and billing.
Check Google Maps Platform for terms.

Mapbox

Requires Mapbox account and token.
Often used as Google alternative for custom styling.
Check Mapbox pricing for limits.

Use cases

Contact page — Store location with directions
Footer area — Map above or beside footer
Multi-location — Primary location on main contact page
Events — Event or pop-up location

For merchants

Ensure address and hours are correct.
Use overlay card for quick reference.
Test on mobile for touch/scroll behavior.
Update hours for holidays or changes.

Common mistakes

Mistake	Fix
Map not loading	Check embed URL or API key/token
Wrong address	Verify Address and Map address
Overlay card hidden	Enable Show overlay card
Outdated hours	Update Address hours regularly
API key required	Get key/token from provider; add to settings

FAQs for the Map Section

1. What map providers are supported in this section?

The Map section supports Google Maps (via Embed URL or API) and Mapbox (via an API token). If neither is available, a fallback image is displayed.

2. How do I set up Google Maps in this section?

To set up Google Maps, you have two options:

Embed URL: Get the URL from Google Maps (Share → Embed a map) and paste it into the "Map embed URL" field.
Google Maps API: Obtain a Google API key from Google Cloud Console, enable the Maps JavaScript API, and paste the key into the "Google API key" field. You must also provide the Map address for geocoding.

3. How do I set up Mapbox in this section?

To set up Mapbox, sign up for a Mapbox account, obtain your Mapbox token, and paste it into the "Mapbox API token" field. You must also provide the Map address for geocoding.

4. What happens if I don't provide a map source (Google or Mapbox)?

If no map source is provided, the section will display a fallback image or pattern. You can customize the fallback image by uploading it in the "Image fallback" setting.

5. Can I adjust the size and zoom of the map?

Yes, you can customize the map height and zoom level in the section settings. The zoom level ranges from 1 (world view) to 20 (street-level view).

6. How can I display the address and hours over the map?

You can enable the overlay card feature by checking the "Show overlay card" setting. You'll need to provide the Address and Address hours in the settings, and they will appear as an overlay on the map.

7. Can I change the map style?

Yes, you can select the map style in the settings. The options include:

Roadmap (default)
Satellite
Hybrid

8. How do I allow users to get directions from the map?

You can enable the "Show 'Get directions' button" option in the settings. This will display a button on the map that directs users to Google Maps for directions to your store.

9. How can I make the map interactive (zoom, scroll, etc.)?

To allow interactive map features such as scroll zoom, ensure that Mapbox or Google Maps is set up correctly. The section supports scroll zoom by default, but you can enable or disable it with the "Enable scroll zoom" setting.

10. Can I use the map section for multiple locations?

Yes, you can configure multiple map sections on different pages, each with its unique address, map embed URL, or Mapbox token.

11. How do I ensure the map works on mobile devices?

The map section is responsive by default, adjusting its layout and functionality for mobile devices. You can test it on mobile to ensure the map loads correctly and the overlay card appears as expected.

12. Are there any restrictions on the usage of the Google Maps API or Mapbox?

Google Maps: Usage may be subject to limits and charges. Check the Google Maps Platform documentation for pricing and usage limits.
Mapbox: Usage is subject to Mapbox's pricing, which can be reviewed on the Mapbox Pricing page.

13. Can I customize the look of the map (e.g., colors, markers)?

Mapbox allows for more custom styling, including colors, fonts, and other map elements. You can customize the map style directly through Mapbox and link it via the Mapbox API token. Google Maps offers limited styling through the API, but it is more restrictive compared to Mapbox.

14. How do I ensure the map is accessible?

The map section is designed with accessibility in mind. The map container has an ARIA label for screen readers, and the address is accessible for users who may not see the map. Ensure that your map address and hours are accurate and up-to-date to maintain accessibility.

15. Can I change the width of the map section?

Yes, you can choose between "Boxed" and "Full width" options for the map section's layout. This can be configured in the Section width setting.

16. What should I do if the map isn't loading?

Ensure that either the Google Maps Embed URL, Google API key, or Mapbox token is correctly entered in the settings. Verify that the Map address is also correctly specified for geocoding.

17. How can I update the map when I move locations?

Simply update the Address and Map address in the section settings. If using Google Maps API or Mapbox, also update the address for accurate geocoding.

Multipurpose theme documentation