Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Map Section
The Flex 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!
Additionally, you can configure width, spacing and animation settings for the Map. Custom CSS can be included in this section as well for further configuration.
In order to set up the Map, click into Customize (your Theme Editor) > Sections > Add Section > Map.
Map Section Settings
The 'Map' section settings determine the look and layout of this section!
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 Map 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.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Map section loads in.
Width
The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set the Map section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is a map section followed by a rich text section:
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Examples
Example 1
In this example, the map section is set to a 'half' width. A 'rich text' section added to provide some 'store info' and is also set to a 'half' width so the two end up sitting next to each other.
Section settings:
- Map height - 400px;
- Map zoom level - 7x
- Google Maps API key - added
- Map color scheme - night
- Width - half
- Left spacing - 80px;
Example 2
Section settings:
- Map height - 300px
- Map zoom level - 6x
- Google Maps API key - added
- Map color scheme - aubergine
- Width - standard
- CSS Classs - added
- Custom CSS - added border:
.map-border { border: 40px solid; }
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.
