How to Set Up the Maps Section in Concept

Add the Maps section

• In Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
• Open the page or template where you want to display your store locations.
• Click Add section and select Maps.
• Click Save.

Set up the Google Maps API key

• In the Maps section settings, find Google Maps API key.
• Create and configure a valid key for Google Maps by following Shopify's Google Maps API key guide.
• Ensure the key can load Google Maps and look up addresses. The theme uses the Google Maps JavaScript API and Google's address geocoding service.
• Paste the key into Google Maps API key.
• Set Map zoom (12–20) and choose a Map style: Standard, Silver, Retro, Dark, Night, or Aubergine.
• Click Save and check the map in the theme preview.

Important: A valid Google Maps API key is required for the interactive map. Without a key, the section shows the selected background image instead of a live map.

Add store locations

• Under Maps, click Add block and select Map.
• Enter the complete Map address, including street, city, and country, so Google can locate it accurately.
• Add a Heading (such as the store name) and Text (such as contact details or a short description).
• Use Custom Liquid for extra content such as formatted opening hours, if needed.
• To offer directions, enter a Button label (for example, Get directions) and a Button link to the location in Google Maps.
• Customize the button's Style, Size, Open link in new tab, and Show icon options.
• Repeat Add block > Map for each additional location and click Save.

The first location is shown initially. Customers can select another location from the list to update the map. The View details link opens that location's additional text, Custom Liquid, and button when provided.

Customize the map banner and mobile layout

• Optionally select an Image as the background/fallback image.
• Adjust Image height, Desktop content position, and Desktop text alignment.
• Under the mobile settings, choose Map first or Text overlay, then set Mobile image height and Mobile text alignment.
• Add a section Heading and adjust its size, HTML heading tag, and highlighted text effect.
• Customize Colors, section spacing, divider, full-width layout, and rounded corners.
• Optionally enable Parallax and choose Vertical, Horizontal, or Zoom movement.
• Preview desktop and mobile, then click Save.

Theme update

• Concept 3.1.0 (January 15, 2025): Introduced the Maps section for displaying multiple store locations and their details.

See the official Concept release notes.

Troubleshooting

• The interactive map does not appear: Verify that you entered a valid Google Maps API key and added at least one Map block. Check the API configuration and billing/restrictions in Google Cloud using Shopify's guide.
• A location cannot be found: Use a complete, accurate address. Verify that Google Maps recognizes it; check any error displayed in the theme editor.
• Only an image appears: Confirm that Google Maps API key is not blank. The image is the fallback when the map is not enabled.
• A store is missing from the list: Check that its Map address field is not empty.
• The directions button does not work: Add a valid Button link; a button label alone does not create a destination.
• The map does not show all locations simultaneously: This section focuses on one selected location at a time. Customers switch locations using the store list.

If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.