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. If you want to display the map in full screen, additionaly hide/remove the "Information line" blocks.
Map
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 "Button" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Button 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:
Layout
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.
Content
In the "Map code" input field, paste an API key generated by Google Maps.
As an alternative to the Google code, 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.
In the following examples, you can view how the section might display on desktop and mobile:
Information line
If you need to use the SVG icon, paste the icon name to the corresponding field. The list of icons you can view here.
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 display in a store:
Last updated