Custom CSS (PRO)

The Custom CSS section allows you to completely modify the style of your store locator by applying custom CSS rules. It is an advanced tool designed for experienced users or developers and is part of the PRO features.

How to use the section

• Go to Custom CSS from the sidebar menu.
• Inside the visual editor (black area), you can write or paste your CSS code.
• The rules will be applied directly to the integrated map widget.
• When you're done, click “Save” at the bottom or top right.

Customization examples

  /* Change the color of headings */
  .storemap-widget h2 {
      color: #ff6600;
      font-family: 'Roboto', sans-serif;
  }

  /* Modify the size of marker icons */
  .storemap-widget .marker-icon {
      width: 40px;
      height: 40px;
  }

  /* Hide the "Directions" button */
  .storemap-widget .directions-button {
      display: none;
  }
      

How to load custom fonts

If you are using non-standard fonts (e.g., from Google Fonts), make sure they are already loaded on your site. The CSS applied here does not automatically import external fonts.

  @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

  .storemap-widget {
      font-family: 'Inter', sans-serif;
  }