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

# Map

## Map

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" and "[<mark style="color:blue;">Map</mark>](#map-block)" blocks.\
**Tip:** Use the "[<mark style="color:blue;">Content group</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/content-group.md)" block to edit the section with the text content.\
Add several blocks to display multiple lines of information.\
Press **"Add block"** to use the desired block. Each block can be added individually and customized in different ways.
{% endhint %}

### Layout

{% hint style="success" %}
Check the layout option examples [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#layout-options).
{% endhint %}

The layout settings change the look and feel of the section.

**Layout**\
Change the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group position using the picker:

* **"Split"**. Puts the "Header" group in the content grid while keeping it on the right.
* **"Stacked"**. Displays title elements above the media content and aligns them to the left.
* **"Centered"**. Shows the centered title elements above the media content.

**Mobile alignment**\
Align the elements from the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)" content group using one of the options:

* **"Auto"**. Uses the setting applied in the "Layout".
* **"Left"**. Displays content on the left.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.
* **"Center"**. Centers content.\ <mark style="color:orange;">**Note!**</mark> The call-to-action button displays in full width on mobile by default.

**Use custom width**\
Enable the option to display the related settings.

**Width**
\
Set the map width between 30% and 100%.

**Min width**\
Set the minimum map width to maintain readability on larger screens. The value can be set to range from 400 to 1400 pixels.

**Position**\
Choose where the map is placed within the section.

* **"Side"**. Aligns the form to the left.
* **"Center"**. Centers the form within the section.

<mark style="color:orange;">**Note!**</mark> This feature works only if the map width is set to less than the full width of the screen.

### Layout options

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/bk6vuK4pMyXrdeu12Ou8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/wm5FQWWnyis3nblugQKk" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Map (block)

Use the block to display a location on your store using an image, an embedded map, or an interactive Google Map. You can choose the map source and customize its appearance and controls to match your website design.

**Map source**\
Select the method used to display the map. The additional settings appear after selecting the desired option.

* **"Image"**. Displays a static map image uploaded from your store files. This option is useful when you want full control over the map appearance or do not need interactive features.

**Image**\
Press **"Select"** to upload the necessary animation for all screen sizes.

**Image ratio**\
Use the options to adapt media to the desired size. You can select one of the standard options: "Adapt to image", "Portrait", "Square", "Landscape", or "16/9". Check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).\
Alternatively, apply one of the custom options. These options include additional settings that appear underneath the drop-down after selecting an option:

1. **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 110%\*.

   \*The "Proportion" option is applied to mobile by default.\
   **"Proportion"** indicators:\
   \* 100% = Square image\
   \* Less than 100% = Landscape\
   \* More than 100% = Portrait\
   \* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
2. **"Fixed"**. This option sets the image size in pixels by establishing the parameters on the **"Height"** scale. The height can be adjusted between 100 and 1000 pixels.

* **"Iframe code"**. Displays a map embedded using custom iframe code from a map provider, such as a Google Maps embed.

**Map iframe code**\
Paste your embedded code into the field.

* **"Google Maps API"**. Displays an interactive Google Map using the Google Maps API. This option allows you to configure the map location, style, and controls. To generate your Google Maps API key, follow the steps from the initial [<mark style="color:blue;">documentation</mark>](https://developers.google.com/maps/documentation/embed/get-api-key).

**Map address**\
Defines the location displayed on the map. Enter a full address, business location, or place name to set the map position.

**Google Maps API key**\
Connects your store to Google Maps services. Enter your Google Maps API key to enable the interactive map and its features. Read the details [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/online-store/themes).

**Style**\
Controls the visual appearance of the Google Map. Choose from predefined styles:

* **"Default Google Maps"**. Uses the standard Google Maps appearance.
* **"Greyscale"**. Displays the map with muted grayscale colors.
* **"Dark"**. Applies a dark-themed map style.
* **"Light"**. Uses a clean, minimal light-colored style.
* **"Avocado"**. Applies a green-toned custom map style.
* **"Blue water"**. Highlights water areas with blue tones for a distinctive look.

**Show marker**\
Displays a location marker on the map to highlight the selected address or location.

**Show zoom**\
Displays zoom controls on the map, allowing visitors to zoom in and out of the map view.