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.
- 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.
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 handlekitchenin 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.
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 grid40 settings
| Setting | Options | Default |
|---|---|---|
| Banner | ||
| Show collection banner | Checkbox | On |
| Show breadcrumbs | Checkbox | On |
| Show description | Checkbox | On |
| Show collection imageA collection metafield custom.banner_image (file) gives the banner a photo of its own. | Checkbox | On |
| Show subcollection linksCreate a menu with the same handle as the collection, for example kitchen. | Checkbox | On |
| Products | ||
| Products per page | 8–48 | 24 |
| Products per row on desktop | 2–5 | 4 |
| Products per row on mobile | 1 · 2 | 2 |
| Let customers change products per row | Checkbox | On |
| Animate the changeProducts glide to their new place | Checkbox | On |
| Default viewList 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 | ||
| Enable filteringCustomize 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 | ||
| Show promo tile in the grid | Checkbox | Off |
| Show after product | 1–12 | 3 |
| Layout | Text below the image, like a product · Text on the image | Text below the image, like a product |
| ImageWithout 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 colorLeave empty to use the color scheme on the image and the page colors below it. | Color | – |
| Promo image darkness | 0–80% | 0% |
| Colors | ||
| Color scheme | Color scheme | Scheme 1 |
| Grid spacing | ||
| Use custom spacingOtherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| Space between columns | 0–64px | 20px |
| Space between rows | 0–96px | 20px |
| Space between columns on mobile | 0–32px | 8px |
| Space between rows on mobile | 0–64px | 21px |
| Section spacing | ||
| Top padding | 0–160px | 40px |
| Bottom padding | 0–160px | 80px |
| Top padding on mobile | 0–120px | 24px |
| Bottom padding on mobile | 0–120px | 56px |
| Advanced | ||
| Hide on mobileMobile 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 IDLink to this section with #anchor-id. | Text | – |
Related
Collections and searchThe 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 resultsThe search page with filters, sorting and result types – and popular searches, collections and products before a search.Collections listThe page at /collections that lists every collection as tiles, cards or titles on images.