This article is general for Shopify, BigCommerceWix, WooCommerce, Magento 1, and Magento 2.

Changing the number of products per row

By default, the number of products per row in the Grid view of the search results page is set automatically according to the width of the page. You can set the fixed number of products per row on desktop devices. 

If the up-to-date Big Pictures template is used for the Search Results Widget or you have a store on the Wix platform, it is possible to set the number of products per row via the Searchanise (Smart Search & Filter) control panel. To do so, follow these steps:

  1. Go to the Searchanise (Smart Search & Filter) control panel > Search results widget section > Content tab > Products part.
  2. Select the number of products from 1 to 6 in the Products per rows option.
  3. Apply the changes.

How to change the number of products per row

That’s it. The set number of products is now shown in the Grid view on the search results page on desktop devices.

In other cases, you can change the number of products per row only using the Custom CSS feature. 

The number of products depends on the width of the product block, which is set in the #snize-search-results-grid-mode li.snize-product CSS selector

To change the number of products per row, follow these steps:

  1. Go to the Searchanise (Smart Search & Filter) control panel > Search results widget section > Custom CSS tab.
  2. Enable the Use custom CSS option if it is disabled.
  3. Copy one of the CSS rules below and paste it into the field.
  4. Apply the changes.

That’s it. The set number of products is now shown in the Grid view on the search results page on desktop devices.

CSS rules

1 product per row

div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product {
    width: 100% !important;
    min-width: auto;
}

2 products per row

div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product {
    width: 48% !important;
    min-width: auto;
}

3 products per row

div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product {
     width: 31.33% !important;
     min-width: auto;
}

4 products per row

div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product {
    width: 23% !important;
    min-width: auto;
}

5 products per row

div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product {
    width: 18% !important;
    min-width: auto;
}

6 products per row

div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product {
    width: 14% !important;
    min-width: auto;
}
Enjoying your experience with Searchanise?

We’d appreciate it if you could take some time to leave a review. To do so, follow the link to your respective platform below: