How do we design and install the product locator?

Design

The product locator inherits the brand's existing styling, and additional CSS can be added on the site. The main design choice is the presentation.

Installation

Your onboarding specialist will send you a product locator wizard similar to the test wizard, but with code unique to the brand integration. With the wizard, try different formats at any time. To access the embed code, click the blue tools icon to open the Wizard. Scroll down to Share & Embed. Copy the embed code and paste it onto your PDP template.

📘
Important
The UPC or Style Number parameter must be injected per PDP to have the intended functionality. The page needs to send us either the UPC or style number so it can match the product in our catalog and serve up the correct dealers for that item. Most brands write JavaScript to programmatically pull the UPC or Style Number from each page. Our team provides the code and guidance, but we are unable to write any scripts or touch your CMS.
A common error is inserting the same style or UPC for all pages, or leaving that field blank.

Best Practice Recommendation: We recommend installing via UPC, instead of by style.

Depending on the product array, some products work best with a reload per selection. For example, with shoes, if a shopper chooses women's size 9, it is generally best to search for that exact item so it won't jump sizes based on what is in stock nearby. If it is a kayak in three different colors, a shopper would likely want to see any color nearby, so a reload would not be recommended in this case.

Extra Options

Reload

Our Product Locator can respond to a variant selection on your PDP to locate that specific variant in a nearby store.

The lcly_reload_0 function updates the UPC value in the lcly_config_0 object. It then rebuilds the query string with the updated UPC value and assigns the new URL to the src attribute of the script element with the ID lcly-script-0. This triggers the reload of the Locally product locator with the updated configuration.

To reload the Locally product locator, define a function called lcly_reload_0 and pass the updated UPC value as an argument:

lcly_reload_0({ upc: "XXXX" });

Be sure to place this function after your elements load — best practice is to place it below your product locator script.

Example of Product Locator Reload

The mechanism will differ case by case, but the overview is as follows:

Find the ID of your Product Locator widget. Look at the widget embed code for lcly-config-*. For example, you might find lcly-config-0. The -0 is the widget ID.
Decide when you want to reload the Product Locator widget. Typically this should happen when the user updates the variant selection on your PDP. This can be done in various ways — for example, on Shopify, the platform triggers an event the widget can listen for.

This example snippet looks for any changes to a select element tagged with the .original-selector class. When changing variants, the element fires an event with details of what changed. We then call the lcly_reload_* function with the ID from the first step (in this case lcly_reload_0), passing an object with the attribute upc and the UPC of the variant the user selected (event.detail.barcode in this case).

Please note that the information above is intended to assist companies with technical teams. This solution may vary depending on the platform and the specific implementation within it; it is not a universal solution that applies uniformly in all cases.

If you can only install via style, note that it needs to be a true style/group ID, as we don't support SKUs.

Installing multiple brand UPCs for enterprise brands and OEMs

To install a product locator that pulls from multiple brands, you'll need to do a UPC install. No other adjustments are necessary.

Display Price

On display or click, the display price will be the MSRP provided, the nearest store price, or a range of prices depending on the area. If you'd like to display only MSRP on the first screen, let us know. The in-store price will always show in-cart.

Once your product locator is installed, please send the onboarding specialist a link to the staging site (and username/password if needed) so we can confirm the Product Locator is working as desired. The best indicator that it is working correctly is seeing the product info on the map pop-up from the Product Locator: you should see the product thumbnail, product name, and Unit MSRP (if you are displaying prices).

Kit Parameter

This only works with the on-page product locator layouts. With Locally's kit parameter, you can specify multiple UPCs and minimum quantity thresholds if needed, and our product locator will display local store results that satisfy or exceed all conditions. For example, if you sell a kit composed of two different UPCs, add the following snippet to your Product Locator code:

"kit": {
  "must_have": [
    { "upc": "123456789123" },
    { "upc": "123456789124" }
  ]
}

The Product Locator widget will only display stores that have both UPCs in stock.

To specify a quantity for each UPC, add a quantity parameter:

"kit": {
  "must_have": [
    { "upc": "123456789123", "qty": "1" },
    { "upc": "123456789124", "qty": "4" }
  ]
}

CMS Guides

We have additional info for some common CMS providers. Please consult with your CMS provider for specific questions not covered in our guidelines.

Locally Landing Pages Installation, Ship to Store

Designing & Installing the Product Locator

Design

Installation

Important

Extra Options

CMS Guides

What’s Next