Map
"Map" is a valuable section for displaying contact information with the store location.
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. To display the map in full screen, hide or remove the "Information line" blocks.
Map
Heading
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 "Size" drop-down.
If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Content
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 generate 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 allows you to 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 in the "Image" source selector. Assign an image by pressing the "Select" button to use 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 several options to use that work on both desktop and mobile: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here.
Button
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:
Section layout
The layout settings change the look and feel of the section.
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". It will be hidden once you use the "None" option.
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.
Colors
To change the text color, use the "Information color". Here you can paste the hex codes into the corresponding fields or choose colors using the paint palette. The color settings will be used for both desktop and mobile.
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:
Information line
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 you to add any informative text, such as an address, phone number, hours of operation, etc.
Here is how the block might be displayed in a store:
Last updated