> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/collection-page/product-grid.md).

# Product grid

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

In the below screenshot, the product grid section is shown on a store’s Collection page. Inside the section, the checkbox options are set to Enable filtering and Enable sorting.

With these options enable visitors can select a range of products within a collection by using filtering criteria like availability, size, and price.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Products per page</td><td>"Products per page" is to specify how many products to show in this page. You can show a minimum of “8” and a maximum of “24” products.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr><tr><td>Filtering and sorting</td><td><p><strong>Enable filtering</strong><br>By enabling this checkbox you can display the “Product filter”.<br></p><p><strong>Desktop filter layout</strong></p><p>Product filter layout customizations in a page are as follows:</p><ul><li>Horizontal</li><li>Vertical</li><li>Drawer</li></ul><p></p><p><strong>Enable sorting</strong><br>By enabling this checkbox you can display the “sorting select box”.</p><p></p><p><strong>Enable product-list description</strong></p><p>By enabling this checkbox you can display the “Product-list description”.</p><p></p><p><strong>Pagination type</strong>  </p><p>Customization of the "Pagination type" in collection banner section is as follows:</p><ul><li>Pagged navigation</li><li>Load more button</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Columns display limit</strong></p><p>"Columns display limit" is used for the customization of product columns in Mobile devices.</p><ul><li>1 Column</li><li>2 Columns</li></ul></td></tr></tbody></table>

<figure><img src="/files/j655g2OkNQWCzjLXJO3i" alt=""><figcaption></figcaption></figure>