Display your physical store address using the Google Map section

This article will walk you through steps on how to display a Google Map on your page with EcomSolid.

Using a Google Maps widget can help consumers locate your business and improve the overall user experience. Most websites will utilize Google Maps on their contact page to identify their actual locations. By doing so, you will save clients the process of opening maps in another window and pasting over the address. They can simply click on your map pinned address and get directions.

Add the Google Map section to your page

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

 

Step 2:  Access the Library from the top bar of the Editor Page.

 

 

Next, navigate to Section > Extend. Choose your preferred section and hit “Insert” to add it to your Editor.

 

 

After that, you will find the section added to your Editor. Click on the section to start configuring the settings, including the Content and Design tab. 

Configure the Content tab

GENERAL

Section Name: Input the text into the field for the preferred label of your map. 

 

 

MAP

Search Location: Input your address/location into the field. Your map will include a pin dropped at this location.

 

Zoom Level: Select the zoom level of the map from the drop-down. You may reduce the zoom level to focus your map directly on your business location. Otherwise, choose a higher level to show the surrounding area.

 

 

Configure the Design Tab

Navigate to the Design tab to style your map further.

Height

Use the slider or input the number into the box for your preferred value for the map’s height.

Color

Select a color or enter a hex color code for the map’s label. 

Typography

Input the number for the font size you want for the map’s label.

 

 

Padding and Margin

The Padding and Margin parameters have four empty boxes that allow you to fill in the value for four directions: top – right – bottom – left.

 


 

Animation

Select the animation for your map from the drop-down. You can click on “Preview” to see how the animation works on the live page. 

 

 

That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.


Was this helpful?