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

Index: 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 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 or a Load more button.

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.

Related