Change the map design

What this article helps you do

Select the appearance of the store-locator map. Select a predefined Mapstore style or enter a custom MapLibre style URL.

Before you start

• Mapstore is installed.
• The map block is on a page.
• You have access to the Shopify theme editor.

Step-by-step instructions

1. Open map style settings

• In the Shopify theme editor, select the page with the Mapstore map block.
• Click the Mapstore Map block.
• In the block settings, find the predefined style selector and the Custom style URL field.

2. Select a predefined style

• Mapstore includes Default, Versatiles, Positron, Toner, Bright, and Liberty styles.
• Select one from the dropdown or list.
• Save the theme. The map then updates on the storefront.

3. Use a custom style JSON (optional)

• Build or edit your style JSON in a tool such as Maputnik.
• Export the finished style JSON file.
• Upload that file to Shopify so it has a public file URL.
• Paste that URL into the Custom style URL field in the Mapstore map block.
• Save the theme. A custom style URL overrides the predefined style.

4. Adjust other visual options

• The map block also controls the default marker image, sticky header, scrollable filters, and content width.
• The map block controls the desktop and mobile map height.
• The Mapstore Style Settings app embed controls the fallback pin and cluster color.
• The app embed controls the other locator colors and the typography.

How to verify it worked

1. Save the theme.
2. Open your store locator on the storefront.
3. Make sure that the map uses the selected style.
4. If you use custom JSON, make sure that the map shows its colors, roads, and labels.

Troubleshooting

Related articles

• Change map style and text
• Change store locator styles
• Set up a Google API key
• Add Mapstore to your theme