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

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
backgroundMap Display a Mapbox map instead of a background image on the initial screen. The Mapbox Map style will match the options set in the customMapboxStyle configuration option below. Options: on, off. off
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’}};
Google


 
 

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
genericPremiseIcons Use generic icons instead of the shopping cart & fork/knife. Options: on, off. off


 
 

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


 
 

Search URLs

The Grappos product locator allows you to create Search URLs that pre-determine search parameters, including:

  • Product
  • Brand
  • Location
  • Premise Type

 

To use Search URLs you must have a Grappos Product Locator installed at the target URL.

Option Description Example
gProdNM Product Name gProdNM=Organic%20Pinot%20Noir
gBrandNM Brand Name gBrandNM=Gabriel%20Organics
gLocation Postal Code or City/State gLocation=90401 -or- gLocation=Santa%20Monica%2C%20CA
gPremiseType Premise Type gPremiseType=on -or- gPremiseType=off

Examples:

  • Search for the Atticus Hills brand in Bars & Restaurants in Las Vegas:

https://www.grappos.com/locator_demo/?gLocation=Las%20Vegas%2C%20NV&gBrandNM=Atticus%20Hills&gPremiseType=on

  • Search for Two Sisters Cabernet Sauvignon in Stores in Tulsa:

https://www.grappos.com/locator_demo/?gLocation=Tulsa%2C%20OK&gProdNM=Two%20Sisters%20Cabernet%20Sauvignon&gPremiseType=off

  • Search for Organic Pinot Noir at any location in Atlanta:

https://www.grappos.com/locator_demo/?gLocation=Atlanta%2C%20GA&gProdNM=Organic%20Pinot%20Noir

Need Help?