Map
The section allows you to display a store location, office, or event venue directly on your storefront using an interactive map.
It visually connects your brand’s story to a real-world place, helping customers understand where your business operates or originates.
This section is ideal for highlighting physical stores, showrooms, pop-up locations, or brand origins as part of your storytelling. You can include address details, contact information, and an optional description or call-to-action to encourage visits or inquiries.
On the storefront, the Map section enhances transparency and trust by giving customers a clear sense of your presence and accessibility. It can also strengthen brand storytelling by grounding your narrative in a tangible location that reflects your heritage or community connection.
In short, the Map section adds a geographical dimension to your story, helping customers see where your brand lives and operates while providing practical location details in an elegant, interactive way.
Location: Sections -> Templates -> Storytelling: Map
Map – Options Overview
Top spacing
None, Small, Medium, Normal – Adjusts the vertical spacing above the map section.
Width
Default, Boxed, Wide, Fullwidth – Sets the overall width of the section. The Wide option works for screens 1440px and larger.
Desktop map (image) fixed height
Sets a fixed height for the map or image on desktop. The mobile map height is fixed at 500 pixels.
Align text relative to image
Top, Center – Aligns text vertically in relation to the image or map.
Text align
Left, Center – Adjusts text alignment within the section.
Align text relative to icon
Top, Center – Positions text relative to any accompanying icon.
Icon width
Sets the display size of the icon within the section.
Swap content with image
Swaps the position of the text content and the map or image.
Content width
Adjusts how much space the text content takes relative to the image or map.
Desktop padding
Defines inner spacing for the section on desktop devices.
Underline on hover
Enables or disables an underline effect when hovering over linked text or buttons.
Link
Adds a clickable link that can work with buttons or headings.
Dividing line
Show
Displays a dividing line above or below the section for visual separation.
Background
Background
Hide, Color, Gradient, Image – Determines the background style for the section.
Colors
Base
Sets the main color used in the section.
Accent
Defines the accent color used for highlights or active elements.
Lines
Adjusts the color of dividing lines or decorative borders.
Texts
Heading
Sets the main title of the map section.
Heading link hover
Defines the hover color for the heading link.
Description
Adds descriptive text or details about the location.
Icon
Selects an icon to display within the section.
Counter text
Displays text used for counter information if present.
Counter box
Defines the appearance or content area for counter information.
Button
Show background
Toggles button background visibility.
Background
Sets the button’s background color.
Background gradient
Applies a gradient background to the button.
Border
Defines the button border color.
Text
Sets the text color on the button.
Show background on hover
Toggles button background visibility on hover.
Background hover
Sets the button’s background color on hover.
Background gradient hover
Applies a gradient background on hover.
Border hover
Defines the border color of the button when hovered.
Text hover
Sets the text color of the button on hover.
Enable shadow
Toggles a shadow effect under the button.
Shadow
Defines the button shadow style.
Shadow hover
Sets the button shadow style when hovered.
Media button
Background
Defines the background color for video or slider buttons.
Video button, slider buttons
Icon
Sets the icon for video or slider buttons.
Background hover
Sets the background color of video or slider buttons on hover.
Icon hover
Defines the icon color when hovered.
Map – subsections
Button
This subsection allows you to customize the button title displayed in the Map section. You can change the button text to guide users—for example, to open Google Maps or get directions.
Countdown
The Countdown subsection adds a dynamic timer to indicate how long a special event, promotion, or offer remains active. You can set the full date and time, including Year, Month, Day, Hours, Minutes, and Seconds. Once the countdown ends, the timer stops automatically and cannot reset itself.
Heading
The Heading subsection allows you to customize both the subheading text and the main heading title, providing more context for your location or event.
Map – options
Google Maps API key
Required to display an interactive Google Map. You must register through Google Cloud Console to obtain the key.
Map address
Defines the location shown on the map. Google Maps will pinpoint the exact address.
Show pin
Enables or disables a pin marker on the map to highlight the address.
Map zoom level
Adjusts how close or far the map view is displayed.
Image
Allows you to display a static image instead of a live map.
Text
The Text subsection can be added multiple times to display additional content alongside the map. It can include icons, images, and short pieces of text for more context or contact details.
Show icon
Hide, Image, Preset icon – Controls whether an icon appears in the text block.
Preset icon
Allows selection of a default icon style.
Image
Upload an image (200x200px recommended) for use instead of an icon.
Preset icon name
Selects a specific predefined icon name to display.
Text
Adds custom text content to accompany the icon or image.
Last updated