> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/sply-shopify-theme/sply-starter/sections-and-features/product-collection.md).

# Product Collection

The homepage grid and the SPLY engine.

The Product Collection is the homepage grid and the heart of the SPLY engine. Products render as cutouts on the seed background in a dense grid; tapping the plus icon zooms in a level, and tapping a product opens it in a no-reload product view.

## How to access

**Product Collection** section (homepage and collection templates only)

## Settings

### Heading

Text field.

### Collection

Pick a collection to choose which products show and their order (set the order in the collection itself). On a collection page this is ignored and that page's collection is used. Leave blank to show all products.

### Products to show

Adjustable value.

### Category bar

#### Filter source

Choose: Off, Product type (auto), Tag (you choose), Collection links.

#### All button label

Text field.

#### Tags

Comma-separated, used when source is Tag. e.g. Tops, Bottoms, Outerwear

#### Collection menu

Used when source is Collection links.

## The category bar

An optional filter row above the grid. Set **Filter source** to drive it from product *type*, product *tags*, or a *collection-links* menu. Filtering re-shuffles the grid in place with no page reload.

> **Note** — **Products to show** defaults to 52 so the grid reads full. Lower it for a small catalogue, or raise it (up to 100) for a deep one.