Change store locator styles

What this article helps you do

Change the Mapstore appearance to match your brand. The style settings control corner radius, font sizes, button padding, and colors.

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 Mapstore style settings

• In the theme editor, select the page with the Mapstore map block.
• Open Mapstore Style Settings from App embeds, or use the Open style settings link from the Mapstore home page.
• The app embed opens with style controls.

2. Adjust shape and font sizes

• Set the corner radius used across the locator.
• Adjust font sizes for headings, body text, and buttons.

3. Adjust button padding

• Decrease or increase button padding to change the space around button text.
• This affects buttons such as directions, nearby, reset, and other storefront actions.

4. Update colors

• Use the color fields for:
  • Background
  • Text
  • Links
  • Icons
  • The fallback color for built-in map pins and marker clusters
  • Button text, border, and background
  • Active button text, border, and background
• Save after each major change.
• Preview the change to check the contrast and readability.

5. Save changes

• Click Save in the theme editor.
• View the store locator on the storefront.
• Make sure that the updates are correct.

How to verify it worked

1. Save the theme.
2. Open the store locator.
3. Make sure that the fallback pin and cluster color match your settings.
4. Make sure that the font sizes, radius, and button padding match your settings.
5. Check the normal and active button states on the storefront.
6. Test on mobile and desktop.

Troubleshooting

Give filters their own pin colors

Use Mapstore, not the theme editor, to manage pin colors for specified filters:

1. Go to Settings -> Map -> Filter colors.
2. Select a store filter.
3. Select a color.
4. Add the mapping.
5. Save the Map settings.

The mapping affects built-in individual pins. Custom marker images and marker clusters keep their existing styles. If a store has more than one filter, the first filter listed on the store that has a mapped color takes priority. The app embed pin color stays the fallback when no filter color applies.

Related articles

• Change map style and text
• Change store locator text
• Change the map design
• Add Mapstore to your theme