Customization Guide

DropAFinder is designed so a non-developer can match the embedded widget to a brand without touching source code. This guide is the map of every customization surface.

The model

A finder’s appearance is governed by a single design object stored on the server. The Finder Builder is a UI on top of that object. When you change a setting in the builder, you’re updating one field in design; when a visitor loads the widget, the widget reads design and applies it as CSS variables and component props.

Practical implication: every change you make is portable. Themes, fonts, layout, copy — they travel with the finder. You can reuse them across embeds, duplicate finders to create variants, and roll back individual settings.

What you can customize

There are four broad areas, each with its own page:

Start with a theme

DropAFinder ships 16 curated themes, organized into four groups by mood:

• Light — Signal, Coastal, Sand, Sky
• Bold — Amber, Berry, Citrus, Lavender Slate
• Dark — Charcoal, Graphite, Midnight, Spruce
• Warm — Forest, Rose Clay, Evergreen, Terracotta

Each theme is a complete color set covering every token in the widget — listing card backgrounds, search button, input field, filter chips, tag pills, map markers, borders. All 16 are guaranteed to pass WCAG 2.1 AA contrast at default values.

🟡 [SCREENSHOT: Theme gallery showing all 16 cards arranged in their four groups, with the WCAG AA banner visible at the top.]

The first decision is which theme to start from. The second is whether you need to override anything.

Customize colors with confidence

If you need exact brand colors, open Custom colors from the Theme summary card. You can override any token individually.

The moment you change a color, a Live WCAG status pill appears next to the theme summary. It shows green (Passes WCAG 2.1 AA) when every audited color pair still meets the contrast threshold, and amber (N pairs below AA — review) when at least one does not.

Click the pill to open the Contrast report drawer. The drawer lists every failing pair with:

• The two colors in question
• The current contrast ratio
• The required minimum (4.5:1 for body text, 3:1 for large text)
• A Reset to preset action that restores just that one pair

💡 Tip: Brand colors that look great in print sometimes flunk on-screen contrast. The status pill exists so you can see this as you customize instead of after you ship.

🟡 [SCREENSHOT: Contrast report drawer open with two failing pairs visible, ratios shown, and the “Reset to preset” action highlighted on one row.]

Typography

Pick body and heading fonts from the curated list, then tune the base size. Heading scale derives from the base — change the base, and h1/h2/h3 scale together. Pairing recommendations and the full font roster are on the Typography customization page.

Shape

Six roundness presets — Square, Soft, Default, Rounded, Soft pill, Pill — each apply a coordinated set of corner radii across the six adjustable elements (Button, Input, Filter, Map, Tag, Location card). For exact control, the per-element editor lets you set each value independently. Tags can use percentage units (50%) to render as true pills regardless of size.

Layout

Layout is a single choice across nine tiles. Each tile defines the relative arrangement of the search bar, results list, and map. Layouts collapse predictably on mobile — the visitor experience adapts without you needing to configure it twice.

Language

DropAFinder ships English and Spanish. Switching the primary language flips every visitor-facing string. Per-string overrides let you replace individual labels (e.g., “Find a location” → “Find a kiosk”) without touching the rest of the translation.

Constraints

Two settings limit where and how your finder can be used:

• Authorized URLs — origin allowlist; the widget refuses to render on unlisted domains.
• Advanced refinements — JSON-backed configuration for refinement behavior beyond the basic Refinements page.

These are protective rather than creative — they’re how you keep your finder from showing up where it shouldn’t.

What you cannot customize

🔒 Internal only: This list is for transparency; we do not surface “things you can’t do” prominently in customer docs unless asked. The opposite framing — what is possible — leads better. Listed below for completeness.

• The widget’s HTML structure (component composition is fixed)
• Per-corner radius (top-left vs. top-right) — only per-element radius is exposed
• Rendering as anything other than the script-tag embed (no iframe, no React component)
• Custom JavaScript hooks on visitor events (analytics is read-only)

If one of these is a blocker for your use case, file a feature request through your account contact.

Where to next

• Themes in detail: Themes
• Brand-color overrides: Custom colors
• Embedding considerations: Embedding guide