Map pin info

map pin info.png

1. Purpose

Displays an embedded map or custom location image with supporting text and buttons, helping customers find a physical store.

2. Common use cases

3. How to add

Shopify Admin → Online Store → Themes → Customize → Add section → Map pin info

4. Main blocks

5. Key settings

5.1. Map settings

Setting

Description

Full width

Expands the section across the browser width.

Color

Controls the section colors.

Use map

Displays an embedded map.

Source map

Adds Google Maps iframe embed code.

Filter grayscale source map

Displays the map in grayscale.

Image

Displays a custom image when Use map is disabled.

Custom height

Sets the section height on desktop, tablet, and mobile.

To add a Google map:

Google Maps → Search location → Share → Embed a map → Copy HTML → Paste into Source map

5.2. Content blocks

Block

Description

Heading

Adds responsive heading text.

Text

Adds an address or store description.

Spacer

Controls spacing by device.

Button

Adds a linked call-to-action such as Get directions.

5.3. Section layout

Setting

Description

Top padding

Adjusts spacing above the section.

Bottom padding

Adjusts spacing below the section.

Rate padding (mobile)

Controls responsive spacing on mobile.

Custom CSS

Adds custom styles to this section only.

6. Best practices

7. Common issues

Issue

Solution

Map is not showing

Enable Use map and paste valid iframe code into Source map.

Image is not showing

Disable Use map before adding a custom image.

Map opens as a link

Use Google Maps embed code instead of a regular URL.

Section is too tall or too short

Adjust Custom height for each device.

Button does not work

Add a valid link in the Button block.

Mobile layout looks incorrect

Review mobile height, font size, and spacing.