We’re introducing a new 4 column grid layout on both Universal and Vertical Search. Today, you can specify to have a grid layout in both Universal or Vertical Search with both two and three columns. This new layout will allow for a fourth column. Just as with two and three column layouts, you can choose to have this four column grid on only Universal, only Vertical or on both!
To add this in Vertical Search:
In the [pageName].html.hbs file for any vertical that was created using the Vertical-Grid template, you should see a line like this:
<div class="Answers-container Answers-resultsWrapper Hitchhiker-3-columns">
If you update the “3” to “4” in that line, you can take advantage of four column grid layout!
To add this In Universal Search:
Update the Universal Section Template under verticalsToConfig to be grid-four-columns.
For a refresher on Universal Section template or vertical-grid layout, visit Core Frontend - Adding Pages & Cards | Hitchhikers.
Note that, right now, this layout is best optimized using Product Prominent Image Cards on Desktop.
This feature is available in Early Access. Here’s how to use the Early Access branches of the Theme and SDK!