The Map section offers an easy way to point customers to a physical location on a map by leveraging Google maps or Mapbox. This can be added to your homepage or on the contact page along with the contact details.
Adding the map section
- Login to your Theme editor and navigate to the page you would like to display this section.
- You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
- From the list of available sections, find and select Map.
Section details
After adding the Map section, you will be presented with customization options and settings that you can adjust to match your store's style.
- Heading: This will serve as the header or title of your section.
- Heading size: Only applicable on Expanse, Fetch, and Gem. This controls the size of the heading (small, medium, large, extra large).
- Heading position: Only applicable on Expanse, Fetch, and Gem. This controls the heading position (left, center, right).
- Address and hours: Add your store’s physical address and operating hours here. This information will appear in a text box over the map.
- Map address: Enter your store's address that Google maps or Mapbox will use to display on the map.
- Show 'Get directions' button: Adds a Get directions button that opens the map in a new browser tab. This button is available in Impulse, Motion, Expanse, Fetch and Gem.
- Image: Select an image to display in this section if you prefer not to use Google maps or Mapbox.
- Lazy load images: should only be enabled if the section is below the fold (need to scroll down first to see the section). This feature is available in Impulse, Motion and Streamline.
Add an API key
For Impulse, Motion and Streamline, follow the Google Maps instructions below.
- Impulse, Motion and Streamline require a Google Maps API key. Please see Shopify's guide on how to generate an API key: Register a Google API key. Be sure to add the correct store URL while setting up your API key to avoid errors.
For Expanse, Fetch and Gem, follow the Mapbox instructions below.
- Expanse, Fetch and Gem require a Mapbox API token. please see our guide on how to generate an API access token: Register a Mapbox API access token. Be sure to add the correct store URL while setting up your API access token to avoid errors.
Tip: If you don't have an API key or you don't want to set up one just yet, you can manually upload an image of the map and use that instead of the Google or Mapbox map.