Locator Configurations

Grappos provides fully configured, ready-to-install product locator code. The configurations below are for customers who prefer to configure their own locators.

Tips

Contact support if your configurations aren't responding - your locator might be set to 'Grappos Control' mode
Do not bypass the init script
Do not attempt to install more than one locator per page/URL
Make sure your color selections meet contrast guidelines for accessibility

Styling Options

Option
Description
Default
backgroundImage

Background image for initial screen. Secure URLs recommended.

View Default Image

backgroundImageTintColor

Color of the tint on ‘backgroundImage’.

‘textNormalColor’

backgroundImageTintOpacity

Opacity of the tint on ‘backgroundImage’.

.40 (40%)

backgroundImageAltText

Alt text for the locator background image.

(blank)

primaryColor

Button background and rollover color.

#035EBF

secondaryColor

Background color for top of UI and results count.

#044890

alertColor

Background color for alerts.

#BC0505

textNormalColor

Main text color. Also controls ‘backgroundImage’ tint.

#282F35

textLightColor

Color of secondary UI text and hairline rule lines.

#5D6368

buttonTextColor

Color of text in buttons, alerts and rollover items.

#FFFFFF

backgroundColor

Background color of product list, premise filter and attribution.

#F2F2F2

resultBackgroundColor

Background color of results list.

#FFFFFF

inputBackgroundColor

Background color of user input field instructions.

#FFFFFF

backgroundMap

Display the Mapbox map instead of background image. Options: on, off.

off

customMapboxStyle

Customize the map’s appearance using Mapbox Studio.

Custom grayscale

Font Options

Option
Description
Default
fontFamily

Sets font family.

Open Sans

fontConfig

Sets font platform. Options:
> Google Fonts: fontConfig = {google:{families: [‘Font Name’]}};
> Adobe Typekit: fontConfig = {typekit:{id: ‘Your Typekit ID’}};

Google Fonts

Interface Options

Option
Description
Default
storeLocator

Enables 'Store Locator' mode, which removes the product list.

off

productListPreview

Displays the product list on the initial screen. Options: on, off.

off

getMyLocation

Enables users to share their location. Options: show, hide.

show

autoLocate

Automatically requests user location. Options: on, off.

off

productSearchBar

Enables a search field for the product list. Results will include near matches. Options: show, hide.

hide

brandHeaderRow

Displays brand name and "Find All" button for each product group. Options: show, hide.

show

searchRadiusBar

Displays search radius bar. Options: show, hide.

show

premiseControls

Displays premise type controls. Options: show, hide.

show

otherProducts

Lists all products available at the selected retailer. Options: show, hide.

show

notifyURL

Displays a “Notify Me When Available” button when a brand or product is not available nearby.

disabled

notifyName

Controls the name on the ‘notifyURL’ button.

Notify Me When Available

buyOnlineURL

Displays a “Buy Online” button when a brand or product is not available nearby.

disabled

buyOnlineName

Controls the name on the ‘buyOnlineURL’ button.

Buy Online

Premise Type Options

Option
Description
Default
onPremiseAlias

Alias for on-premise accounts.

Restaurants

offPremiseAlias

Alias for off-premise accounts.

Stores

onPremiseIconColor

Icon color for on-premise accounts.

#232F8F

offPremiseIconColor

Icon color for off-premise accounts.

#6E3A91

userLocationIconColor

Icon color for user location.

#282F35

genericPremiseIcons

Use generic icons instead of the shopping cart and fork/knife icons. Options: on, off.

off

Search Options

Option
Description
Default
autoSearch

Automatically executes a search upon user location input. Recommended for locators with single products. Options: on, off.

Note: Supported for single-brand locators only.
When using autoSearch with a single-brand locator that has multiple products, brandHeaderRow (“Find All”) must be enabled.

off

primaryView

Determines how mobile users see initial results: on a map or as a list. Options: map, list.

map

premiseType

Sets premise type for initial search. Options: on, off, all.

all

distanceThreshold

Sets search radius for initial search. Options: 5, 10, 25, 50, 100.

25

numResults

Sets maximum number of results displayed. Options: 1-100.

50

Order Delivery Options

Option
Description
Default
orderDelivery

Displays delivery service buttons. Options: show, hide.

hide

orderDeliveryTitle

Text label for the order delivery feature.

n/a

orderDeliveryName1

Name of first delivery service.

n/a

orderDeliveryURL1

Destination URL for first delivery service button.

n/a

orderDeliveryName2

Name of second delivery service.

n/a

orderDeliveryURL2

Destination URL for second delivery service button.

n/a

orderDeliveryName3

Name of third delivery service.

n/a

orderDeliveryURL3

Destination URL for third delivery service button.

n/a

Third Party Tracking Options

Option
Description
Default
googleAnalyticsId

Allows you to add a Google Tracking ID to your locator.

n/a

facebookMarketingId

Allows you to add a Facebook Pixel ID to your locator.

n/a

pixelUrl

Allows you to add a tracking pixel URL to your locator.

n/a

Locator customization is included in all plans

We use cookies to enhance your experience. By using this site, you agree to our use of cookies. View our Privacy Policy for more information.