Go to MSL dashboard > Settings > Map Styling

1. Enable Fullscreen: Allows visitors to view the map in fullscreen mode for better visibility.

2. Enable Clickable Icons: Visitors can click on different store/location icons on the map.

3. Enable Map Type Control: Lets visitors switch between map types (e.g., satellite or normal map).

4. Enable Zoom Control: Shows zoom buttons on the map, so visitors can zoom in/out easily.

Zoom control example:

5. Enable Scale Control: Displays a scale at the bottom of the map to understand distances.

6. Enable Street View Control: Lets visitors use Google Street View to see real-world surroundings.

Marker Setting

Custom Image for Map Markers (Pins):
Add your own image/icon to replace the default map pin.

Upload the image in Shopify Files, then paste the file URL here.

Marker Height & Width (max 70px):
Set the size of your custom marker image. Maximum allowed size is 70px for both height and width.

Cluster Setting

Enable Clustering

When this option is turned on, nearby map markers are grouped into clusters with a counter. This makes the map easier to read when zoomed out.

If you have more than 1000 locations, this option is mandatory and will be auto-enabled on the storefront.

Custom Image for Map Clusters

You can upload and use your own image for map clusters.

Upload the image in Shopify Files, then paste the file URL here.

The image should be 30px height and 30px width (transparent image recommended).

Cluster Text Color Code

Set the color of the number displayed inside the cluster (use hex color code, e.g., #000000 for black).

Map Styling

Custom JSON for MAP styling
https://mapstyle.withgoogle.com

How to create a design JSON for MAP?
Step 1: Select your design from here.

Step 2: Click on the Finish Button and in the popup you can see the JSON data.

Copy it and paste it on MSL dashboard > Settings > Map Styling > Map Styling

Now the map is displayed with the new styling.