Collection page
- Collection banner: Show breadcrumb, Show collection description, Show collection image (shown at 4:3).
- Product grid: Products per page, Desktop columns, Mobile columns, Enable filtering, Desktop filter layout (Sidebar or Drawer), Enable sorting.
- Promo tile block: an editorial tile placed in the grid at Position in grid, with Size Single or Double width.
Collection images appear in two shapes: 4:3 in the collection banner, and the product card shape (portrait 3:4 by default) in the Collection list section. Keep the subject in the center of the image and set the focal point, so both crops work.
Filters
Filters are Shopify’s native storefront filters. Set them up in the free Search & Discovery app. Supported filter types:
- Lists: product type, vendor, tags, variant options, metafields.
- Swatches: for options such as Color, when the filter’s presentation is set to swatches.
- Price range, with minimum and maximum fields.
- Availability (in stock / out of stock).
Behavior:
- On desktop with Sidebar, filters sit beside the grid. With Drawer, and on phones, they open in a panel.
- Results update without reloading the page. Active filters appear as removable labels, with an option to clear all.
- Without JavaScript, an Apply button submits the filters.
- A filter only appears when products in that collection have values for it.
Search
- Search results: Results per page, Desktop columns, Enable filtering, Desktop filter layout.
- Predictive search suggests products, collections, pages and articles as visitors type, and offers search terms. Use the arrow keys to move through suggestions and Escape to close.