Toggle Between a List and a Card Result Layout

This is for:

Developer System Administrator
Warning
Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

Now that you have learned how to add Result Templates to your search page, you’re ready to learn how to change the result layout itself (see JavaScript Search Framework result layouts).

While your results are currently presented as a list, you can decide to present them as cards instead, displaying results in a two dimensional grid.

Coveo Hive offers a default option to change between a card and a list layout directly on the property of the component, so that users can change it according to their preference.

  1. In the Sitecore Experience Editor, in the ribbon at the top of the page, click Add-a-new-component to reveal the places where you can insert new components.

  2. Underneath your current result list, select Add here.

  3. In the Select a Rendering window, select the Coveo Results List rendering.

  4. In the Select the Associated Content, select Create a New Content. You shouldn’t reuse the same Data Source as your previous result list.

  5. Save your page.

  6. Click the result list you just added, and click the Coveo icon to open the properties window.

  7. In the properties window, under Basic Settings > Results Layout, select Card, and select OK to save your properties.

  8. On your search page, select your Coveo Query Summary component, and click the parent component button to get to the results-header rendering.

  9. Select Add here.

  10. In the Select a Rendering window, select Results Header Section.

  11. Next to the Results Header Section, select Add here.

  12. In the Select a Rendering window, select Results Layout Section.

  13. In the result-layout rendering, select Add here.

  14. In the Select a Rendering window, select Coveo Result Layout.

  15. Save your page.

You should now be able to switch between a card and a list layout for your results.

37103835