# Product grid

> The section that makes every collection page: the banner with the collection's image and description, filters and sorting, a grid or list of products, pagination and an optional promo tile.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/product-grid/

## At a glance

- **In the editor:** Product grid
- **Where it goes:** Its own template – open that kind of page in the editor
- **In the presets:** Tally: Collection; Poster: Collection; Petal: Collection
- **Settings:** 40
- **App blocks:** Yes

Every collection uses the **collection** template, which holds this one section. Open any collection in the theme editor to change it. For a task-by-task guide, see [Collections and search](https://themelab.page/tally/docs/collections-and-search.md).

## Banner

- **Show collection banner:** the title with breadcrumbs, description and image above the products.
- **Show collection image:** the collection's image, or a dedicated banner photo from the collection metafield `custom.banner_image` (type *File*) – handy when the collection image is a square product shot.
- **Show subcollection links:** chips under the title, from a menu with the **same handle as the collection**. For the collection `kitchen`, create a menu with the handle `kitchen` in **Online Store › Navigation**.

## Products

- **Products per page:** 8–48.
- **Products per row on desktop** (2–5) and **on mobile** (1 or 2).
- **Let customers change products per row:** a 2/3/4 switch and a **list view** with a short description and the stock status. The choice is remembered. **Animate the change** lets products glide to their new places.
- **Default view:** *Grid* or *List* when a shopper first arrives.
- **Pagination:** *Page numbers*, a *Load more button* (default) or *Infinite scroll*, which loads the next products as the shopper nears the end of the grid. See [Pagination](https://themelab.page/tally/docs/collections-and-search.md#pagination).

## Filters and sorting

Filters come from Shopify's free **Search & Discovery** app: availability, price, product type, vendor, color, size, metafields and more. Install the app and choose them there.

- **Filter layout on desktop:** a *Bar above products* with pill buttons that open small popovers, a *Sidebar* or a *Drawer*. On phones, filters always open in a drawer.
- **Open first filters in the sidebar:** expands the first groups in the sidebar layout.
- **Enable sorting:** the *Sort by* menu.

Active filters show as chips that remove themselves with a click, and the products update without reloading the page.

## Promo tile

**Show promo tile in the grid** adds one tile at the chosen position (**Show after product**) on the first page – a seasonal offer, a gift guide, a lookbook.

- **Layout:** *Text below the image, like a product*, or *Text on the image*.
- Set the **Image**, **Heading**, **Text**, **Button label** and **Link**. Without an image, the tile shows its heading on its color scheme.
- **Promo color scheme**, **Promo text color** and **Promo image darkness** fine-tune the look.

All collections share the template, so the tile shows on every collection – except the one it links to. For different tiles on different collections, create a second collection template.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Product grid** (40 settings, in editor order)

*Banner*

| Setting | Options | Default |
| --- | --- | --- |
| **Show collection banner** | Checkbox | On |
| **Show breadcrumbs** | Checkbox | On |
| **Show description** | Checkbox | On |
| **Show collection image** – A collection metafield custom.banner_image (file) gives the banner a photo of its own. | Checkbox | On |
| **Show subcollection links** – Create a menu with the same handle as the collection, for example kitchen. | Checkbox | On |

*Products*

| Setting | Options | Default |
| --- | --- | --- |
| **Products per page** | 8–48 (step 4) | 24 |
| **Products per row on desktop** | 2–5 (step 1) | 4 |
| **Products per row on mobile** | 1 · 2 | 2 |
| **Let customers change products per row** | Checkbox | On |
| **Animate the change** – Products glide to their new place | Checkbox | On |
| **Default view** – List shows a row per product with a short description and stock status. Customers can switch views. | Grid · List | Grid |
| **Pagination** | Page numbers · Load more button · Infinite scroll | Load more button |

*Filters and sorting*

| Setting | Options | Default |
| --- | --- | --- |
| **Enable filtering** – Customize filters in the Search and Discovery app. | Checkbox | On |
| **Filter layout on desktop** | Bar above products · Sidebar · Drawer | Bar above products |
| **Open first filters in the sidebar** | Checkbox | On |
| **Enable sorting** | Checkbox | On |

*Promo tile*

| Setting | Options | Default |
| --- | --- | --- |
| **Show promo tile in the grid** | Checkbox | Off |
| **Show after product** | 1–12 (step 1) | 3 |
| **Layout** | Text below the image, like a product · Text on the image | Text below the image, like a product |
| **Image** – Without an image the tile shows its heading on the color scheme. | Image | – |
| **Heading** | Text | Sample text |
| **Text** | Text | Sample text |
| **Button label** | Text | Sample text |
| **Link** | Link | – |
| **Promo color scheme** | Color scheme | Scheme 5 |
| **Promo text color** – Leave empty to use the color scheme on the image and the page colors below it. | Color | – |
| **Promo image darkness** | 0–80% (step 5) | 0% |

*Colors*

| Setting | Options | Default |
| --- | --- | --- |
| **Color scheme** | Color scheme | Scheme 1 |

*Grid spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| **Space between columns** | 0–64px (step 2) | 20px |
| **Space between rows** | 0–96px (step 2) | 20px |
| **Space between columns on mobile** | 0–32px (step 1) | 8px |
| **Space between rows on mobile** | 0–64px (step 1) | 21px |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 40px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 24px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Collections and search](https://themelab.page/tally/docs/collections-and-search.md): The product grid with filters, sorting, a list view and a promo tile; the collections list; and the search results page with suggestions before a search.
- [Search results](https://themelab.page/tally/docs/sections/search-results.md): The search page with filters, sorting and result types – and popular searches, collections and products before a search.
- [Collections list](https://themelab.page/tally/docs/sections/collections-list.md): The page at /collections that lists every collection as tiles, cards or titles on images.