Visitors can browse fulfillers by location, view their details, and filter by status or label.
The Dealer Locator is a feature in the Quivers Panel that lets Sellers embed or display a searchable map/list of their fulfillers (dealers) on their website.
Table of Contents
- Key Features
- Installing the Dealer Locator
- Creating or Editing a Dealer Locator
- Adding Retailer to the Dealer Locator
- CSS Customization
- Notes
Key Features
-
Map + List View: Displays fulfillers on a map and in a list side-by-side
-
Embed / Overlay: Delivered via an iframe snippet so you can embed it or display it as an overlay
-
Detail Popups: Clicking a fulfiller shows its address, phone, website, hours, etc.
-
Real-Time Status: Fulfillers that provide store hours will be labeled “Open” or “Closed,” with color-coded pins (green for open, red for closed) based on their local time zone
-
Filters & Labels:
-
Filter fulfillers by label (e.g. product lines)
-
Option to filter by “Open Now”
-
Merchants choose which labels appear and which fulfillers show up
-
-
Map Bounds Interaction: Zooming or moving the map updates the list and distances shown
-
Geolocation: Users can center the map on their current location (browser permission dependent)
Installing the Dealer Locator
Getting Started
Before embedding a Dealer Locator on your website, you must first create one in the Quivers Panel.
-
If you already have a Dealer Locator created, continue below.
-
If not, see the section Creating a New Dealer Locator for step-by-step instructions.
Embedding the Dealer Locator
-
Log into your Quivers Panel
-
Navigate to Dealer Locators
- Click on the Dealer Locator you're wanting to embed
-
Copy the “Embed Code”
-
Paste the snippet into your web page or set it to appear as an overlay
-
Use CSS (if needed) to size or style the container
- You can add this to the "Custom CSS" section under "Customization" in the "Settings" tab
Because the component adapts to the containing element, you may need to adjust styling so it displays properly (full width, height, responsive, etc.).
Advanced Embed Options
1. Language / Culture Overrides
By default, the Dealer Locator will use the language set in its settings within the Quivers Admin. However, it is possible to specify a culture/language override when embedding.
Normal Embed Script:
<script type="text/javascript"
src="https://dealerlocator.quiverstest.com/embed.js"
data-quivers-dealer-locator-id="527f36a1-6564-4005-bcf4-0fcd9e9a89d5"
data-quivers-environment="test">
</script>
Embed with Culture Override:
<script type="text/javascript"
src="https://dealerlocator.quiverstest.com/embed.js"
data-quivers-dealer-locator-id="527f36a1-6564-4005-bcf4-0fcd9e9a89d5"
data-quivers-environment="test"
data-quivers-culture="fr-FR">
</script>
In this example, the data-quivers-culture="fr-FR"
attribute forces the Dealer Locator to display in French (France).
2. Default Filter by Label
You can also set a default filter label so that when the Dealer Locator loads, it automatically filters to a specific label.
To do this, add the data-filter-label
attribute to the embed script, using the exact label text as the value.
Example (Default Filter = “Premium Dealer”):
<script type="text/javascript"
src="https://dealerlocator.quiverstest.com/embed.js"
data-quivers-dealer-locator-id="527f36a1-6564-4005-bcf4-0fcd9e9a89d5"
data-quivers-environment="test"
data-filter-label="Premium Dealer">
</script>
When this script runs, the Dealer Locator will automatically apply the Premium Dealer filter on load.
Creating or Editing a Dealer Locator
Creating a New Dealer Locator
If you don’t already have a Dealer Locator, you’ll need to create one first:
-
In the Quivers Panel, go to Dealer Locators from the left-hand menu.
-
Click the blue “Add Dealer Locator” button.
-
Enter a name for your Dealer Locator.
-
Set the language for the locator.
-
Decide whether to toggle on Auto-Enrollment.
-
If enabled, newly connected retailers will be automatically enrolled.
-
-
Click Save to create the Dealer Locator.
Once saved, your new Dealer Locator will appear in the list and can be managed or embedded using the instructions above.
Editing an Existing Dealer Locator
-
In the Quivers Panel, go to Dealer Locators
-
Locate the Dealer Locator you want to edit and click the pencil icon to the right next to its name.
-
In the Settings tab, you can:
- Change original settings
- Name, Language, Auto-Enrollment
- Add Google Analytics Code
-
Copy Embeded Code
- Make Customizations
- Google Maps Option (JSON) Format
- Custom CSS
- Custom Map Pin
- Change original settings
- Click Save to apply any changes.
Switch to the Preview tab to see how it will look:
-
Zoom, pan, or drag in the preview map
-
Use “Pegman” to enter street view
Auto-Enrollment Behavior
-
Enrollment = Enabled
In the Dealer Locator, when a retailer is enrolled, it means they are enabled for that locator. -
What auto-enrollment does
If auto-enrollment is enabled, all newly connected retailers will automatically be enrolled (enabled) for that Dealer Locator. -
What auto-enrollment does not do
It does not automatically enable all currently available retailers. If you want all existing retailers enabled at once, you can use the “Enable All” button. -
Imports
-
Importing a retailer automatically connects them to your business.
-
Since auto-enrollment enables all newly connected retailers, this also includes imported retailers.
-
In practice, imports create a connection to the shell account (or the existing retailer account, if matched), and those imports are automatically enrolled if auto-enrollment is turned on.
-
Adding Retailers to the Dealer Locator
Once you’ve created a Dealer Locator, you’ll need to add and manage the retailers (fulfillers) that appear. This is handled in the Settings tab of the Dealer Locator.
Options in Dealer Locator Settings
-
Add New Fulfillers – Add individual fulfillers directly from within the Dealer Locator settings.
-
Import / Export Lists – Bulk manage fulfillers by importing or exporting lists.
-
Add Labels – Assign or manage labels (e.g., “Premium Dealer,” “Service Center”) to help organize retailers.
-
Choose Specific Fulfillers to Enable – You can manually enable or disable fulfillers to control which ones appear.
-
Search for Fulfillers – Use the search bar to quickly locate a specific retailer to adjust its enrollment status.
Importing Retailers with Dealer Locator Enrollment
Retailers can also be added during a fulfiller import (under Fulfillers in the left menu).
-
The import template includes a field called “Intended for Dealer Locator.”
-
Marking this field as “Y” will automatically add those fulfillers into the Dealer Locator.
Auto-Enrollment Reminder
If you’ve enabled Auto-Enrollment, any newly connected retailers (including those imported) will automatically be enrolled in the Dealer Locator. If Auto-Enrollment is not enabled, you’ll need to manually enable them in settings.
CSS Customization
The Dealer Locator supports CSS targeting by label, allowing merchants to customize how different categories of dealers appear.
-
Each label includes a
data-label
attribute, which you can use in your CSS rules. -
This allows precise styling for dealers marked with a specific label.
Examples
1. Custom Background for a Label
.label[data-label="Premium Dealer"] {
background: #666 !important;
color: #fff !important;
}
2. Custom Font Color
.label[data-label="Authorized Service Center"] {
color: #0073e6 !important;
font-weight: bold;
}
3. Adding a Border or Badge Style
.label[data-label="Flagship Store"] {
border: 2px solid gold !important;
padding: 3px 6px;
border-radius: 4px;
}
4. Hiding a Label
.label[data-label="Temporary"] {
display: none !important;
}
5. Adding Icons (with pseudo-elements)
.label[data-label="Repair Center"]::before {
content: "🛠️ ";
}