How to change the number of products per row Print

Modified on: Tue, Nov 9, 2021 at 9:25 AM


You can change the number of products per row in the Grid view of the Search Results Widget only using the Custom CSS feature. It is possible to set from 1 to 6 products per row.

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 Searchanise 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 all. You can check out how it looks in the storefront.

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;
}

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.