Map
The Map section shows an interactive map next to your location details — address, opening hours, phone — with a directions button.
What it does
Section titled “What it does”Use it on the contact page or the home page footer area for stores with a physical location. The map loads only when the visitor scrolls close to it — before that you see a calm placeholder. That’s by design to keep the page fast, not a broken map.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Map — it is added in the Map embed layout with three Contact info item blocks already in place (address, hours, phone).
- Keep the Map embed layout and paste a Google Maps embed (see below), or switch to Split / Boxed overlay and use a photo instead of the interactive map.
- Edit the three starting Contact info blocks with your real details, then save.
Choose a style
Section titled “Choose a style”The Layout setting switches between three looks. Only one of them shows the interactive map — the other two are photo layouts:
| Style | Look | Media |
|---|---|---|
| Map embed (default) | The interactive map beside your info cards | Needs the Map embed paste (see below) |
| Split | Your info cards beside a photo | Uploaded Image, recommended 1600×1200 px — no interactive map in this layout |
| Boxed overlay | A photo with your info floating on it | Uploaded Image, recommended 1600×1200 px |
Set it up: quick start
Section titled “Set it up: quick start”- In Google Maps, find your place, choose Share → Embed a map → Copy HTML, and paste the full snippet into Map embed. An embed URL (the iframe’s https://www.google.com/maps/embed?… link) works too — a plain share link (the short goo.gl link or a place page URL) does not.
- Edit the three starting Contact info blocks: Map pin + address, Clock + hours, Phone + number.
- Set First button label (“Get directions”) and a Link to the directions URL. With Map embed pasted, the button only appears when you fill in this link.
- Save and scroll the preview slowly — the map loads when it gets close to the screen.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Layout | Map embed | Split / Map embed / Boxed overlay | Switches the overall look |
| Map embed | Empty | Text area | Map embed layout only. Paste the Google Maps embed HTML (Share → Embed a map → Copy HTML) or the embed URL. No API key needed. Loads automatically near the screen |
| Heading | “Visit us” | Text | Section title; leave empty for no title |
| Text | Empty | Text | Short line under the heading |
| Location | “500 Broadway, New York” | Text | Your address or place name — the fallback when the embed is empty or invalid |
| First button label | “Get directions” | Text | Shows a button; leave empty for no button |
| Link | Empty | URL | With Map embed, paste a directions link for the same place. Otherwise leave empty to use Location |
| Image | Empty | Image picker | Photo for Split and Boxed overlay layouts — these layouts have no interactive map. Recommended 1600×1200 px |
Blocks
Section titled “Blocks”Add up to 4 Contact info item blocks.
| Block | Limit | What it adds |
|---|---|---|
| Contact info item | 4 | One icon + one line of location info |
Contact info item settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Icon | Map pin | Map pin / Clock / Phone / Mail | The small icon before the line |
| Text | (demo address) | Text | One line: address, hours, phone, or email |
Images and content tips
Section titled “Images and content tips”- Boxed overlay / Split photo: 1600×1200 px storefront or neighborhood shot.
- Keep each Contact info line short — full details belong on your contact page.
- Type the address exactly as it appears on Google Maps for the best fallback map.
Good to know
Section titled “Good to know”- The map loads about 300 px before it enters the screen, and a manual Load map button is available before that. Far from the viewport, nothing is requested from Google — that’s the speed feature working, not a broken map. An Open in Google Maps link is provided next to the loaded map, and without browser scripts the section shows a text notice instead.
- No API key, no monthly bill. The embed uses Google Maps’ standard share feature.
- The button is your directions link. With an embed pasted, add the directions URL yourself (Maps → Directions → copy the link); without an embed, the section builds one from Location.
- If the embed code is ever invalid, the section quietly falls back to a map of your Location text.
Example setups
Section titled “Example setups”Storefront block. Map embed layout with the real embed pasted, three info lines (address / hours / phone), “Get directions” button linked to the Google Maps directions URL.
Atmosphere card. Boxed overlay with a storefront photo, heading “Come say hi”, address line, no map — for brands that lead with the photo.
Common questions
Section titled “Common questions”The map shows a placeholder, not the map. Keep scrolling — it loads as it comes near the screen. If it never loads, re-paste the embed code and save.
Google Maps says my embed failed to load. Re-copy from Share → Embed a map and paste the full snippet. An invalid paste falls back to a simple location map.
Can I use Apple Maps or Bing Maps? The section supports Google Maps embeds; other providers’ snippets aren’t supported.