Grid and Mixed Layout

This demo shows some result groups as a grid and the rest as a list. Search for chocolate, then compare the Recipes tab (grid) with the Articles tab (list). View the ss360Config to check the configuration.

• type: 'grid' shows every result group as a grid, 'list' as a list (default).
• type: 'mixed' combines both: gridContentGroups lists the groups shown as a grid, and all other groups are shown as a list.
• Set layout.mobile and layout.desktop separately. Mobile is below 992px. gridColsXl sets the number of columns above 1200px (default: 4).

In Design & Publish: Settings → Layout → Desktop and Mobile → How to show results.

See Layout for all layout options and Result Groups for setting up groups.

window.ss360Config = {
   siteId: '83460', /* Replace with your site id */
   searchBox: {
      selector: '#searchBox' /* Replace with the css selector of your search box */
   },
   results: {
      embedConfig: {
         contentBlock: '.example__page-content-block' /* Replace with the css selector of the element the results go into */
      }
   },
   layout: {
      mobile: {
         type: 'mixed',
         gridContentGroups: ['Recipes', 'Grocery Products']
      },
      desktop: {
         type: 'mixed',
         gridContentGroups: ['Recipes', 'Grocery Products'],
         gridColsXl: 3
      }
   }
};

{"siteId":"83460","searchBox":{"selector":"#searchBox"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}},"layout":{"mobile":{"type":"mixed","gridContentGroups":["Recipes","Grocery Products"]},"desktop":{"type":"mixed","gridContentGroups":["Recipes","Grocery Products"],"gridColsXl":3}}}