Adding a map to a page

Each Pixel Union Shopify theme comes with an eye-catching Map section. Connect with Google Maps to display location, hours, and more.

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.

Save.

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.