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
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*
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).
This color selection will affect dealer names and "In Stock" callouts in Horizontal Dealers setups (shown below in yellow).
This color selection will affect the hover color for buttons and dealers (shown below in blue).
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).
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:
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.
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.
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.
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.
Enabling this feature will display an the brand name within the widget.
Enabling this feature will display an the product name within the widget.
Enabling this feature will include a "Related In Stock" button on the widget. The user can click this to show a panel of related products. Below are examples of this feature enabled in both Dealers Stacked and Horizontal Dealer Layouts.
This selection will specify the maximum number of related products shown when the "Related In Stock" feature is enabled. Below are examples of 3 and 6 related products shown.
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.
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.
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.
This dropdown menu controls the language translation for applicable words and phrases. Dealer names will not be translated.
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).
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.
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.
This feature will allow the widget to display additional dealers that have yet to be authorized.
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.
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.
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).
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.
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.
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.
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.
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).
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.
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 following:
<strong>Shop </strong>Darn Tough <em>locally!</em>
This selection will filter the dealer results by the country selected. For example, if "Germany" is selected, only dealers in Germany will populate the widget and dealers in all other countries will be excluded.
You can add this country filter to an existing Product Locator with the following snippet of code, where XX is the two-letter country code:
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.
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.
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:
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.
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!