How to Set Up the Map Section in Concept

Add the Map section

• From your Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
• Open the page or template where you want the map.
• Click Add section and select Map.
• Click Save.

Set up Google Maps

• Open the Map section settings.
• Enter the complete Map address, including the street, city, and country.
• Obtain a valid Google Maps API key following Shopify's setup guide, then paste it into Google Maps API key.
• Adjust Map zoom (12–20) and select one of six Map styles: Standard, Silver, Retro, Dark, Night, or Aubergine.
• Upload an Image to use as the fallback when the interactive map is unavailable.
• Save and preview your storefront to verify the location.

Important: The interactive map requires both a Map address and a valid Google Maps API key. Without these, the section uses the fallback image or a placeholder instead of a live map. Customers can click the map area to open the address in Google Maps.

Add store information and content

• Under the Map section, click Add block and select the content you need:
  • Heading — store name or main heading, with size and highlighted text options.
  • Subheading — labels such as Address or Opening hours.
  • Text — address, phone number, or other details.
  • Button — a Get directions button; add the correct Google Maps URL under Button link.
  • Link — an additional text link.
  • Icon — a preset or custom icon, optionally linked to a URL.
  • Image — an image or logo within the content area.
  • Custom Liquid — custom content, such as a formatted opening-hours table.
  • Empty space — vertical spacing between blocks.
• Drag blocks into the desired order, then click Save.

The section also supports app blocks where applicable.

Adjust desktop and mobile layouts

• Set Desktop height, Desktop content position, and Desktop content alignment.
• Under Mobile layout, select Map first or Text overlay.
• Adjust Mobile height and Mobile content alignment.
• Customize the text, background, highlight, and button colors.
• Adjust top and bottom padding; optionally enable full width, rounded corners, or the section divider.
• Turn on Enable parallax effect if desired and choose Vertical, Horizontal, or Zoom.
• Preview both desktop and mobile layouts before saving.

Theme update

• Concept 2.0.0 (October 2, 2024): Added an Icon block to the Map section, including support for custom icon images.

See the official Concept release notes.

Map vs. Maps

• Map — displays one location, with customizable content blocks alongside the map.
• Maps — displays multiple locations and lets customers switch between them.

Troubleshooting

• Map not loading: Check the address, API key, Google Maps API configuration, restrictions, and billing using Shopify's guide.
• Only a background image appears: Confirm that both Map address and Google Maps API key are filled in and valid.
• Wrong location shown: Enter a more complete and accurate address recognized by Google Maps.
• Get directions button does not work: Add a valid destination under the Button link setting. The section's map area and your custom button are separate links.
• Content looks different on mobile: Review Mobile layout, Mobile height, and Mobile content alignment.

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.