§18 / SECTIONS
REF: TG–DOC–18 · REV. 1.7
Product grid
Product grid is the main section of the collection template. It shows the collection header, filters, sorting and the grid of product cards. It is available only on collection templates.
TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
How it works
- Filters come from the Shopify Search & Discovery app. On desktop, show them in a slide-out drawer (left or right), a sidebar or a horizontal bar. Phones always use the slide-out drawer.
- Applying filters. Filters can apply instantly or with an Apply button. The grid updates without a full page reload.
- Quick filter. Enter the name of a filter, for example Size or Color, to show its values as chips above the products.
- Category links. Choose a menu to show the sub-items of the menu item that links to this collection as quick links, as text chips or images.
- Collection tabs. Select collections to show as filter tabs above the grid, with an optional "All" tab.
- Pagination. Choose a Load more button, infinite scroll or page numbers.
- Editorial tiles. Add a large image tile inside the grid on the first page. Tile 1 comes from the section settings. Up to two more come from Promo tile blocks.
- Product cards use the global settings in Theme settings > Product cards and Theme settings > Swatches (see below).
Section settings
| Setting | Type | Default | Options / notes |
|---|---|---|---|
| Color scheme | color scheme | scheme-1 | |
| Header | |||
| Show collection title | checkbox | On | |
| Show breadcrumbs | checkbox | On | |
| Show collection description | checkbox | On | |
| Category links menu | menu | empty | Leave empty to hide. |
| Category links style | select | Text chips | Text chips, Images |
| Show collection image | checkbox | Off | |
| Image shape | select | Wide | Thin, Wide, Tall |
| Collection filter tabs | |||
| Enable collection tabs | checkbox | Off | |
| Select collections | collection list | empty | Collections shown as filter tabs. |
| Show 'All' tab | checkbox | On | |
| 'All' tab label | text | All | |
| Products | |||
| Products per page | range | 24 | 8–48, step 4 |
| Columns on desktop | range | 4 | 2–6 |
| Columns on mobile | select | 2 columns | 1 column, 2 columns |
| Filters on desktop | select | Slide-out drawer | Slide-out drawer, Slide-out drawer (right), Sidebar, Horizontal bar |
| Apply filters | select | Instantly | Instantly, With an Apply button |
| Filter groups | select | All open | All open, First open, All closed |
| Filter values | select | Checkboxes | Checkboxes, Buttons |
| Color filters | select | Swatch and name | Swatch and name, Swatch only, List. Applies to filters shown as swatches in Search & Discovery. |
| Price filter | select | Slider and fields | Fields, Slider, Slider and fields, Single slider (Under price) |
| Values shown before "Show more" | select | 8 | All, 5, 8, 12 |
| Search box in long filter lists | checkbox | On | Shows in filters with more than 10 values. |
| Show product counts | checkbox | On | |
| Quick filter | text | empty | Filter name, for example Size or Color. Leave empty to hide. |
| Enable sorting | checkbox | On | |
| Let shoppers change products per row | checkbox | On | |
| Pagination | select | Load more button | Load more button, Infinite scroll, Page numbers |
| Editorial tile | |||
| Heading | inline richtext | empty | Leave empty to hide the tile. |
| Text above heading | text | empty | |
| Image | image | empty | |
| Link | url | empty | |
| Position | range | 5 | 1–24 |
| Width in columns | range | 2 | 1–3 |
| Tile color scheme | color scheme | scheme-3 |
Blocks
| Block | Limit | Settings (default) |
|---|---|---|
| Promo tile | 2 | Heading (The edit); Text above heading (empty); Image; Link; Position: 1–24 (9); Width in columns: 1–4 (1); Tile color scheme (scheme-3) |
Tiles show only on the first page. They do not change the product count or filters.
Product card settings
These settings are in Theme settings > Product cards and Theme settings > Swatches. They apply to product cards across the theme.
| Setting | Default | Options / notes |
|---|---|---|
| Image ratio | Portrait (4:5) | Adapt to image, Square, Portrait (4:5), Tall (2:3) |
| Image fit | Fill | Fill, Fit |
| Show second image on hover | On | |
| Play product video on hover | Off | Uses the first video uploaded to the product. |
| Show color swatches | On | |
| Show vendor | Off | |
| Enable quick add | On | |
| Quick add style | Size buttons | Size buttons, Button. Size buttons appear on hover for products with a size option. Other products use the button. |
| Show sale badge | On | |
| Sale badge text | Sale | Sale, Percent off |
| Show sold out badge | On | |
| Show "New" badge | On | Shows on products tagged new. |
| Show badges from product tags | On | Tag a product badge:Limited to show a "Limited" badge. |
| Hover effect | Zoom | Zoom, Lift, None |
| Text alignment | Left | Left, Center |
| Space between image and text | 16 px | 8–32 px, step 2 |
| Show compare-at price | On | |
| Show "From" when variants have different prices | On | |
| Show star rating | Off | Uses the rating a reviews app stores on the product. |
| Swatch shape | Circle | Circle, Square |
| Swatches shown on cards | 5 | 2–10 |
For developers
Last updated for Tangent 1.7