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.
Installation Tips
- The locator works with WordPress, Squarespace, Shopify, Wix, Facebook and more.
- The locator is designed to size to its container element, so please ensure the container and website are set up to take advantage of this resizing.
- Make sure the web page hosting your locator has an SSL certificate. Without it, the ‘getMyLocation’ feature will not work for Google Chrome users.
- If your settings are not working as expected, try removing any comments from the code.
- Before pasting in the code please make sure to select “Text” mode in your content editor.
- To give the locator enough flexible space to dynamically resize for desktop and mobile screens you may need to adjust the settings of your website/theme template.
Configuration Options
Manage your locator settings using the configuration options described below, or contact Grappos and we’ll adjust the settings for you:
- Styling Options
- Font Options
- Interface Options
- Premise Type Options
- Search Options
- Order Delivery Options
- Search URLs
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 |
Customizable Search URLs
The Grappos product locator allows you to create customizable search URLs that pre-determine search parameters, including:
- Product
- Brand
- Location
- Premise Type
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’ |