Map

by Admin on Jan 27, 2025

1. What is Map?

The Map allows you to display a location map on your Shopify store. It is ideal for showcasing a physical store's location, offering directions to customers, or highlighting multiple business addresses.

2. Section Components

Section		Showing the location of the store with a map for the online store.
Available blocks		Displays the name of the store for easy identification on the map.
		Showcases the store's address and operating hours.
		Adds a button linking to the Google Map address.

3. Location & Setup

Go to “Online Store” > “Themes” > ”Customize”.
Select where you want to place it
Click "Add Section"
Search for Map
Click on it to add.

4. Highlight features

Integrated Info Display: Show essential details like contact information or working hours.
Actionable Button: Allow users to click and get directions or access other features.
Mobile-Friendly Design: Ensure your map is responsive and accessible on any device.
Customizable Labels: Adjust the text for your button and information fields.

5. Common Use Cases

🤔 How to set up the Map section?

Don’t know where to start with your Map section? Start with this:

STEP 1: Add & set up the Map section:

Add a Map section to the store, then:

Enter a valid address in the Store address field for Google Maps to recognize.
Adjust the Desktop height and the Mobile height of the section.

STEP 2: Add & set up the blocks:

By default, you will have 3 Store name, Address and hour, and Button blocks when you add the Map section. You cannot add more, but can delete some blocks that you don’t need.

Click on each block to change its specific setting.

STEP 3: Click “Save” when done.

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

If you wish to show another image of the location instead of the plain and simple map from Google, just do this:

STEP 1: Add the Map section:

Add a Map section to the store.

STEP 2: Set up the location:

Click on the Map section to open its setting panel, then:

Enter a valid address in the Store address field for Google Maps to recognize.
Adjust the Desktop height and the Mobile height of the section.

STEP 3: Add a custom image as the background:

In the Map section setting panel, find the Image setting and click “Select” to assign an image.

STEP 4: Click “Save” when done.

🤔 What customization options can you give your Map?

For the whole Map section
✨ Change color scheme:	Click on the Map section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme.
✨ Change the content position:	Click on the Map section, find and choose the Content position to be Left, Right, or Center.
✨ Change the content alignment:	Click on the Map section, find and choose the Content alignment to be Left, Right, or Layered.
✨ Change the section width, add padding, or add a divider	Click on the Map section, and scroll down to the Section layout group, and you will be able to change those settings.

Need help? Contact our support team at Omni Themes Support.