Electro How to Use Electro Map Section

Theme: Electro · Section type: All-template section

A Map section shows a Google map of your store's location next to a heading and description, with a button that opens directions in Google Maps. Use it on your About or Contact page so customers can find your physical store.

Note: You can add this section to any template, except the header and footer.

Electro Map section with the store address and opening hours next to a Google map

What you can do

Add the section and your address
Use your own map image
Add a directions button
See what customers see
Change the colors and map size
Fix common problems

Add the section and your address

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Map.
Under Text, enter a Subheading, Heading, and Description. Use the description for your address and opening hours.
Under Map canvas, enter your store's Address. Google Maps loads this location.
Click Save.

Tip: Enter the full address, including the city and country, the way you would type it in Google Maps. Then check that the map shows the right place.

Use your own map image

If you prefer an illustrated map or a photo of your store, you can show an image instead of the Google map.

Under Map canvas, select a Custom map image.
Click Save.

Note: The image replaces the Google map. The directions button still uses the Address.

Add a directions button

Under Map canvas, make sure Address is filled. The button appears only when there's an address.
Under Button, enter a Label, such as "Get directions", and choose a Style.
Click Save.

What customers see

Large screens: on screens 769 px and wider, the text appears on the left and the map on the right. The map fills 70% of the screen height or the full screen height, depending on Map canvas height on large screen.
Map: customers can drag and zoom the Google map, or click Open in Maps. The map loads when customers scroll to it.
Directions button: opens your address in Google Maps in a new tab.
Tablets and phones: the text appears above the map. The map shape follows Mobile map canvas ratio.

Map section on a phone with the text above the map

Settings reference

General

Setting	What it does
Color scheme	Sets the background, text, and button colors of the section. You can edit color schemes in Theme settings > Colors.

Text

Setting	What it does
Subheading	The short line above the heading. Leave it empty to hide it.
Heading	The section title. Leave it empty to hide it.
Heading size	Sets the heading size: H2, H3, H4, or H5.
Description	Text below the heading, such as your address and opening hours.

Map canvas

Setting	What it does
Address	The location Google Maps shows. It's also used by the directions button.
Custom map image	An image shown instead of the Google map.
Map canvas height on large screen	Sets the map height to 70% screen height or Fill screen height. If your text is long, the section grows to fit it.
Mobile map canvas ratio	Sets the map shape on small screens: Square, Portrait (2:3), or Landscape (3:2).

Button

Setting	What it does
Label	The button text. If it's empty, the button shows "Get direction".
Style	Sets the button look: Primary, Secondary, or Tertiary.

Troubleshooting

The map shows the wrong place.
Google Maps couldn't match your Address exactly. Add more detail, such as the street number, city, and country, and check the result in the theme editor.

The directions button doesn't show.
The button appears only when Address is filled. Enter your address under Map canvas.

I see an image instead of the map.
A Custom map image is selected, and it replaces the Google map. Remove the image to show the map again.

The map area shows a placeholder.
Both Address and Custom map image are empty. Enter an address or select an image.

Updated on: 02/11/2026

Was this article helpful?

Thank you!