How to customize the widget pre-loader pin

When the Storemapper widget is initiated, an animated marker is shown while the list of stores are being loaded.

By default, the preloader is displayed with the colors of our logo, however you may want to customize it to match the colors of your brand / website.

How do I change the colour?

Given that the preloader consists of two SVG elements (the pin marker and the shadow), you can change its appearance with just a few lines of CSS.

Please use the following snippet and replace the value of the “fill” property with the color(s) you want to use.

#storemapper .storemapper-loader-marker {fill: #4D394B;}#storemapper .storemapper-loader-shadow {fill: #4c9689;}

In the example above, the preloader will look like this:

The above snippet will need to be added into your embed code and updated in your CMS platform (see below an example of how the embed code would look) –

<div id="storemapper" style="width: 100%;"><p>Store Locator is loading from <a href="https://www.storemapper.co">Storemapper store locator</a>...</p></div><style>#storemapper .storemapper-loader-marker {fill: #4D394B;}#storemapper .storemapper-loader-shadow {fill: #4c9689;}</style><script data-storemapper-start='2015,11,22' data-storemapper-id='1'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>

You can find your embed code here

If you run into any issues or you simply want to show us your new preloader, please reach out at help@storemapper.co

We love to see your awesome maps!