Setup
Setup
Grappos provides fully configured, ready-to-install product locator code. Simply paste the provided code into your website and customers can start searching for your products instantly.
Manage your locator settings using the configuration options described below, or contact Grappos and we’ll adjust the settings for you:
Styling Options
These optional configurations customize the appearance of the locator.
Option | Description | Default |
---|---|---|
backgroundImage | Background image for initial load screen. Secure URLs are recommended. | View Default |
backgroundImageTintColor | Color of the tint on ‘backgroundImage’. | ‘textNormalColor’ |
backgroundImageTintOpacity | Opactity of the tint on ‘backgroundImage’. | .40 (40%) |
primaryColor | Button background and rollover color. Should contrast and complement ‘secondaryColor’. | #3C75F1 |
secondaryColor | Background color for top of UI and results count. Should contrast and complement ‘primaryColor’. | #16409E |
alertColor | Background color for alerts. | #FF972C |
textNormalColor | Main text color. Also controls image tint for ‘backgroundImage’. | #414869 |
textLightColor | Color of secondary UI text and hairline rule lines. | #8D9FAE |
buttonTextColor | Color of text in buttons, alerts and rollover items. Should contrast with ‘primaryColor’. | #FFFFFF |
backgroundColor | Background color of product list, premise filter and attribution. | #F2F2F2 |
resultBackgroundColor | Background color of results list. | #FFFFFF |
inputBackgroundColor | Background color of the “Enter City or ZIP” and “Enter keyword to refine list …” fields. | #FFFFFF |
customMapboxStyle | Customize the map’s appearance using Mapbox Studio. | Custom grayscale |
Font Options
These optional configurations customize the locator font.
Option | Description | Default |
---|---|---|
fontFamily | Sets font family. Example: > fontFamily = “‘Font Name’, sans-serif”; |
Open Sans |
fontConfig | Sets font platform. Options: > Google Fonts: fontConfig = {google:{families: [‘Font Name’]}}; > Adobe Typekit: fontConfig = {typekit:{id: ‘Your Typekit ID’}}; |
Interface Options
These optional configurations control which locator features are visible.
Option | Description | Default |
---|---|---|
productListPreview | Displays the product list on the initial screen. Options: on, off. | off |
getMyLocation | Displays crosshair icon that allows users to automatically determine their location on wifi or cellular. Options: show, hide. | show |
autoLocate | Requests user location via browser upon page load. Options: on, off. | off |
productSearchBar | Displays search field that allows users to filter the product list. Recommended for very long product lists. Options: show, hide. | hide |
brandHeaderRow | Displays the brand name for each product group and the brand search (“Find All”) button. Options: show, hide. | show |
searchRadiusBar | Displays search radius bar. Options: show, hide. | show |
premiseControls | Displays premise type controls. Options: show, hide. | show |
otherProducts | Displays list of other products from the UID that are 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 within the distance threshold. Use this feature to allow the user to request to be notified when a product becomes available in their area. The target URL opens in a new window; Grappos passes the corresponding search criteria to the target URL. (Example.)
Note: Grappos does not host the target URL, store user information, or manage user inquiries. |
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 within the distance threshold. Use this feature to allow the user to make a purchase online if the product is not available in their area. The target URL opens in a new window.
Note: Grappos does not host the target URL, store user information, or manage user inquiries. |
disabled |
buyOnlineName | Controls the name on the ‘buyOnlineURL’ button. | Buy Online |
Premise Type Options
These optional configurations control premise type aliases and icon colors.
Option | Description | Default |
---|---|---|
onPremiseAlias | Alias for on-premise accounts. | Restaurants |
offPremiseAlias | Alias for off-premise accounts. | Stores |
onPremiseIconColor | Icon color for on-premise accounts. | #6E3A91 |
offPremiseIconColor | Icon color for off-premise accounts. | #232F8F |
userLocationIconColor | Icon color for user location. | #3C75F1 |
Search Options
These optional configurations control the initial search experience and results.
Option | Description | Default |
---|---|---|
autoSearch | Automatically executes a search upon user location entry. 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
These optional configurations display buttons and links to delivery services. The module is persistent on desktop. On mobile, the module disappears after the initial screen.
Option | Description | Default |
---|---|---|
orderDelivery | Displays delivery services on initial load screen. 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 |
The Grappos product locator allows you to create customizable search URLs that pre-determine search parameters, including:
To use custom URLs you must have a Grappos Product Locator installed on your website.
Option | Description |
---|---|
gProdNM | Product Name |
gBrandNM | Brand Name |
gLocation | Postal Code or City. E.g., you can specify “gLocation=94301” or “gLocation=San Jose, CA”. |
gPremiseType | Premise Type Options: ‘All Retailers’ (default), ‘Restaurants’, ‘Stores’ |