> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/informative/map.md).

# Map

The Map section displays an interactive Google Maps view of your store location on any page. It helps customers find your physical location quickly and easily. You can add contact information alongside or overlaid on the map, making it simple for visitors to see your address, phone number, email, and business hours all in one place. You need to add your [**Google Maps API key**](/docs/guides/create-a-google-maps-api-key.md) and [**Google Map ID**](/docs/guides/create-a-google-maps-map-id.md) in the [**theme settings**](/docs/theme-settings/map.md).

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FqMOizJ0PZTwp2yXmALd6%2FCapture%20d'%C3%A9cran%202026-02-20%20164857.png?alt=media&amp;token=8f1fd228-9fab-4156-a172-f79019f4e27a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Map**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Heading

* **Heading**: The main title that appears above the map section. This helps visitors understand what the section is about.
* **Underline**: Adds a decorative underline beneath the heading when enabled.
* **Heading size**: Controls how large the heading appears, from extra small (XS) to extra extra large (2XL).

#### Content

* **Description**: Optional text that appears below the heading to provide additional context or information about your location.
* **Content alignment**: Controls how the heading and description are aligned on the page (left, center, or right).

#### Layout

* **Full width**: When enabled, the map section spans the entire width of the browser window instead of being contained within the page margins.
* **Color scheme**: Choose a color scheme that matches your store's design. This affects the background and text colors of the section.

#### Map settings

* **Address**: Enter your store's physical address. You can use a full address or a Google Maps URL. This is what visitors will see on the map.
* **Latitude**: Optional coordinate that helps the map load faster and more accurately. You can find this by searching your address on Google Maps and checking the URL.
* **Longitude**: Optional coordinate that works together with latitude to pinpoint your exact location for better map performance.
* **Zoom level**: Controls how close or far the map view is. Lower numbers show a wider area, while higher numbers zoom in closer to your location.
* **Map height**: Choose how tall the map appears on the page. Options range from small to full screen, depending on how prominent you want the map to be.

#### Padding

* **Top**: Adds space above the map section to create visual separation from other content.
* **Bottom**: Adds space below the map section to create visual separation from other content.

#### Contact information

The contact information block lets you display your business details alongside or overlaid on the map.

**Layout**

* **Side**: Choose whether the contact information appears on the left or right side of the map (desktop only). On mobile, it appears above the map.
* **Content position**: Controls the horizontal alignment of the contact information content within its container.
* **Content alignment**: Sets how text within the contact information block is aligned (left, center, or right).
* **Width**: Determines how much horizontal space the contact information takes up when displayed beside the map. Options are 1/4, 1/3, or 1/2 of the available width.
* **Enable sticky content on desktop**: When enabled, the contact information stays visible as visitors scroll past the map, making it easy to reference your details.
* **Show as overlay on map**: When enabled, the contact information appears as a card positioned on top of the map instead of beside it. You can choose which corner it appears in.
* **Overlay position**: If overlay is enabled, choose which corner of the map the contact information card appears in (top-left, top-right, bottom-left, or bottom-right).
* **Color scheme**: When using overlay mode, choose a color scheme for the contact information card that contrasts well with the map.

**Content**

* **Heading**: The title for your contact information block, such as "Contact Us" or "Visit Us".
* **Address**: Your store's physical address as you want it displayed to customers.
* **Phone number**: Your business phone number that customers can use to reach you.
* **Email address**: Your business email address for customer inquiries.
* **Business hours**: Your store's operating hours. You can format this with line breaks to show different days and times clearly.

***

### Tips

* For best performance, provide both an address and coordinates (latitude and longitude). You can find coordinates by searching your address on Google Maps and copying the numbers from the URL.
* If you have a physical store, use the contact information block to display your hours prominently so customers know when to visit.
* The overlay option works great for full-screen maps, as it keeps your contact details visible without taking up extra space.
* Test your map on mobile devices to ensure the contact information is easy to read and access on smaller screens.
* Use the sticky content feature if your map is tall, so visitors can always see your contact details while exploring the map.