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.

On This Page

• Locator Widget Settings
• Brand Styling Service
• CSS Customization for Developers

Locator Widget 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.

Brand Styling Service

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.

What's Included

We adjust the locator's appearance to blend seamlessly 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:

Requesting Custom Styling

If you have specific design requirements beyond the standard settings, just reach out. Send us your website URL and any design preferences (screenshots, brand guidelines, or just a description of what you're looking for) and we'll see what we can do.

Contact Us About Styling

CSS Customization for Developers

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.

Where to Write CSS

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 is loaded alongside the widget styles. 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

Any valid CSS targeting the widget's elements will apply.

Finding CSS Selectors

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.

CSS Variables

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

To see all available variables, inspect the .storepoint-container element in your browser's developer tools and look at the computed styles or the :root / container declarations.

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

A Note on Specificity

Widget styles have normal specificity, so your custom styles should override them as long as your selectors are equally or more specific. If a style isn't applying:

1. Check that your selector matches the element structure
2. Try adding .storepoint-container as a parent selector for more specificity
3. As a last resort, use !important, but this is rarely needed

Related

• Locator Widget Settings: Adjust colors, fonts, and behavior without code
• Custom Map Markers: Use your own marker icons