# Product grid Source: Product grid lists the products of a collection, with filters, sorting and pagination, and lets you place promotions between the products. It is used on the collection template, below the [Collection banner](https://docs.ictsviluppo.example/dossier/sections/main-collection-banner), so every collection page shows it with its own products. ## Set up filters Filters come from the Search & Discovery app in your Shopify admin, not from the theme: there you choose which filters exist (availability, price, size, color, product type, metafields and so on) and in what order. Turn on **Enable filtering** to show them in the grid. - Shopify doesn’t offer filters on collections with more than 5,000 products. - Each value shows how many products it has, and values with no products are disabled. - Chosen filters appear above the grid, each with a link to remove it, and a “Remove all” link clears them. - Filters and sorting also work when JavaScript is off: customers choose and press Apply. ## Choose where the filters go **Filter position on desktop** sets how filters appear on larger screens: - **Sidebar**: a column next to the products, with the first filters open. Best when you have more than five filters. - **Top bar**: a row of dropdowns above the products, which leaves the full width to the grid. - **Drawer**: a “Filter” button that opens a panel from the side. On phones, filters always open in a drawer. In a long list of values, such as many sizes or brands, a search field helps customers find the one they want: **Filter values before showing search** sets how many values a filter needs before it shows that field. ## Add a menu above the filters Choose a **Menu** to show links above the filters, for example to the other collections of the same department. It appears in the sidebar and in the filter drawer, but not with the top bar on desktop. Create the menu in **Online Store > Navigation**. ## Let customers sort products **Enable sorting** adds a sort menu with Shopify’s options, such as best selling, price and date. The order a collection opens with is the one you set on the collection in **Products > Collections**. ## Choose how customers move through pages **Products per page** sets how many products load at once. Under **Pagination**, **Type** sets how customers see more: - **Numbered pages**: links to each page at the bottom of the grid. - **Load more button**: a button that adds the next products below the ones already shown. - **Infinite scroll**: the next products load as customers reach the bottom. After three pages it switches to the load more button, so customers can still reach the footer. Whatever you choose, search engines and customers without JavaScript always get real links to each page. ## Adjust the product cards **Products per row on desktop** and **Products per row on mobile** set the grid. Under **Product card**, **Image ratio** crops every product photo to the same shape and **Show vendor** adds the brand above the name. Everything else on the card, such as the second image on hover, color swatches, sale and new badges, ratings and quick add, is set once for the whole store in [Theme settings](https://docs.ictsviluppo.example/dossier/theme-settings) > **Product cards**. ## Add promotions between products The grid comes with six **Promotion** blocks you can place between products: a size guide, a story, a campaign. You can’t add more or delete them; show or hide each one with the eye icon in the theme editor. The template ships with three shown and three hidden. - **Position** is the number of products shown before the promotion: 0 puts it first. - **Width** makes it as wide as one product or two. A two-column promotion that would fall in the last column moves to the next row; on phones with one product per row it stays one wide. - Add an **Image** for a photo behind the text. The text sits on a band in the block’s color scheme, so it stays readable on any photo. - With a **Link** and a **Link label**, the whole tile is clickable. Promotions appear on the first page only, and they don’t take the place of products: a page always has the number of products you set. Each promotion can also be scheduled to appear only between two dates: turn on **Schedule visibility** in the block. See [Scheduling](https://docs.ictsviluppo.example/dossier/scheduling). ## What customers see in an empty collection A collection with no products shows a message and a “Continue shopping” link to all products. When the chosen filters match nothing, customers see a message and a link to remove all filters. ## Settings | Setting | Type | Default | Options | | - | - | - | - | | **Products per page** | Slider | 24 | 4–48, step 4 | | **Products per row on desktop** | Slider | 4 | 2–5, step 1 | | **Products per row on mobile** | Drop-down | 2 columns | 1 column, 2 columns | | **Use full page width** | Checkbox | On | — | | **Color scheme** | Color scheme | scheme-1 | — | | **Pagination** | | | | | **Type** — Infinite scroll switches to a load more button after three pages, so customers can still reach the footer. | Drop-down | Numbered pages | Numbered pages, Load more button, Infinite scroll | | **Filtering and sorting** | | | | | **Menu** — Shows above the filters in the sidebar and in the filter drawer. Not shown with the top bar on desktop. | Menu | — | — | | **Enable filtering** — Set up filters in the [Search & Discovery app](https://apps.shopify.com/search-and-discovery). Filters don't appear on collections with more than 5,000 products. | Checkbox | On | — | | **Filter position on desktop** — On mobile, filters always open in a drawer. Use a sidebar for stores with more than five filters. Shown when *Enable filtering* is on | Drop-down | Sidebar | Sidebar, Top bar, Drawer | | **Filter values before showing search** — Filters with more values than this show a search field. Helps customers find a size or a brand in long lists. Shown when *Enable filtering* is on | Slider | 10 | 4–30, step 1 | | **Enable sorting** | Checkbox | On | — | | **Product card** | | | | | **Image ratio** | Drop-down | Portrait | Portrait, Tall, Square | | **Show vendor** | Checkbox | Off | — |