Map shows where to find your store or studio: a heading, a few lines of text, your address, a link for directions and a Google map. The map itself loads only when a customer asks for it, which keeps the page fast and private.
Where to find it
Masthead's contact page template already includes this section, under Contact info. To add it to another page, click Add section in the theme editor and choose Map.
Set up the map
- Select Map in the theme editor.
- Type your address in Address, the way you would search for it in Google Maps: street, city, postal code and country.
- Optionally add an Image, such as a photo of your storefront, to show before the map loads.
- Save, then select Show map on your storefront to check that the pin is in the right place.
There is no key or account to set up. If the pin is wrong, make the address more exact, or add the name of the business in front of it.
The address is required. The map and the directions link are both built from it. With no address, the section is hidden from customers, and the theme editor shows a reminder in its place.
The map loads on click
Until a customer selects Show map, the section shows your image, or a plain panel with a map pin, together with the address. Nothing is loaded from Google. When the customer selects the button, the map replaces the image.
This has two benefits. The page loads faster, because the map is the heaviest thing on it. And no customer data goes to Google unless the customer chooses to see the map; a short line under the button tells them so.
Get directions is a plain link that opens Google Maps in a new tab. It works without loading the map.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Text | Formatted text. | A few lines beside the map, such as what customers will find when they visit. |
| Address | Text. | Required. The map and the directions link are built from this address. Write it as you would search for it in Google Maps. |
| Show "Get directions" link | On or off. Default: on. | Adds a link that opens Google Maps in a new tab, with your address filled in. |
| Before the map loads | ||
| Image | Image. | Optional. Shown until the customer loads the map, for example a photo of the storefront. Without one, a plain panel with a map pin is shown. |
| Height | Small, Medium or Large. Default: Medium. | How tall the map and its image are. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Image before the map loads | 2000 x 1200 px (landscape) | Cropped to the section's height around its focal point. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Put your opening hours in Text, or in a Contact info section above the map.
- If you have more than one location, add one Map section for each.
- Online only? Remove the section from the contact page template: select it and click Remove section.