Each Pixel Union Shopify theme comes with an eye-catching Map section. Connect with Google Maps to display location, hours, and more.
Add a map to the home page
- Go to your theme in the Online Store
- Select Customize
- Click (+) Add section
- Click Map, then Select
Include optional heading
Add a Heading, then add text content (e.g. Hours & Location).
Adjust display settings
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.
Add the address for your location
The Map address will be the point Google uses to drop its pin.
Connect with Google Maps
To display a map on your home page, you need to (1) gather the Google Maps API key, (2) add the API key to the section settings, and (3) enable the Geocoding API.
Google Maps API key
Go to the Google Maps Platform to sign in to your Google Cloud Platform account.
Then go to the Project Selector page.
Under APIs and Services, select Credentials.
Select CREATE CREDENTIALS, then API key.
Copy the full API key from the Your API key field.
Add API key to the section settings
Return to the theme editor and paste the Google Maps API key to the labeled field.
Enable the Geocoding API
Go to the APIs Library to search for the Geocoding API.
Select the Geocoding API, then Enable.
Customize the map's colors
Back in the theme editor, customize the display colors of the map using the Map foreground color and Map background color selectors.
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 the 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 in the event the customer's browser does not successfully load the map.
Control the focal point for the map
Use the Image position settings to adjust the focal point for the image.