Setting up a custom Google Maps style

Stockist supports changing the theme of your store map (the colors of the land, water, roads, etc.) on our Plus plan and above.

If your map is using Google Maps, we have a variety of built-in styles to choose from, or you can also create a totally custom style to match your site.
Changing the map style is currently supported on our Plus plan and above.

Choosing a built-in style

To choose one of our hundreds of built-in styles for Google Maps, follow the steps below:
  1. In Stockist, navigate to Settings > Appearance > Map theme, then click Change map theme:

  2. Find the theme you’d like to use, then click the green Install button:

That’s it! The chosen map theme will then be used for the store map on your website:

Creating a custom style

If you’d prefer to create a totally custom style for your map, we recommend using SnazzyMaps which provides a useful editor tool:

https://snazzymaps.com/editor

There are also other design tools for Google Maps available online. If you choose to use a different editor, you’ll need to be able to export a "JavaScript Style Array" to add your theme to Stockist.
Note that the Google Maps dashboard (where you set up your map key) also has a “Map Styles” section, but this is using a different technology and won’t work with Stockist.
To create a custom Style with SnazzyMaps, follow the steps below:
  1. Open the SnazzyMaps editor at https://snazzymaps.com/editor
  2. Choose a preset style to start from - there are a few options including Light, Dark, and Monochrome. You can also choose a primary feature color in this step. Then, click Apply style:

  3. To customize an individual feature like the water, land, or roads, click on the feature in the leftmost menu, select either Geometry (to edit the feature itself) or Labels to edit the text, then adjust the styles. You can turn the visibility on or off and also change the color:

  4. Once the map looks how you'd like, click View code:

  5. Select the entire code under JavaScript Style Array (note that it may be long, and you'll need the entire code), then right-click and choose Copy:

  6. In Stockist, navigate to Settings > Appearance > Map theme, then click paste in your own style code:

  7. Right-click in the text box that appears and paste in the style code you copied from SnazzyMaps:

  8. Finally, save the page to update your map
Once this is done, the store map on your website should use the color scheme that you set up in SnazzyMaps:

If you later need to edit your theme, you can copy the code out of the Advanced map styles box in Stockist and paste it into SnazzyMaps (select Import JSON when opening the editor). From there, you can update the style, and then paste the updated JavaScript Style Array back into Stockist.