1. Purpose
Displays store information with an embedded map, helping customers find physical stores or nearby retailers.
2. Common use cases
Contact page
Store locator page
About page
Retailer or stockist page
Homepage
3. How to add
Shopify Admin → Online Store → Themes → Customize → Add section → Store locator
4. Main blocks
Store item: Adds store details and an embedded map.
5. Key settings
5.1. Store item
Setting | Description |
|---|---|
Store name | Displays the store or retailer name. |
Address content | Adds the full store address. |
Phone | Displays a contact phone number. |
Displays a contact email address. | |
Map | Embeds a map using iframe code. |
To add a map:
Google Maps → Search address → Share → Embed a map → Copy HTML → Paste into Map
5.2. Section layout
Setting | Description |
|---|---|
Enable section full width | Expands the section across the browser width. |
Color scheme | Controls the section colors. |
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
Use a complete and accurate address.
Include phone and email details when available.
Test the embedded map before publishing.
Use one Store item for each location.
Keep store information formatted consistently.
Check the map layout on mobile devices.
7. Common issues
Issue | Solution |
|---|---|
Map is not showing | Make sure valid iframe embed code is pasted into the Map field. |
Map link opens instead of displaying | Use Embed a map code, not the regular Google Maps URL. |
Store information is incomplete | Add the store name, address, and contact details. |
Map displays the wrong location | Search for the correct address and generate new embed code. |
Mobile layout is too wide | Disable full width or adjust the iframe width and section padding. |
