Styling the Locator

Your store locator should look like a natural part of your website. This guide covers options for customizing your locator's appearance beyond the standard settings.

Before diving into custom styling, check out the Locator Widget Settings in your dashboard. You can configure quite a bit without any code:

• Accent/brand colors
• Map styles and custom map markers
• Button colors and link colors
• Fonts and sizing
• Layout options

This covers most common customization options. Read on for our brand styling service or CSS customization if you want to go further.

---

All Storepoint plans include styling support. When you sign up, our team can help match your locator's design to your website and brand. This is the easiest way to get a polished, professional-looking locator without any technical work on your end.

We adjust the locator's appearance so it fits naturally with your site. This typically includes:

• Matching your website's color scheme and accent colors
• Ensuring fonts and text styles feel consistent
• Fine-tuning spacing and layout to fit your page design
• Adjusting button and element styling to match your brand

The level of customization depends on your plan:

If you have specific design requirements beyond the standard settings, send us a note. Email us your website URL and any design preferences (screenshots, brand guidelines, or a quick description of what you're after) and we'll see what we can do.

Contact Us About Styling

---

If you want full control over the locator's appearance, you can write your own CSS. The widget uses standard HTML elements with consistent class names, so you can target any part of the interface.

You have two options for adding custom CSS:

Option 1: Custom CSS in Dashboard

The dashboard has a dedicated CSS editor where you can add styles that apply to your locator.

1. Go to Custom CSS in your dashboard
2. Add your CSS rules
3. Save changes

CSS added here loads after the widget's own styles, so a rule with the same selector as the widget's replaces it. Changes may take a few minutes to appear due to caching.

Option 2: CSS on Your Website

Since the locator widget embeds directly into your page, it inherits styles from your website. You can add CSS rules in your site's stylesheet or in a style block on the page where the locator appears.

This approach is useful when:

• You want styles managed alongside your other site styles
• You're using a page builder or CMS with its own CSS editor
• You need styles to load immediately without any caching delay

The widget adds its own styles after your site's stylesheets load. Write your rules under the element that holds the locator on your page, for example .find-a-store .storepoint-container, so they apply alongside the widget's.

The easiest way to find the right selectors is to use your browser's developer tools:

1. Open your locator page in Chrome, Firefox, or Safari
2. Right-click on the element you want to style and select Inspect
3. The developer tools panel shows the HTML structure and applied styles
4. Note the class names and structure of the elements you want to target

The main widget container uses the class .storepoint-container. Most elements inside have descriptive class names starting with storepoint- that you can target in your CSS. The CSS reference lists every class, so you can also skip the developer tools.

The widget uses CSS custom properties (variables) for colors, spacing, fonts, and other values. You can override these variables to change multiple elements at once.

Variables are defined on .storepoint-container and include things like:

• --storepoint-text-color
• --storepoint-background-color
• --storepoint-border-color
• --storepoint-accent-color
• --storepoint-button-background-color

The CSS reference lists all of them with their default values.

/* Example: Override the accent color */
.storepoint-container {
    --storepoint-accent-color: #e63946;
}

If a style isn't applying:

1. Check that your selector matches a class in the CSS reference.
2. If the rule is in your website's stylesheet, write it under the element that holds the locator on your page. The widget's styles load after your site's, so a rule with exactly the same selector as the widget's loses.
3. Or move the rule to your dashboard Custom CSS, which loads after the widget's styles.

• Locator Widget Settings: Adjust colors, fonts, and behavior without code
• Custom Map Markers: Use your own marker icons
• CSS Reference: Every variable and class, with defaults