Hero layout recommendations

You can configure "recommendations", which will display when the user clicks into the searchbox. They are loaded using the Top items API and customizable in the Luigi's Box application.

Typing suggestions work for all built-in layouts. 

<script>
function LBInitAutocomplete() {
  AutoComplete({
    Layout: 'heromobile',
    TrackerId: '179075-204259',
    Locale: 'en',
    Translations: {
      en: {
        types: {
          item: {
            name: "Products",
            heroName: "Top product",
            recommendName: "You may also like",
            recommendHeroName: "You may like"
          },
          query: {
            name: "Searches",
            recommendName: "Trending searches"
          },
          category: {
            name: "Categories",
            recommendName: "Trending categories"
          }
        }
      }
    },
    Types: [
      {
        type: 'product',
        recommend: {}
      },
      {
        type: 'query',
        recommend: {
          size: 2
        }
      },
      {
        type: 'category',
        recommend: {}
      }
    ]
  }, '#q')
}
</script>

<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>
Previous example
Adjusting colors
Hero layout examples

Try it out →
Next example
Typing suggestions
Hero layout examples

Try it out →