Adjust colors

Adjust the colors using CSS styles. In this example, the autocomplete widget uses a red color scheme.

<script>
function LBInitAutocomplete() {
  AutoComplete({
    Layout: 'heromobile',
    TrackerId: '179075-204259',
    Locale: 'en',
    Translations: {
      en: {
        types: {
          item: {
            name: "Products",
            heroName: "Top product"
          },
          query: {
            name: "Searches"
          },
          category: {
            name: "Categories"
          }
        }
      }
    },
    Types: [
      {
        type: 'product',
        size: 7
      },
      {
        type: 'query'
      },
      {
        type: 'category'
      }
    ]
  }, '#q')
}
</script>

<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>

<style>
  body > .luigi-ac {
  .luigi-ac-hero-color {
    background: red !important;
  }
  .luigi-ac-others {
    background: #e3b6b6 !important;
  }
  .luigi-ac-header {
    color: red !important;
  }
  .luigi-ac-highlight {
    background-color: #ec8484 !important;
  }
  .luigi-ac-item:hover, .luigi-ac-item.active, .luigi-ac-other:hover, .luigi-ac-active {
    background: #ffeaea !important;
  }
}

</style>
Previous example
Basic example
Hero layout examples

Try it out →

Next example
Recommendations
Hero layout examples

Try it out →