Map
"Map" is a valuable section for displaying contact information with the store location.
Last updated
"Map" is a valuable section for displaying contact information with the store location.
Last updated
Tip: Use the "Information line" block to edit the section with the text content. You can add several blocks if you need to display a few text lines that will be placed on the left side of the screen in a column.
To hide the title or button, leave the corresponding fields blank. If you want to display the map in full screen, hide or remove the "Information line" blocks.
Use the "Heading" placeholder to add a section title.
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Heading font size" drop-down.
If you need to set up the color of the title, use the "Heading color" picker. To change the information text color, use the "Information color". Here you can paste the hex codes to the corresponding fields or choose colors using the paint pallet. The color settings will be used for both desktop and mobile.
If you want to showcase a button in the text block under all other content, paste the call-to-action text in the "Label" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Link". Use the link from the resource selector, or paste the one if you use an external link.
Here is how the described settings might display in a store:
The layout settings change the look and feel of the section.
If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
In the "Map address" field, add the local address that includes the city and country so that Google Maps can identify the accurate location of a store.
Use the "Google Maps API key" field to paste an API key generated by Google Maps. To get your Google Maps API key, follow the steps from the initial documentation.
Select the desired map layout in the "Style" drop-down: "Default Google Maps", "Greyscale", "Dark", "Light", "Avocado", or "Blue water". View several examples of the map style below:
Place a pin to show the exact location of your store on a map by using the "Show marker" option.
The "Show zoom" slider lets you change the default map scale. Here you can set the value from 1 to 30 pixels.
As an alternative to the Google API key, you can paste an image. Choose the image by pressing the "Select image" button to use the one from a theme library or upload a new image from a computer.
If you use an image to display a map, you can choose the image proportion in the "Image ratio" drop-down. This section includes a few options to use that work on both desktop and mobile: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio, you can check here.
Use the "Icon" color picker to colorize the SVG icons.
In the following examples, you can view how the section might be displayed on desktop and mobile:
The "Icon SVG" field is designed to link SVG icons that come with the theme or your custom SVG icons:
To display the built-in theme graphics, add an icon name to the field. Learn how to operate the theme SVG icons here.
Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following help page for step-by-step instructions on the required modifications.
Leave the field blank to hide an icon.
In the "Icon image", select an image previously added to the Image Library.
The "Text" input field allows adding any informative text like address, telephone number, hours of operation, etc.
Here is how the block might be displayed in a store:
