# Map

The **Map** section allows you to embed a Google Map via HTML code. This section is ideal for displaying store locations or office addresses.

This is a **preset section** — it can be added, removed, and reordered.

<figure><img src="https://content.gitbook.com/content/9icwdCUv3B94Yb9tmqHW/blobs/KtQOECUde1q6DTDySYAd/image.png" alt=""><figcaption></figcaption></figure>

***

#### How to Configure the Map

1. In Shopify admin, go to **Online Store → Themes**.
2. Click **Customize** next to the **Elemento** theme.
3. In the theme editor, navigate to the desired page template (e.g., Contact page) using the top preview dropdown.
4. In the left sidebar, click **Add section**, then select **Map**, or locate it if it’s already added.
5. You can **drag and drop** this section to reorder it on the page.
6. Click **Save**.

To display a Google Map on your Shopify storefront, you can use the embed code provided by Google Maps and paste it into a custom HTML section in your theme. Follow these steps:

**Step 1: Get the Embed Code from Google Maps**

1. Go to [Google Maps](https://maps.google.com).
2. Search for the location you want to display.
3. Click the **"Share"** button (usually found in the location's info panel).
4. In the pop-up window, select the **"Embed a map"** tab.
5. Choose your desired map size from the dropdown (e.g., Small, Medium, Large, or Custom).
6. Click **"Copy HTML"** to copy the embed code.

**Step 2: Add the Code to Your Shopify Theme**

1. From your Shopify admin, go to **Online Store > Themes**.
2. Click **"Customize"** on your current theme.
3. Navigate to the page or template where you want to add the map (e.g., Homepage, Contact page).
4. Add a new **"Custom HTML"** section (usually called **"Custom Liquid"**, **"Custom HTML"**, or **"Custom content"** depending on the theme).
5. Paste the copied Google Maps embed code into the **HTML Code** field.
6. Save your changes.

**Notes:**

* Make sure the embed code starts with `<iframe...>` and ends with `</iframe>`.
* Google Maps embeds are responsive by default, but you can adjust width/height in the iframe tag if needed.

#### Section Settings

| **Setting**             | **Type**     | **Description**                              |
| ----------------------- | ------------ | -------------------------------------------- |
| HTML Code for embedding | HTML field   | Insert the embed HTML code from Google Maps. |
| Color scheme            | Color scheme | Defines the color styling for this section.  |

**Section Padding**

| Device      | Setting        | Type  | Description                              |
| ----------- | -------------- | ----- | ---------------------------------------- |
| **Desktop** | Top padding    | Range | Space above the section on desktop view. |
| **Desktop** | Bottom padding | Range | Space below the section on desktop view. |
| **Mobile**  | Top padding    | Range | Space above the section on mobile view.  |
| **Mobile**  | Bottom padding | Range | Space below the section on mobile view.  |

***

#### Blocks

**Block: Text**

Use this block to add textual content and SVG icons alongside the map (e.g., address, contact info).

| **Setting** | **Type**   | **Description**                                               |
| ----------- | ---------- | ------------------------------------------------------------- |
| SVG Icon    | HTML field | Inline SVG for a decorative icon (e.g., location pin, phone). |
| Heading     | Text       | Heading text for this column.                                 |
| Content     | Richtext   | Rich text content (supports formatting, links, etc.).         |
