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

# Blum Map

**Theme:** Blum · **Section type:** All-template section

The **Map** section shows a Google map of your store's location next to your store details, with a button that opens directions in Google Maps. Use it on your Contact or About page to help customers visit you.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds 1 **Content** block.
![Map section with store details and a Google map](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/map-1_h1ythb.png)

**What you can do**
- Add the section and your address
- Add your store details and directions button
- Show an image instead of the map
- See what customers see
- Look up every setting
- 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**. The section comes with 1 **Content** block.
3. Under **General**, enter your store's **Address**. Google Maps loads this location.
4. Optional: select a **Color scheme**.
5. Click **Save**.

> **Tip:** Enter the full address, including the city and country, so Google Maps finds the right place.

## Add your store details and directions button

1. Click the **Content** block.
2. Under **Text**, enter a **Subheading**, a **Heading**, and a **Description**, for example your opening hours.
3. Under **Button**, enter the button **Label**, for example "Get direction".
4. Click **Save**.
5. Optional: click the **Map** section. Under **Layout**, select a **Content ordering on desktop**: **Text first** or **Map first**.

> **Note:** The directions button shows only when the **Address** in the section is filled in.

## Show an image instead of the map

1. Click the **Map** section.
2. Under **General**, select an **Image**.
3. Click **Save**.

The image replaces the Google map. The directions button still opens your address in Google Maps.

## What customers see

- **Desktop:** the store details and the map sit side by side. **Text first** puts the details on the left, and **Map first** puts the map on the left.
- **Map:** an interactive Google map of the address. Customers can zoom, move the map, or open it in Google Maps.
- **Directions button:** opens your address in Google Maps in a new tab.
- **Mobile:** the store details show first, and the map shows below them.
- **Without the Content block:** the map uses the full width of the section.
![Map section on a phone with the details above the map](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/map-2_obic79.png)

## Settings reference

### General

| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You can edit color schemes in Theme settings > Colors. |
| Address | The location Google Maps shows. It is also used by the directions button. |
| Image | Shows an image instead of the Google map. |

### Layout

| Setting | What it does |
| ---- | ---- |
| Content ordering on desktop | Places the store details first (Text first) or the map first (Map first) on desktop. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Content block settings

| Setting | What it does |
| ---- | ---- |
| Subheading | Small text above the heading. |
| Heading | The main heading, for example your store name. |
| Description | Text about your store, such as the address and opening hours. |
| Label | The text of the directions button. Leave it empty to hide the button. |

## Troubleshooting

**The map shows the wrong place.**
Enter a more complete **Address**, including the street, city, and country.

**The directions button doesn't show.**
Fill in the **Address** in the section settings and the button **Label** in the **Content** block. The button needs both.

**I see an image instead of the map.**
The **Image** setting replaces the map. Remove the image to show the map. If both the **Address** and the **Image** are empty, the section shows a placeholder image.

**Map first doesn't work on my phone.**
**Content ordering on desktop** only works on desktop. On mobile, the store details always show first.

## Related articles

- [Blum Address List](https://doc.ecomx.co/en/article/blum-address-list-1617ruh/)
- [Blum Contact Form](https://doc.ecomx.co/en/article/blum-contact-form-14mavbl/)
- [Blum Image With Text](https://doc.ecomx.co/en/article/blum-image-with-text-asff90/)
- [Blum Page Template](https://doc.ecomx.co/en/article/blum-page-template-wpdqk1/)