Customize style settings (colors, typography, spacing, button states)

What this article helps you do

Fine-tune Mapstore’s look so the store locator matches your brand. The current style settings focus on corner radius, font sizes, button padding, and specific color controls.

Before you start

• Mapstore is installed and 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

• Update vertical and horizontal button padding to make actions feel denser or roomier.
• This affects buttons such as directions, nearby, reset, and other storefront actions.

4. Update colors

• Use the color fields for:
  • Background
  • Text
  • Links
  • Icons
  • Button text, border, and background
  • Active button text, border, and background
• Save and preview after each major change so contrast and readability stay strong.

5. Save changes

• Click Save in the theme editor.
• View the store locator on the storefront to confirm your updates.

How to verify it worked

1. Save the theme and open the store locator.
2. Check that colors, font sizes, radius, and button padding match your choices.
3. Check normal and active button states on the storefront.
4. Test on mobile and desktop.

Common issues and fixes

Related articles

• Changing map styling and storefront text
• Customize text labels and storefront copy
• Choose a map style (predefined vs custom style JSON)
• Add Mapstore blocks to your theme