Reach comes with an eye-catching Map section to display location, hours, and more.
Add a map section to your home page
Navigate to the Sections tab in the theme editor and select Add section > Map.
Customize the section height
Start by setting the Section height from the dropdown. The three options are Small, Medium, and Large.
Add and configure the text
Add a Heading, as well as Text content if applicable (e.g. Hours & Location).
Here you can adjust Text alignment, as well as Desktop and Mobile layout settings to best suit the device sizes.
The Map address will be the point Google uses to drop its pin. It's the red marker in the image above.
To pull a map into your homepage, you'll need to generate Google maps API key and paste it into the Google Maps API key field. If you need help, just follow this link to open Shopify's step by step instructions for getting your key setup.
In the end, what you're looking for is this long string of characters to paste into the API field:
You can also customize the display colors of the map using the Map foreground color and Map background color pickers. These do not control particular components of the map (streets, water, etc.), but rather the swatches are linked to the overall color scheme of the map.
Next, you can upload an Image that will be used in the event that the map can not be loaded. This can be a screenshot of a map, or anything else you want to display if your customer's browser does not load the map. Use the Image position settings to adjust the focal point for the image.