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.

---

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.

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