This customization guide describes the features that can be added/adjusted for the Product Locator widget. We encourage you to use CSS to style the widget! Using CSS is the best way to customize the fonts/colors/etc.
You will be supplied a Product Locator wizard link by your Locally Implementation contact. The features described in this guide can be found by clicking the blue tools icon in the upper right-hand corner of the wizard page. The Configure & Embed panel sections are described and exemplified below.
Configure & Embed Sections
Primary Options
Specify whether you are generating a Product Locator or a Dealer Locator. This guide shows the PL customization options.
Select the layout of your PL. See below for samples of the different layout presets.
Dealers Stacked *Preferred Layout*
Horizontal Dealers *Preferred Layout*
Button Only
Adaptive Text
Dealer Dropdown
Colors
The best way to customize the appearance of your Product Locator widget is via CSS; the widget will inherit CSS styling from your website.
A few components of the Product Locator widget colors can be specified using the fields below. Be sure to enter Hex Values in the following format: "#123456"
This color selection will affect button colors in Dealers Stacked setups and header text and pins in Horizontal Dealers setups (shown below in red).
To add this to an existing Product Locator, add "color_0": "#000000", to the embed code, where 000000 is the desired Hex Value.
This color selection will affect dealer names and "In Stock" callouts in Horizontal Dealers setups (shown below in yellow).
To add this to an existing Product Locator, add "color_1": "#000000", to the embed code, where 000000 is the desired Hex Value.
This color selection will affect the hover color for buttons and dealers (shown below in blue).
To add this to an existing Product Locator, add "hover_color_0": "#000000", to the embed code, where 000000 is the desired Hex Value.
Button
The "Hide Button" checkbox will enable/disable a button that, when clicked, can open a dealer locator window. The button display text is customizable (see Button Text).
To hide the button on an existing Product locator, add "always_hide_button": "1", to the embed code.
When this feature is enabled, the button becomes a dropdown toggle for the dealer results.
Click on the "Find it Locally" button in this wizard for an example of this feature disabled (default): 
Click on the "Find it Locally" button in this wizard for an example of this feature enabled: 
Please note: If the feature is enabled on a Horizontal Dealers layout, the button will appear as the Locally heart icon by default: 
To enable this feature on an existing Product Locator, add "button_toggles_all": "1", to the embed code.
The button display text is customizable in this field. By default, the Dealers Stacked button will display "Find it Locally" and the Horizontal Dealers button will display the Locally heart icon.
To customize this text on an existing Product Locator, add "button_text": "x", to the embed code, where x is the desired text.
Product
Entering a style number into this field will include a "Style:" parameter in the embed code. This will cause the product locator to identify stocking dealers by style number match.
To add this to an existing Product Locator, add "style": "x", to the embed code, where x is the style number.
Entering a UPC or EAN into this field will include a "UPC:" parameter in the embed code. This will cause the product locator to identify stocking dealers by UPC match.
To add this to an existing Product Locator, add "upc": "x", to the embed code, where x is the UPC number.
Enabling this feature will display an image of the selected variant within the widget. Please note: this feature only works if your Product Locator uses a UPC parameter.
To add this to an existing Product Locator, add "show_product_image": "1", to the embed code.
Enabling this feature will display an the brand name within the widget.
To add this to an existing Product Locator, add "show_brand_name": "1", to the embed code.
To add this to an existing Product Locator, add "show_product_name": "1", to the embed code.
Location
Enabling this feature will add a Location Switcher to the widget, which will allow the user to change their dealer search location within the Product Locator. Shown below, the right side image has the feature enabled and the left side image does not.
To add this to an existing Product Locator, add "show_location_switcher": "1", to the embed code.
While the Location Switcher feature is enabled, it can be converted to a prompt text using the Show Location Prompt Text feature. This is shown in the right side image, while the widget in the left side image uses the standard Location Switcher.
To add this to an existing Product Locator, add "show_location_prompt": "1", to the embed code.
The Location Prompt Text is customizable in the PL Options tab of your brand's configuration settings. The custom text below was used to produce the Location Prompt Text above.
Locale
This dropdown menu controls the language translation for applicable words and phrases. Dealer names will not be translated.
To change this on an existing Product Locator, edit the "lang": "en-us", parameter value to the desired language code.
Dealers
This feature will enable the display of dealers within the widget (first example below). In almost all cases, this feature should be enabled. If it is disabled while the Show Related In-stock Products feature is enabled, the widget will only show related product options (second image below). If neither the Display Dealers or Show Related In-Stock Products features are enabled, the widget will not show any clickable options (third image below).
To change this on an existing Product Locator, add or edit the "show_dealers": "1", parameter in the embed code.
The option selected in this menu will determine the maximum number of dealers shown in the widget. If there are less authorized dealers in the searchable area than is selected, only that number of dealers will show.
To adjust this value on an existing Product Locator, edit the "n_dealers": "3", parameter in the embed code from 3 to the desired number.
If your brand does not use dealer list categories, do not use this feature. If your brand does use dealer list categories, this feature will filter dealer results by the category entered. For example, if a PDP should only show dealers tagged with "platinumdealer", entering the category tag in this field will filter all results that may populate the PL.
To add this to an existing Product Locator, add "category": "tag", to the embed code, where "tag" is the category tag to be used.
You can filter dealer results to multiple categories by separating them with " OR ".
For example: "category": "tag1 OR tag2", will show dealers tagged with "tag1" and dealers tagged with "tag2".
This feature will allow the widget to display additional dealers that have yet to be authorized.
To enable this feature on an existing Product Locator, add "show_unauthed_dealers": "1", to the embed code.
Enabling this feature will filter the dealer results by only showing dealers that stock products in the same style group.
Please note: using this parameter can cause customer confusion, as the widget may display dealers that aren't reporting stock in a variant the user is viewing, but are reporting stock in a different variant in the same style group.
To enable this feature on an existing Product Locator, add "show_only_stocking_dealers": "1", to the embed code.
Enabling this feature will filter the dealer results by only showing dealers that stock products with the same UPC number.
Please note: this is only applicable if your Product Locator uses a UPC search parameter and are injecting the UPC number for the PDP.
To enable this feature on an existing Product Locator, add "show_only_upc_stocking_dealers": "1", to the embed code.
NOTE: This feature only functions on the Dealer Dropdown layout.
This feature will show the number of dealers available to select in the widget. Please note that the number displayed will be limited by the maximum dealers allowed to display in the widget (e.g. if Maximum Dealers is set to 5, the Display Dealer Count metric will be up to 5).
To enable this feature on an existing Product Locator, add "show_dealer_count": "1", to the embed code.
Enabling this feature will display dealers' addresses within the Product Locator widget. Below are examples of this feature enabled in both Dealers Stacked and Horizontal Dealers layouts.
To enable this feature on an existing Product Locator, add "show_address": "1", to the embed code.
Enabling this feature will include a link for each dealer that brings the user to the Google Maps page for the dealer's address. Below are examples of this feature enabled for both Dealers Stacked and Horizontal Dealers layouts. This feature can be simultaneously active with others, including the "Display Address" feature, shown in the bottom example where the dealer addresses are also displayed.
To enable this feature on an existing Product Locator, add "show_directions": "1", to the embed code.
Enabling this feature will include the dealer's phone number within the widget. Below are examples of this feature enabled for both Dealers Stacked and Horizontal Dealers layouts. This feature can be simultaneously active with others, including the "Display Address" and "Display Directions Link" features, shown in the top example where the dealer addresses and directions links are also displayed.
To enable this feature on an existing Product Locator, add "show_phone": "1", to the embed code.
Content coming soon!
Enabling this feature will disable selection of the dealers themselves. The user will still be able to change locations and click a widget's button and footer link to open the Product Locator, but the dealers shown in the widget will be for display only.
For an example of this feature enabled, go to this Product Locator wizard and try clicking on the dealers. (If you don't see any dealers listed, try changing your location). Alternatively, this Product Locator wizard shows what normally happens when a user clicks on the dealers.
To enable this feature on an existing Product Locator, add "void_dealer_click": "1", to the embed code.
Content coming soon!
Specifying a mileage radius in this field will limit the dealer search to this radius. In the examples shown below, the top widget is limited to 1 mile from the user's location (the dealers are 0.0 and 0.4 miles away), while the bottom widget is limited to 20 miles from the user's location (it also displays a dealer 3.5 miles away).
To add this feature on an existing Product Locator, add "radius_in_miles": "x", to the embed code, where x is the desired number of miles.
Specifying a km radius in this field will limit the dealer search to this radius. This parameter is identical to the previous parameter, with radius units in km instead of miles.
To add this feature on an existing Product Locator, add "radius_in_km": "x", to the embed code, where x is the desired number of kilometers.
You have the option to add custom text/HTML to the dealer entries using this field. For example, the text in the example below was added by enabling this feature using the text below.
To add this feature on an existing Product Locator, add "html_to_append": "x", to the embed code, where x is the HTML.
<strong>Shop </strong>Darn Tough <em>locally!</em>
Country
To add this feature on an existing Product Locator, add "only_show_country": "XX", to the embed code, where XX is the two-letter country code.
Footer Link
Enabling this feature will hide the clickable text that appears in the footer of the widget. Below are two examples: the link is not hidden on the left; the link is hidden on the right.
To enable this feature on an existing Product Locator, add "no_link": "1", to the embed code.
This feature determines the functionality of the footer link. When this feature is disabled, clicking the footer link will open the Locally.com product page. When this feature is enabled, clicking the footer link will open a modal window on the same page, containing a dealer locator.
To enable this feature on an existing Product Locator, add "link_opens_modal": "1", to the embed code.
Click on the footer link in this wizard for an example of this feature disabled (default):
Click on the footer link in this wizard for an example of this feature enabled:
Miscellaneous
Enabling this feature will make all interactions with the Product Locator widget open a new tab.
To enable this feature on an existing Product Locator, add "target": "new", to the embed code.
Click on a dealer or the footer link in this wizard for an example of this feature disabled (default):
Click on a dealer or the footer link in this wizard for an example of this feature enabled:
Enabling this feature will hide the widget when no dealers within the searchable radius are stocking the product. Below are three examples to show different scenarios; the third example shows the feature enabled.
To enable this feature on an existing Product Locator, add "hide_all_when_no_stock": "1", to the embed code.
The below widget displays a dealer stocking the selected product. This feature is disabled (default):
The below widget displays authorized dealers, despite the product not being available nearby. This feature is disabled (default):
This below widget is the same as the one above (location in NY, NY), but the Hide Widget When Not In Stock feature is enabled: 
The message shown above (when the widget is hidden) is customizable. Log in to your Locally Dashboard, then go to Tools & Maps > Configurations > select the Store Locator option > PL Options tab. The field called "Message to display when no dealers are found at all" will customize this message.
This feature adjusts the widget preview while on the wizard page. Please note that the specified size will not transfer when you copy the embed code: it is for preview only. Ultimately, the size of the PL iframe will be subject to the web page in which it is inserted and should be customized via CSS.
By default, the preview width is set to 600 pixels for Horizontal Dealers layouts, 300 pixels for Dealers Stacked, Dropdown, and Button Only layouts. Adjusting the width can be helpful for visualization purposes, especially when weighing the option to include additional information within the widget. For example, a wider PL widget may work best if you wish to include dealer addresses, phone numbers, direction links, etc. Alternatively, a narrower PL widget may be more suitable if you wish to simplify the look, or if space on your PDP is limited.
Share & Embed
Sharing the exact configuration of a PL is done easily by sharing the URL contained in this field. When someone opens this URL, they will be able to open the wizard configuration to copy the embed code.
This section contains the embed code needed to be copied into a PDP for the widget to be displayed. It contains all of the configuration specified by the features explained in this guide. Here are the installation instructions for what to do with this embed code!