2 column layout
Use CSS to transform line layout into 2 columns, one showing products, the other one showing categories and brands.
<script>
function LBInitAutocomplete() {
AutoComplete({
Layout: 'line',
TrackerId: '179075-204259',
Locale: 'en',
Translations: {
en: {
types: {
item: {
name: "Products",
heroName: "Top product"
},
query: {
name: "Searches"
},
category: {
name: "Categories"
}
}
}
},
Types: [
{
type: 'product',
size: 4
},
{
type: 'query'
},
{
type: 'category',
size: 2
}
]
}, '#q')
}
</script>
<script src="https://cdn.luigisbox.com/autocomplete.js" async onload="LBInitAutocomplete()"></script>
<style>
.luigi-ac-main {
position: relative;
float: left;
width: 70%;
background: #f7f7f8 !important;
}
.luigi-ac-others {
position: relative;
float: right;
width: 30%;
margin-top: 0;
}
.luigi-ac-line .luigi-ac-footer {
position: relative;
margin-top: 452px;
}
</style>