> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/map-1_o0d0c2.jpg)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Map**.
3. Under **Text**, enter a **Subheading**, **Heading**, and **Description**. Use the description for your address and opening hours.
4. Under **Map canvas**, enter your store's **Address**. Google Maps loads this location.
5. 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.

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

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

## Add a directions button
1. Under **Map canvas**, make sure **Address** is filled. The button appears only when there's an address.
2. Under **Button**, enter a **Label**, such as "Get directions", and choose a **Style**.
3. 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/map-2_1ar0246.png =390x740)

## 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.

## Related articles
- [How to use Electro Contact form](https://help.ecomx.co/en/article/electro-how-to-use-electro-contact-form-yudoyc/)
- [How to edit Electro Page template](https://help.ecomx.co/en/article/electro-how-to-edit-electro-page-template-154imq0/)
- [How to use Electro Image with text section](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-section-1i58xtt/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)