Map

The Map section allows you to display a store location or multiple locations using an interactive or static map.

How to Activate

1. Go to Theme Editor
   • Navigate to Online Store > Themes > Customize.
   • Click Add section and select Map.
2. Enter Location Details
   • Add an address or embed a Google Maps iframe.
   • Customize the map pin color if available.
3. Save Your Changes
   • Click Save to apply the changes.

Best Practices

• Ensure your address is correct and up to date.
• Keep the map section visually balanced within your layout.
• Provide alternative contact details for customer inquiries.

General Settings

Map Information

Show Info Box

Toggle to display an informational box over the map.

Info Box Subheading

Optional smaller text displayed above the main heading.

Info Box Heading

Main title displayed inside the info box (e.g. Visit Us).

Map Address

The physical location shown on the map.

Working Hours

Displays your business hours inside the info box.

Phone Number

Adds a clickable contact phone number.

Map Features

Google Maps API Key

Required to enable Google Maps functionality.

Paste your Google Maps JavaScript API key here.

Map Type

Choose the visual style of the map:

• Roadmap
• Satellite
• Hybrid
• Terrain

Zoom

Controls how close the map is zoomed in on the location.

Map Style

Select the map appearance:

• Default
• Light
• Dark
• Auto (matches theme mode)

Fallback Image

Displayed when the map cannot load (e.g. missing API key or blocked maps).

Width

Controls the horizontal layout of the map section.

• Full width stretches the map edge-to-edge across the screen.
• Page width keeps the map aligned with the main content container.

Image Aspect Ratio

Defines the aspect ratio used for the map and fallback image.

Choose the ratio that best fits your layout:

• 16:9 – Wide, cinematic look (recommended for full-width layouts)
• 4:3 – Classic and balanced
• 3:2 – Editorial style
• 1:1 – Square layout

Button

Button Label

Text displayed inside the action button (e.g. Directions).

Button Link Target

Choose how the button link opens:

• Same tab
• New tab

Typically used to link to Google Maps directions or an external map URL.

Marker

Use Custom Marker Icon

Enable this option to replace the default Google Maps marker with a custom icon.

Custom Marker Icon

Upload or select an image to use as the map marker.

Marker Icon Size (px)

Adjust the size of the marker icon for better visibility on the map.

Spacing and Colors

Padding Top / Padding Bottom

Controls the vertical spacing above and below the map section.

Color Scheme

Applies a predefined theme color scheme to the section content.

Background

Sets the section background color.

Use Transparent to let the page background show through.

Text Color

Controls the color of all text inside the map section.

Custom CSS

Add custom CSS styles to further personalize the map section appearance.