Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Using the Map Section
The Turbo theme includes a 'Map' homepage section which is a great way to give your site a more local feel and helps build confidence in your brand as it makes it easy for your customers to find where your located. The 'Map' section is also helpful if you have a physical location as well, or just want to show what city you’re located in.
Thanks to integration with Google Maps, customers can get directions to the location if you have a brick and mortar shop or office. If you’re online only, the 'Map' can still be a nice way to showcase your general location. Instead of using a specific street address, using a city name can be a great way to show your local pride and reinforce your credibility as a merchant.
The 'Map' section also include an optional integration with the Google Maps API. 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!
In order to set up the Map, click into Customize (your Theme Editor) > Sections > Add Section > Map.
Map Settings
Section Settings
The section settings determine the look and layout of this section!
Wide Display
You can choose to enable 'wide display' so this section will spread out the full width of the screen. Otherwise, the section will sit in a 'container' on the homepage and not span the full width:
Address
Here's where you can type in the address that you'd like to show up on your 'Map' section. Make sure to enter your full address so Google Maps can find the exact location. Once entered, the map will appear:
Map Height
With the 'map height' setting, you can determine the height for this section. You can choose for you map to be anywhere from 300px to 600px tall:
Map Zoom Level
The 'map zoom level' setting will adjust how much your map is zoomed in by. Choose anywhere from 1x (totally zoomed out) to 20x (zoomed in fully):
Image
There is an option to upload an image which would only display if for some reason the map isn't able to load!
Google Maps API key
The 'Map' section includes an option to use a 'Google Maps API Key' which then allows you to choose a color scheme and the option to show/hide the pin on the map. In order to make use of the Google Maps API, you will need to register for an API Key.
Show pin
When using the 'API Key', you then have the option to hide/show the pin with the 'show pin' setting.
Map Color Scheme
When using the 'API Key', you have the option to choose a color scheme for the map! Choose from: default, aubergine, night, retro, and silver.
Examples
Example 1
Section Settings
Address - added
Map height - 370px
Map zoom level - 15x
Google Maps API key - added
Show pin - enabled
Map color scheme - retro
Example 2
Section Settings
Wide display - enabled
Address - added
Map height - 550px
Map zoom level - 11x
Google Maps API Key - added
Map color scheme - silver
Mobile layout
When viewed on a mobile device, the 'Map' section will responsively adjust to fit into your mobile screen. The height and zoom level will still be determined by the 'map height' and 'map zoom level' settings.
