The Flex theme includes a Map page 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 you are 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 the 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 includes 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.
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.
Add this section to the
Map Settings
The 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 your 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 (max zoomed out) to 20x (max zoomed in).
Image
Upload an Image to display in case the map is unable to load. Upload a Mobile image to have a separate image for mobile devices.
Google Map API Key
The Map section includes an option to use a Google Maps API Key. 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.
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 full width of the screen and Half will only span half of the width. Selecting Standard will keep the section in a container and not spread the full width.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Animation
The Animation setting will determine how the feature appears as it loads. The options for animation are None, Fade in, Fade in down, Fade in left, Fade in right, Slide in left, Slide in right, and Zoom.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature