How to change the number of products per row

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 control panel. To do so, follow these steps:

1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Content tab > Search results page part.
2. Select the number of products from 1 to 6 in the Products per row option.
3. 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.

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 Search & Filters control panel > Search & Navigation > 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;
}