Appearance

Customize colors, fonts, and layout options to match your store locator to your brand.

Branding Colors

Set custom colors to match your brand identity. All colors use hex format (e.g., #667eea).

Setting	Default	Description
Primary Color	`#667eea`	Buttons, links, and accent elements
Secondary Color	`#764ba2`	Secondary accent color for gradients
Focused Color	`#f0f7ff`	Background when a store card is expanded/selected
Text Color	`#1e293b`	Store names and headings
Address Color	`#666666`	Address text
Details Color	`#888888`	Distance, phone, and hours text
Background Color	`#ffffff`	Widget background

Color PickerClick any color field in the admin to open a color picker. You can also paste hex codes directly.

Typography

Font Family

Set the font family for your store locator. The default value inherit uses your theme's font automatically.

You can specify any web-safe font or Google Font that's already loaded on your site:

inherit - Uses your theme's default font
Inter, sans-serif - Modern, clean font
Georgia, serif - Classic serif font
'Roboto', sans-serif - Popular Google Font

Store Card Display

Configure what information appears on each store card in the list.

Toggle Display Options

Show Distance: Display distance from search location (enabled by default)
Show Phone: Display store phone number
Show Hours: Display store hours
Show Directions Button: Link to get directions via maps app
Show Website: Display store website link
Show Store Image: Display the store's featured image
Show Tags: Display store tags as badges

Expandable Cards

When Cards Expandable is enabled, store cards show minimal info by default and expand when clicked to reveal full details. This keeps the list compact while still providing all information.

Distance Settings

Distance Unit

Choose how distances are displayed:

Miles - Used in the US, UK
Kilometers - Used in most other countries

Default Search Radius

Set the default search radius (in miles or km) when customers search for stores. Customers can typically adjust this in the search interface.

Custom Text Labels

Customize all text in the store locator to match your brand voice or translate to other languages. These settings are found in Settings → Content.

Label	Default
Search Placeholder	"Search by city, zip code, or store name..."
No Results Message	"No stores found."
Directions Button	"Get Directions"
Website Button	"Visit Website"
Phone Label	"Phone"
Hours Label	"Hours"

Advanced Styling

Border Radius

Control the roundness of corners on cards and buttons. Higher values create more rounded corners.

0px: Sharp corners
4-8px: Subtle rounding (default)
12-16px: Noticeably rounded
9999px: Fully rounded (pill shape for buttons)

Shadow

Add depth to cards with box shadows. Options typically include:

None: Flat design, no shadows
Subtle: Light shadow for slight elevation
Medium: More prominent shadow
Strong: Bold shadow for maximum depth

Live PreviewChanges appear in the preview panel immediately as you adjust settings. Click Save when you're happy with the design.