Analytics & Reports


Configuration for each of the components. All of the top-level components’ properties are configurable from within this section.


All of these are optional.

Property Type Default Notes
showLabels boolean true A boolean value indicating if labels are displayed.
labels.results string 'Results:' The label for when there are results.
labels.noResults string 'No Results:' The label for when there are no results.
labels.corrected string 'Corrected:' The label for when the search term was auto-corrected.


The corrected string will appear after the word that wasn’t found, and before the autocorrect. For example, with the above code you’d see olya was not found, we corrected to olay.

The above changes the behavior of the breadcrumbs if you are using the out of the box gb-breadcrumbs.

Sample configuration:

tags: {
  breadcrumbs: {
    showLabels: true;
    labels: {
      results: "Here are all of the results we found:",
      noResults: "We found nothing, unfortunately.",
      corrected: " was not found, we corrected to",


Property Type Default
labels object {}

A string-to-string map of collection name to display-friendly collection name.

For example:

tags: {
  collections: {
    mainCollection: "Products",
    faq: "FAQs",
    articles: "Articles"

In this example, we define the labels for these collections. mainCollection and faqsAndArticles also have to be defined under the collections configuration at the parent level. Here is an example to match the snippet above from the top level configuration.

collection: {
  options: ['faq', 'articles', 'mainProducts'],
  default: 'mainProducts',


Property Type Default
loadMore boolean false
loaderLabel string 'loading...'
windowScroll boolean false


  • true: displays a load more button
  • false: fetch on scroll


A label used for the gb-infinite-loader tag, displayed when component is fetching.


With windowScroll set to false, the scroll listener is attached to the gb-infinite-list tag. In some cases, clients may want the scroll listener on the window, so that the component is not inside of a scrollable container, but instead listens to scrolls on the entire window. This can be done by setting windowScroll to true.

For example:

tags: {
  infiniteScroll: {
    loadMore: true


Under the Sort section you can outline the labels to use for the search sort configuration. For example, if your sort configuration under Search looks like this:

search: {
  sort: {
   options: [
    { field: '_relevance', descending: true },
    ...(loggedin ? [
       { field: 'product_price', descending: false }
       { field: 'product_price', descending: true },
     ] : []),
    { field: 'item.rating', descending: true },
    { field: 'title', descending: false },
    { field: 'title', descending: true },

Then the tags section would label these as such:

tags : {
 sort: {
   labels: [
     'Most Relevant',
     ...(loggedin ? [
       'Price (Low to High)',
       'Price (High to Low)',
     ] : []),
     'Top Rated (High to Low)',
     'Reverse Alphabetical'
Using variables

In the above snippet we are using loggedin as a true/false setting, which allows us to only show price when the customer is logged in. The value of this variable must be set elsewhere within the app.