# Map

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FROa57BShRMAQLy1yBh5i%2Fimage.png?alt=media&#x26;token=1f66e1cb-8aa8-4fd0-8205-b6f0872351c7" alt="An example of a map section in Zest theme"><figcaption></figcaption></figure>

Showcase your store's location with a live Google Map, store info, and a call-to-action button. It’s especially helpful for brick-and-mortar stores that want to build trust and make it easy for customers to find them.

## How to add a Map section to your Shopify store

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Map.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a Map section

### Section settings

<table><thead><tr><th width="220">Setting</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Address</td><td>Input the physical location of your store.</td><td></td></tr><tr><td>Google Maps API key</td><td>Required for the map to display. See <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">register a Google Maps API key</a>.</td><td></td></tr><tr><td>Banner</td><td>Optional image shown if map doesn't load.</td><td></td></tr><tr><td>Map style</td><td>Choose from default, silver, retro, dark, night, aubergine.</td><td></td></tr><tr><td>Map height</td><td>Adjust the map height in pixels.</td><td></td></tr><tr><td>Zoom</td><td>Adjust zoom level. Higher values shows a closer view.</td><td></td></tr><tr><td>Draggable</td><td>Allow users to drag and explore the map.</td><td></td></tr><tr><td>Scroll wheel</td><td>Enable zooming with mouse scroll. Only works if draggable is on.</td><td></td></tr></tbody></table>

{% hint style="warning" %}
Without a valid Google Maps API key, the map will not appear. A fallback banner image is highly recommended in such cases.
{% endhint %}

### Block settings

Now that you have a basic map of the store's location, you can choose to display additional information within the box, including:

* Heading
* Text
* Button
* Social links.&#x20;

{% hint style="info" %}
Add your social links in Theme settings > [social-media](https://docs.foxecom.com/zest-theme/theme-settings/social-media "mention")
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.