Map
The Map section shows your address on a Google map with contact details and a button.
How to set it up
Step 1: Add the Map section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Map and select it (1).
Step 2: Set the map
- Type the Address (1) (empty uses your store address), the zoom and height, and a cover image shown until the map loads.
Step 3: Add details
- Pick the Layout and add Contact detail blocks.
Settings reference
Map
| Map | |
|---|---|
| Address | Empty: the store address from Settings > Store details. |
| Zoom | Slider. |
| Load the map right away | Off: it loads when the shopper asks, since Google receives their data then (GDPR friendly). |
| Cover image | Shown until the map loads. |
| Height | Slider. |
| Height on mobile | Slider. |
| Layout | |
| Layout | Options: Side by side, Card over the map. |
| Content position | On desktop. Options: Left, Right. |
| On phones, show first | Options: Map, Content. |
| Content | |
| Button label | |
| Button link | Where the link goes. |
| Button style | Options: Primary, Secondary, Accent. |
Contact detail block
| Label | |
|---|---|
| Text | |
| Icon | Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube. |
| Custom icon | Replaces the icon. Use a square SVG or PNG. |
| Icon size | Slider. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Google receives the visitor's data when the map loads, so by default it loads when they ask.