1. Home
  2. Customizing Design
  3. How to customize the widget preloader

How to customize the widget preloader

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

By default, the preloader is displayed with the colors of our logo, but what if you want to customize it to match the colors of your brand?

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.

Simple copy and paste the following snippet into your stylesheet 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:

Updated on May 6, 2018

Was this article helpful?

Related Articles