On June 11, 2018, the Google Maps Platform introduced a number of changes to how Google Maps APIs are organized and used. Using these APIs will require setting up a billing account with the Google Maps Platform. However, this doesn't necessarily mean that you'll be charged a monthly fee to use the service. You are provided a monthly credit on an ongoing basis to cover services up to a threshold.
For more information about pricing, see the Google Maps Platform pricing and billing documentation.
Supported Versions
The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.
Using the Map Section
The map section available in Out of the Sandbox themes includes settings for content, map position, and an integration with the Google Maps API (which is optional).
- In order to make use of the Google Maps API, you will need to register for an API Key. With the API key you will then be able to update your map colour scheme and hide/show the pin.
- You will need to follow Shopify's instructions on registering for a Google Maps API Key which can be found here
- If you do not wish to register for an API key, the original map setting with the iframe will work as default!
Select your theme:
-
Turbo
Within Turbo's 'Map' section, you can enable wide display, change the map height and map zoom, and add an image that would display if the map wasn't able to load.
With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.
View our full article on Turbo's map sectionDefault Map without Google Maps API:
With Google Maps API:
-
Parallax
Within Parallax's 'Map' section, you can enable store information, choose the text and background color, change the text alignment, info position, and map zoom level, and add an image that would display if the map wasn't able to load.
With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.Default Map without Google Maps API:
With Google Maps API:
-
Retina
Within Retina's 'Map' section, you can enable store information, change the text alignment, map position, and map zoom level, enable wide display, and add an image that would display if the map wasn't able to load.
With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.Default Map without Google Maps API:
With Google Maps API:
-
Mobilia
Within Mobilia's 'Map' section, you can enable store information, choose the text and background color, change the text alignment, map position, and map zoom level, enable wide display, and add an image that would display if the map wasn't able to load.
With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.Default Map without Google Maps API:
With Google Maps API:
-
Responsive
Within Responsive's 'Map' section, you can enable store information, choose the text and background color, change the text alignment, map position, and map zoom level, enable wide display, and add an image that would display if the map wasn't able to load.
With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.Default Map without Google Maps API:
With Google Maps API:
-
Artisan
Within Artisan's 'Map' section, you can enable wide display, extra padding, change the map height and map zoom level, add an image that would display if the map wasn't able to load, display store information, choose the position for this information, and pick the text and background color.
Artisan's 'Shape Feature' can also be enabled in the map section!
With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.Default Map without Google Maps API:
With Google Maps API:
-
Flex
Within Flex's 'Map' section, you can configure width, spacing and animation settings. Additionally, you can change the map height and map zoom level, and add an image that would display if the map wasn't able to load. Custom CSS can be included in this section as well for further configuration.
With the Google Maps API added, you can enable the show pin setting, and choose your color scheme.Default Map without Google Maps API:
With Google Maps API:
View our full article on Flex's map section