Map Section on the eComm Performance Guide

Map Section on the eComm Performance Guide

Supported Versions: The details shared in this article apply to the updated version of eComm Performance. 

Using the Map Section

The eComm Performance theme includes a 'Map' homepage section. This is a great way to give your site a local feeling, and it also helps build confidence in your brand if customers can see where you're located. This section is also helpful if you have a physical location, or you can just show what city you're in.
Integrating your location with Google Maps allows customers to get directions to the site if you have a shop or office. If you're only online, the 'Map' section is an excellent way to show your general location. Using a city name is a great way to reinforce your credibility.

The 'Map' section also gives you the option to include integration with the Google Maps API. For you to use that, you will need to register for an API Key. With that key, you can update your map color scheme and hide/show the pin.

Shopify has instructions on how to register for a Google Maps API Key. If you don't want an API Key, the original map setting with the iframe works as default.

To get your Map set up, go into Customize (your Theme Editor) > Sections > Add Section > Map.
 

Map Settings

Section Settings

The section settings will help determine how you want the Map section to look and its layout.



Wide Display

You have the option to enable 'wide display,' which means this section will spread out the full width of the screen. If you do not enable this, the section will sit in a 'container' on the homepage and not span the full width:

Address

This is where you can type in the address you want to show up in your 'Map' section. If you have a physical location, enter the full address if you don't enter the city location. After that is entered, the map will show up:

Map Height

With this setting, you can decide the height for this section. You can choose anywhere from 300px to 600px tall:

Map Zoom Level

The 'map zoom level' setting can adjust how much your map is zoomed in. You can choose anywhere from (completely zoomed out) to 20x (completely zoomed in):

Image

You can select an image that would only be displayed if the map isn't able to load!

Google Maps API Key

This section gives you the option to use a 'Google Maps API Key.' This allows you to choose a color scheme and gives you the option to either show or hide the pin on the map. To make use of the Google Maps API, you will need to register for an API Key and then enter it into the maps setting under 'Google Maps API Key.' 

Show Pin

After you have entered your 'Google Maps API Key,' you have the option to show the pin. The default setting is for the pin to show. However, you can uncheck the 'Show Pin' box setting so the pin will not appear.

Map Color Scheme

If you choose to use the 'API Key,' you can select a color scheme for the map! You have five options to choose from: default, aubergine, night, retro, and silver. This can be done under the 'Map Color Scheme' setting.

Example


Section Settings

  1. Address - added
  2. Map height - 500px
  3. Map zoom level - 16x

Mobile Layout

When you are viewing on a mobile device, the 'Map' section will adjust to fit any mobile screen. The height and zoom will continue to be determined by the 'map height' and 'map zoom level' settings.


    • Related Articles

    • eComm Performance Guide: Custom Contact Page

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Custom Contact Page Template With the release of eComm Performance v6.2.0, not only is there a default contact page template but the ...

    • Footer Guide eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Using the Footer Section The eComm Performance theme has a customizable 'Footer' section that lets you add up to 5 vertical columns. You can ...

    • Using the Page Section on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Page Section The eComm Performance theme includes a 'Page' homepage section that has multiple uses. This section allows you to create ...

    • Gallery Section in the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.   Using the Gallery Section The eComm Performance theme has a section where you can display only images! The 'Gallery' section is a great way to ...

    • Using the Video Section in eComm Performance

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. How to Use the Video Section The eComm Performance theme has a 'Video' homepage section, which gives you the ability to creatively enhance ...