We are excited to announce a new and easy way to modify the layout of each vertical’s results on universal search using “Universal Section Templates”.
Today, the out-of-the-box layout is to stack the cards vertically. Like this:
This is great for many verticals and experiences, but sometimes you want to really emphasize the photos more than the content, as-is the case with many product or menu item search experiences. If you have great imagery, you want to make that image super prominent and maybe de-emphasize some of the other content.
For vertical search, you can already select the vertical-grid page template to create a vertical search experience like this:
But, what if you want your Universal Results to look like this too? I imagine it would take an Admin a lot of Stackoverflow sleuthing to figure out how to make this work!
Fear not, help has arrived! You can now specify a universalSectionTemplate property in verticalsToConfig for each vertical to specify the layout of the cards on Universal Search! This is analogous to how you can modify the page layout by selecting a different page template for your vertical (e.g., vertical-standard or vertical-grid).
Just like cards, you can find the section template options in the theme under themes/answers-hitchhiker-theme/universalsectiontemplates. Your options include templates like:
-
standard(paired with thestandardcard variations, specifically themenuitem-standardcard here)
-
grid-three-columns(paired with theproduct-prominentimagecard)
-
grid-two-columns(paired with theproduct-prominentimagecard)
(All templates will stack to one card per row on mobile.)
Over time, we’ll add more built-in options to the theme. Have any requests or suggestions for any built-in options in the theme? Feel free to post in the community under Feature Requests or reply to this post!
When to use other layouts on Universal Search?
In many cases, you’ll want to stick with the standard stacked layout, like for location or FAQ verticals. It’s the standard layout for a reason! It’s aligned with how humans process information hierarchically, especially text-based content. However, for verticals like products, menu items, or services, you may want to try one of the additional options, especially if the image communicates most about the entity (assuming you have really good images) and don’t need to emphasize any longer form content.
The vertical-grid page layout and grid section template are both really paired well with the product-prominentimage card so we recommend using that card if you can, even if you don’t have an image. Keep in mind that the standard card variations provide opportunity to display more content due to the horizontal real estate of the card.
Here’s an example of using the product-prominentimage card without an image:
It still looks pretty good, but for most people it’s easier to read text-based content like this using the standard layout and standard card:
The choice is yours!
Do I have to use the same layout and card on Universal and Vertical Search?
Definitely not! If you want to use the grid layout on Universal Search and the standard stacked layout on Vertical Search (or vice versa), no problem! You’ll just want to make sure that you override the vertical in verticalsToConfig of the index.json page to vary the behavior between Universal/Vertical search.
For example, in the case of menus, let’s say you want to use the two-column grid layout for Universal Search with the product-prominentimage card and you want to use the standard vertical layout with the menuitem-standard card in Vertical Search. Here’s what your config/menuitems.json and config/index.json files would look like:
config/menuitems.json
"verticalsToConfig": {
"menuItems": { // The vertical key from your search configuration
"label": "Menu Items", // The name of the vertical in the section header and the navigation bar
"cardType": "menuitem-standard", // The name of the card to use - e.g. accordion, location, customcard
"icon": "star", // The icon to use on the card for this vertical
"universalSectionTemplate": "grid-two-columns"
}
}
config/index.json
"verticalsToConfig": {
"Universal": {
"isFirst": "true", // Indicates that this should always appear first in the navigation bar
"label": "All" // The name of the universal tab in the navigation bar
},
"menuItems": { // The vertical key from your search configuration
"label": "Menu Items", // The name of the vertical in the section header and the navigation bar
"cardType": "product-prominentimage", // The name of the card to use - e.g. accordion, location, customcard
"icon": "star", // The icon to use on the card for this vertical
"universalSectionTemplate": "grid-two-columns"
}
}
Questions or feedback? Reply to this post or add a new topic!
You can find learn more about Universal Section Templates in the newly updated Customizing Pages unit in the Core Frontend training.