Empire comes with an eye-catching Map section to display location, hours, and more.
Start by setting the Section height from the top dropdown. Then, add a Heading, then add text content (e.g. Hours & Location).
Here you can adjust Text alignment, as well as Desktop and Mobile layout settings to get the display of your Map section's text information just right.
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.
Note: that 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.