How to Set Up the Contact with Map Section in Concept

The Contact with Map section combines a contact form, a single Google Maps location, and store contact details in one layout. Use it on your Contact page so customers can send inquiries and find your store.

docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__02.webp

Demo usage

View the Contact with Map – Concept Demo. The example displays “Contact Us”, a map for 620 King St W, Toronto, contact details (Address, Email, Phone, and Follow us), plus custom Phone number and Subject form fields.

Steps:

Add the Contact with Map section
  • From your Shopify admin, go to Online Store > Themes and click Customize on your Concept theme.
  • Open the page template where you want to display the contact form and map.
  • Click Add section and select Contact with Map.
  • Click Save.
docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__01.webp
Configure the map
  • Open the Contact with Map section settings.
  • Enter your full store address in Map address.
  • Follow Shopify's Google Maps setup guide to obtain a valid key, then enter it in Google Maps API key.
  • Adjust Map zoom (12–20) and choose a Map style: Standard, Silver, Retro, Dark, Night, or Aubergine.
  • Upload an Image to display when a map address or API key has not been provided.
  • Set Image height for desktop and Image height mobile for smaller screens.
  • Click Save and check the location on your storefront.
docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__03.webp

Important: Both Map address and Google Maps API key must be filled in to enable the interactive Google Map. The map area links to the address on Google Maps.

Customize the contact form
  • The form includes built-in Name, Email, and Message fields, plus a Send message button. Email is required.
  • Under the section, click Add block > Custom field to collect other information.
docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__04.webp
  • Choose a field type: Text, Textarea, Checkbox, Radio, or Select (dropdown).
  • Enter a Label and enable Required or Full width as needed.
  • For Radio and Select fields, enter options separated by commas (for example, Product, Order, Other).
  • For Checkbox fields, set the values to submit when the box is checked or unchecked.
  • Drag blocks into the desired order and click Save.
docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__05.webp

Contact form submissions are sent to the store's configured sender email address. The form also displays success and error messages after submission.

Add contact details and social links
  • Click Add block > Contact to add an information group.
docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__06.webp
  • Enter its Heading (for example, Address, Email, or Phone) and Text. You can add multiple Contact blocks.

  • docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__07.webp
  • Add a Social media block to display social icons with an optional heading such as Follow us; this block can be added once.

docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__08.webp
  • Configure the links for social icons under Theme settings > Social media.
docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__09.webp
  • Drag the blocks to reorder the information displayed beneath the main contact form and map.

Note: Custom field blocks appear inside the form, while Contact and Social media blocks display store information outside the form.

Adjust content, colors, and layout
  • Set the section Heading, Heading size, Heading alignment, Subheading, and Description.
  • Optionally configure a separate Button label and Button link for the section heading. This is not the form's Send message button.
  • Customize Highlighted text and its available styles and animation.
  • Adjust text, background, highlight, and button colors.
  • Set section padding, and optionally enable Divider, Narrow width, or Rounded corners.
  • Enable Parallax if desired, then choose Vertical, Horizontal, or Zoom.
  • Preview both desktop and mobile layouts; on smaller screens, the map appears above the form.
docs__concept__how-to-set-up-the-contact-with-map-section-in-concept__10.webp

Theme update

  • Concept 6.0.3 (September 24, 2026): Improved storefront form accessibility with inline validation messages, clearer error announcements for screen readers, and focus directed to form errors. This also benefits the contact form in this section.

See the official Concept release notes.

Contact with Map vs. Map vs. Maps

  • Contact with Map — combines a contact form, one map location, and store information.
  • Map — displays one map location with customizable content, but no built-in contact form.
  • Maps — displays multiple locations that customers can switch between.

Troubleshooting

  • Map is blank or does not load: Check the address, API key, Google Maps API configuration, restrictions, and billing. See Shopify's map troubleshooting guide.
  • A fallback image appears instead of the map: Check that Map address and Google Maps API key have both been entered.
  • Emails do not arrive: Check your store's sender email configuration and spam folder, and test the form with a valid email address.
  • Custom form field does not appear: Confirm the block type, label, options (if applicable), and that the block was added to Contact with Map.
  • Social icons are missing: Add a Social media block and check the social links in Theme settings.
  • Mobile display needs adjustment: Review image height for mobile, spacing, and parallax settings.

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.