Customizing style via CSS

This demo contains exactly the same configuration as the Basic example but has some CSS styles applied to make it fit well within the look and feel of this website.

<script>
function LBInitSearch() {
  Luigis.Search({
    TrackerId: '179075-204259',
    Locale: 'en',
    Theme: 'boo',
    Size: 20,
    Facets: ['brand', 'category', 'price_amount'],
    DefaultFilters: {
       type: 'product'
    },
    QuicksearchTypes: ['category', 'brand'],
    UrlParamName: {
      QUERY: 'q',
    }
  }, '#q', '#search-ui')
}
</script>

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

<style>
.lb-search .lb-search-text-color-primary-clickable {
  color: #682175;
}

.lb-search .lb-search-bg-color-primary, .lb-search .lb-search-bg-color-primary-clickable {
  background-color: #682175;
}

.lb-search .lb-result__price {
  color: #682175;
}
</style>

Previous example
Basic example
Search examples

Try it out →
Next example
Templating
Search examples

Try it out →