CSS Reference

This page lists every CSS variable and class the Storepoint locator uses, with its default value. Use it to write your own CSS, or give it to an AI coding tool such as Lovable, Bolt, v0, or Cursor before you ask it to restyle your locator. There's a plain-text copy for AI tools at /docs/customization/css-reference.md.

Most changes don't need CSS. Colors, fonts, map style, and pins are in your locator settings, and our team matches the locator to your site for free. Ask us any time.

• Your embed code adds one empty element. In the standard snippet it's <div id="storepoint-container">. When the page loads, the locator script builds the locator inside that element.
• The locator is ordinary page HTML. There's no iframe and no shadow DOM, so your CSS reaches every part of it.
• The locator's HTML isn't in your page source or your project files. The script builds it in the browser. That's why an AI coding tool can't see the class names when it reads your code. Give it this page instead.
• Every locator class starts with storepoint-. Target those. Classes that start with mapboxgl- or gm- belong to the map provider and can change when its library updates.

In your dashboard (recommended). Custom CSS loads after the locator's own styles, so a rule with the same selector as the locator's replaces it. Changes can take a few minutes to appear.

In your website or app. The locator adds its own styles when it starts, after your site's stylesheets have loaded. When your rule and the locator's rule use the same selector, the locator's rule is the one that applies. Write your rules under the element that holds the locator on your page, the same way you'd style any component in its own section:

/* .find-a-store is the section on your page that holds the embed */
.find-a-store .storepoint-container {
    --storepoint-accent-color: #0f766e;
    --storepoint-font-family: "Inter", sans-serif;
}

Variables are the fastest way to restyle the locator. Each one changes every element that uses it. Set them on .storepoint-container in your dashboard Custom CSS, or under your page's own element as shown above:

.storepoint-container {
    --storepoint-font-family: "Inter", sans-serif;
    --storepoint-text-color: #1f2933;
    --storepoint-background-color: #ffffff;
    --storepoint-border-radius: 12px;
    --storepoint-button-background-color: #0f766e;
    --storepoint-button-text-color: #ffffff;
    --storepoint-location-name-font-weight: 700;
    --storepoint-tag-background-color: #ecfdf5;
}

Use classes only for changes no variable covers, like hiding an element or changing a layout.

This is the default structure. What appears depends on your settings: filters, tabs, Spotlight, and online shops only show when you use them. If you use a custom card layout, the card is built from .storepoint-row, .storepoint-row-col, and .storepoint-layout-block elements instead of the default card.

#storepoint-container                     Your embed element
└─ .storepoint-container                  Locator root. Variables are set here.
   ├─ .storepoint-search-results          Search panel and results
   │  ├─ .storepoint-search               Search panel
   │  │  ├─ .storepoint-search-bar        Location search bar
   │  │  │  └─ .storepoint-location-search   The field, its buttons and its list
   │  │  ├─ .storepoint-keyword-search-bar
   │  │  ├─ .storepoint-filter-dropdown   Filters as dropdowns
   │  │  ├─ .storepoint-filter-inline     Filters as checkboxes
   │  │  ├─ .storepoint-radius-dropdown   Search radius
   │  │  ├─ .storepoint-filter-open-now   "Open now" toggle
   │  │  └─ .storepoint-widget-button      Clear search, clear filters, show all
   │  └─ .storepoint-results              Results area
   │     ├─ .storepoint-location-detail-panel   Details after a visitor selects a location
   │     └─ .storepoint-results-container
   │        ├─ .storepoint-results-header
   │        │  └─ .storepoint-view-tabs   Locations and Online tabs
   │        ├─ .storepoint-spotlight      Region messages and promo cards
   │        ├─ .storepoint-location       One result
   │        │  └─ .storepoint-location-card
   │        │     ├─ .storepoint-location-image
   │        │     └─ .storepoint-location-info
   │        │        ├─ .storepoint-name
   │        │        ├─ .storepoint-tags-container
   │        │        ├─ .storepoint-text-fields
   │        │        ├─ .storepoint-description
   │        │        ├─ .storepoint-icon-links
   │        │        ├─ .storepoint-address
   │        │        ├─ .storepoint-hours-summary
   │        │        ├─ .storepoint-hours
   │        │        ├─ .storepoint-contact-details
   │        │        ├─ .storepoint-buttons
   │        │        └─ .storepoint-distance
   │        ├─ .storepoint-alternative-online   Online shops
   │        └─ .storepoint-no-results
   └─ .storepoint-map                     The map. Pin popups use .storepoint-location-popup.

These classes sit on .storepoint-container and change with your settings or the visitor's screen.

The dark themes set their own values for the color variables, and add --storepoint-accent-on-dark and --storepoint-tab-active-color. To change colors in a dark theme, set your variables on .storepoint-container.storepoint-theme-dark.

The widget sets these from your locator settings. Change them there when you can.

The text, placeholder and icon colours apply to both search bars: the location search and the keyword search. Set these instead of styling the inputs: variables keep working when the search bar's markup changes.

These variables have no value until you set one. The widget falls back to the value shown. Set them on .storepoint-container like the others.

The hours summary has a data-status attribute (open, closed, or unknown) that you can target, for example .storepoint-hours-summary[data-status="closed"].

Hide the distance on each card:

.storepoint-container .storepoint-distance {
    display: none;
}

Use your brand font for location names, a little larger:

.storepoint-container {
    --storepoint-location-name-font-family: "Playfair Display", serif;
    --storepoint-location-name-font-size: 20px;
    --storepoint-location-name-font-weight: 700;
}

Make closed locations easier to spot:

.storepoint-container {
    --storepoint-status-closed-color: #b91c1c;
    --storepoint-status-closed-text-color: #b91c1c;
}

If you're an AI tool writing CSS for a Storepoint locator, follow these steps:

1. Don't look for the locator's HTML in the project files. The locator script builds it in the browser inside the embed element.
2. Change variables on .storepoint-container first. Use the tables on this page for names and defaults.
3. Use the classes on this page for anything variables don't cover. Don't target mapboxgl- or gm- classes.
4. If the CSS goes in the project's own stylesheet, write the rules under the element that holds the embed, because the locator's styles load after the site's.
5. Don't change the embed code or the script. Colors, fonts, map style, and pins can also be changed in the Storepoint dashboard.

• Styling the locator
• Locator settings
• Labels and wording