Venue - Sections - Display up to three locations with custom maps
Google API keys
Important: Your map might look like it is working when you view it in the theme editor but in most cases will not display on your live store. Shopify's domains are whitelisted by Google so maps will always work in the theme editor.
Since June 2016 Google have required an API key for you to embed a map on your site. Please refer the related article linked at the bottom of this page for more on this issue.
Setting up your maps
With our theme you can add a Map section to your homepage. One advantage of our Venue theme is that a single section can handle up to three locations (with color maps), rather than you having to create three individual map sections.
Map section settings
Once you have added a Map section to your home page you can then add your API key (see above) and control the overall design:
- Google maps API Key - Please refer the related article linked at the bottom of this page for more on this to learn more.
- Show directions buttons - This will create a button that links to the Google Maps website.
- Map style - we have pre-loaded some colored Snazzy maps you may prefer over the standard Google style.
- Background color - select from Default grey, Brand, Accent, White and Black. Brand and accent colors are set up in your General settings of the theme editor.
- Show directions button - this creates a button on top of the map with a link to Google Maps.
Map block settings
You can have up to three map blocks in each map section that you add to your homepage. These blocks can then be dragged and dropped to your preferred display order.
The elements in each block are as follows:
- Heading - the name of your location i.e Our Store or Our Cafe
- Address - this is usually the street address, phone number and email address
- Hours - you can use this for opening hours or any other text.
- Map address - this is used to generate the map, so the more accurate the better - use zip codes if possible.
- Image - you can replace the live Google map with a map image or a photo of your store.
Pro tip: to avoid have large gaps between lines of text in your Text blocks hold down shift when pressing enter/carriage return on your keyboard.
Image sizes
Please see the related article linked below to learn more about image sizes.