Installing Retail Trust Badges

This guide covers how to install and customize the Retail Trust Badges on your site.

Retail Trust Badges display nearby retailers carrying your products with real-time inventory. They build customer confidence and drive both in-store traffic and online conversions.

An example of what your users will see when they have retailers carrying your products near them.

By default, this widget inherits the fonts on the page you add it to unless you override them.

Shopify Installation

Installation instructions can be found within the Install tab of the StoreLocators Shopify App. Don't have the app installed? Please find the Shopify app listing here.

Customizing the way the badges look can be done directly from the Shopify Theme Editor by clicking on our Retail Trust Badges app section once it's applied to a page and adjusting the settings in the panel that appears. If you have questions, reach out to Anthony, our Customer Success Manager, ([e-mail]).

Script Installation (Headless)

Basic Installation

We will provide you with the initial script that will look like this:

<script defer="defer" src="//cdn.storelocators.com/rpi/js/rpi-stable.js"></script>
<link href="//cdn.storelocators.com/rpi/css/rpi-stable.css" rel="stylesheet" />

<style type="text/css">
  .sl_content_row_element .store_name { display: none !important; }
</style>

<script>
  window.storeLocatorsConfig = {
    customerId: 'YOUR_CUSTOMER_ID_HERE',
  }
</script>

<div id="storelocators_rpi" style="display:none;--sl-extraWidth:0px;--sl-margin:0px 0px 0px 0px;"></div>

That's it. Paste this script as an HTML block on your product pages and the badges will appear.

Although our script is customizable with the options below, please do not change the customerId in the initial script we send you, as this is how your badges pull in the stores associated with your account.

How it works

• The script file loads our Retail Trust Badges code from our servers.

• The CSS file styles how it looks.

• The style tag contains any custom CSS rules for your specific setup.

• The config object is where you tell the script which badge set to load (using your customerId) and how to customize it.

• The <div> is where the badges actually appear on your page. The inline styles control visibility and spacing.

Configuration Options

Display Options

Control which information displays in the badges:

window.storeLocatorsConfig = {
  customerId: 'YOUR_CUSTOMER_ID_HERE',
  maxStores: 5,
  format: 'icons',
  showStoreLogo: true,
  showStoreNames: true,
  showStoreDistance: true,
  showStoreQuantity: true,
  buyNowLinks: true,
}

Common display options:

• maxStores - Maximum number of stores to display (default: 5)

• format - Layout style: 'icons' for badges only, 'row' for list with names and distance (default: 'icons')

• showStoreLogo - Display retailer logos (default: true)

• showStoreNames - Display retailer names (default: true)

• showStoreDistance - Display distance to each store (default: true)

• showStoreQuantity - Display stock quantity at each store (default: true)

• buyNowLinks - Add buy now links to each entry, which will lead users directly to the retailer product page on click (default: true)

Behavior Options

Control how the badges interact and respond:

window.storeLocatorsConfig = {
  customerId: 'YOUR_CUSTOMER_ID_HERE',
  allowDuplicateStores: false,
  storelocators_url: '',
  clickLocation: '_self',
  noLocations: 'implode',
}

Common behavior options:

• allowDuplicateStores - Allow the same retailer to appear multiple times if there are multiple nearby locations (default: false)

• storelocators_url - Full URL to your store locator page. When set, clicking the badges opens this page

• clickLocation - Where the store locator opens: '_self' (same tab) or '_blank' (new tab) (default: '_self')

• noLocations - What to show when no nearby stores found: 'implode' (hide) or 'show_retailers' (show all retailers) (default: 'implode')

Style Customization

Customize colors and spacing to match your brand:

window.storeLocatorsConfig = {
  customerId: 'YOUR_CUSTOMER_ID_HERE',
  style: {
    color: '#000',
    textColor: '#000',
    textColorSecondary: '#AAA',
    contrastColor: '#FFF',
    borderRadius: '8px',
  }
}

Common style options:

• color - Button/badge background color

• textColor - Text color for store names and addresses

• textColorSecondary - Distance text color

• contrastColor - Button text color

• borderRadius - Button corner radius (default: 8px)

Copy Customization

Customize any text the badges display:

window.storeLocatorsConfig = {
  customerId: 'YOUR_CUSTOMER_ID_HERE',
  copy: {
    trustedRetailerPartners: 'Trusted Retail Partners',
    inStockNear: 'Trusted Retailers Near USER_CITY',
    inStockNearRetailer: 'Available At A RETAILER Near USER_CITY',
    getDirections: 'Get Directions',
    quantityUnit: 'QUANTITY unit',
    quantityUnits: 'QUANTITY units',
    inStock: 'In stock',
  }
}

Common copy options:

• trustedRetailerPartners - Header text above badges

• inStockNear - Title when stores are found (USER_CITY is replaced with user's location)

• inStockNearRetailer - Title when showing specific retailer (RETAILER and USER_CITY are replaced)

• getDirections - Button text for directions link

• quantityUnit - Text shown when quantity is 1 (QUANTITY is replaced with the number)

• quantityUnits - Text shown when quantity is greater than 1 (QUANTITY is replaced with the number)

• inStock - Label for in-stock items

Full Example

window.storeLocatorsConfig = {
  customerId: 'YOUR_CUSTOMER_ID_HERE',
  maxStores: 3,
  format: 'icons',
  showStoreLogo: true,
  showStoreNames: true,
  showStoreDistance: true,
  showStoreQuantity: true,
  allowDuplicateStores: false,
  clickLocation: '_blank',
  noLocations: 'trust_badges',
  buyNowLinks: true,
  style: {
    borderRadius: '4px',
    color: '#1a73e8',
    contrastColor: '#fff',
    textColor: '#000',
    textColorSecondary: '#666',
  },
  copy: {
    trustedRetailerPartners: 'Find Us In Store',
    inStockNear: 'Available Near USER_CITY',
    getDirections: 'Directions',
    inStock: 'In Stock',
  }
}

Troubleshooting

If you have questions or run into any issues with the information provided on this page, reach out to Anthony, our Customer Success Manager, ([e-mail]) and he will help you get everything configured correctly.