Map #1 - #2 - #3 - #4 - #5

by Admin on Sep 24, 2025

The Map section is where you can display the map that shows the store location, allowing customers to easily locate nearby stores or pickup points. By integrating an interactive map, customers can view store addresses, contact information, and operating hours, enhancing their shopping experience.

1. Section Components

Section	Map	Show the store location, contact information, and operating hours
Available block	Store name	Add a heading area (store name) to the section.
	Address and hour	Add store address and business hours to the section.
	Button	Add a button that automatically links to the Google Map of the entered address.

2. Location & Setup

To add & set up the Map section:

Open the Shopify Theme Editor (Online Store > Themes > Customize)
Decide where you want to place the new section in Template.
Click "Add Section".
Select "OT: Map (#number of variant)".

3. Highlight Features

Google Maps integration: Automatic location detection and display based on entered address.
Flexible display options: Choose between interactive map or custom image display.
Comprehensive store information: Show store name, address, hours, and contact details in organized blocks.

4. Common Use Cases

🤔 How to set up Map section?

STEP 1: Add the section

Add Map section to your desired position in the theme editor. Click on Map section to open its settings panel.

STEP 2: Enter store address

In the Map section settings:

Type the accurate address (including zip code, if available) into the Store address.
Ensure the address exists and is recognized on Google Maps.
Google Maps will automatically locate and display the corresponding map.

STEP 3: Click "Save" and preview.

🤔 How to show a custom image instead of the map?

To show a custom image instead of the map:

STEP 1:

Click on Map section to open its settings panel

STEP 2:

Simply add an Image to the section. The section will prioritize displaying the image over the map.

STEP 3: Click "Save" and preview.

🤔 How to customize the text and layout of the section?

STEP 1: Click on Map section to open its settings panel

STEP 2: Adjust section height and content display

Choose section height on Desktop and Mobile.
Choose Content position & Content alignment within the section.

STEP 3: Add section blocks

Under the Map section, you can add blocks to set up more info about the store name, opening hours. Here's how to set up:

Block	How to set up?
Store name	Set the heading text, size, and HTML tag (to enhance the SEO of the page).
Address and hour	Set the Text showing store address and opening hours. Adjust text size.
Button	Name the button label, for example: Get directions. Choose button style, animation and color.

Result:

STEP 4: Adjust section styles and layout on different devices

On the Map section's settings group:

At Styles config group, choose colors for the section background, text…
At Desktop layout/Mobile layout config groups, choose section width and padding.

STEP 5: Click "Save" when done.