This article is about the new look. Everything about how the map looks lives in Settings → Design. The Map preview at the top follows your changes, for desktop and for mobile, and nothing reaches your store until you click Save.
Step 1: Pick a map style
The Map style section lists the providers and their styles. Click Use on a style; the one your store uses says In use.
OpenStreetMap: Standard, Cold. Free, no key.
Progus: Default, Dark, Black, White, Grayscale. Free, no key.
Apple: Roadmap, Satellite, Hybrid. Free, no key.
Google: Roadmap, Satellite, Terrain, Hybrid, and More styles, a catalog of thousands of community styles from Snazzy Maps drawn with your Google Maps API key. Needs a Google Maps API key, entered on the card.
MapBox: Default, Outdoors, Light, Dark, Satellite, Satellite with streets. Needs a MapBox access token, entered on the card.
A keyed provider cannot be picked until its key is there. Obtaining a Google Maps API key explains where the Google key comes from.
Step 2: Set colours and corners
The Colors and corners section has one colour per role: Accent, Background, Cards and fields, Text, Open badge, Closed badge, Shopper's dot, Matching pins, Saved badge, Cluster bubble and Cluster text. The map interface follows these; the colours of the map imagery come from the map style.
Corners are Square, Rounded or Soft.
Reset to defaults puts the colours, corners, typography and layout back to the stock look. Your map style, API keys and custom CSS are not affected.
Step 3: Choose a font
Typography sets one font for everything the map draws. With no font picked, the map follows your theme's font, or the system font if the theme does not provide one. Pick a font from the list, or click Reset to your theme's font.
Step 4: Place the list
Layout decides whether the location list shows and, on desktop, whether it sits on the Left or the Right of the map. On phones the list slides up from the bottom over the map.
Step 5: Style the pins
Markers lists your marker styles and which one is the Default. A style has a colour and an icon. Add a style, edit it, set it as the default, or remove it. To give a location its own style, pick it when you edit the location on the Locations page.
Step 6: Set the height
Height takes a Desktop height from 400 to 1400 px and a Mobile height from 500 to 900 px. The map always fills the width of the page section it sits in, so there is no width setting.
Step 7: Clustering and custom CSS
Clustering groups nearby locations into one bubble until customers zoom in. Above 500 locations in or near the view, the map groups markers even when this is off, to stay fast.
Custom CSS applies your own rules on top of everything above. Rules written for the classic look do not carry over; the new look uses different class names.
What to do next
The starting position of the map is in General: How do I set the starting view and customer location on the new look?
Stuck on any of this? Open the chat in the bottom right corner of the app and we will help you set it up.
Last verified on 2026-10-11 against progus-store-locator 33494548 (kb-ref: colours-map-style-and-size-on-the-new-look).