> 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/exp98-shopify-theme/exp98/sections-and-features/collection.md).

# Collection

Collections as folders — views, filters, sorting, and drag to cart.

A collection opens as a folder window: a toolbar with Back and Forward, an address bar reading `C:\YOUR_STORE\COLLECTION`, the products as files, and a status bar counting them. It's the **Collection** section on the collection template.

## Views

Shoppers switch between three views from the toolbar, and the one they pick is remembered for the next folder they open.

| View        |                                                                     |
| ----------- | ------------------------------------------------------------------- |
| **Icons**   | A grid of product images                                            |
| **List**    | Names in columns, no pictures — fastest for finding a name you know |
| **Details** | A table: name, price, type and date added                           |

| Setting          | Default       |                                                       |
| ---------------- | ------------- | ----------------------------------------------------- |
| **Default view** | Icons         | What a folder opens in until the shopper picks        |
| **Columns**      | Fit to window | 1 to 6 across, Icons view only. Phones always get two |

Folders show 24 products and load the next 24 by themselves as the shopper scrolls to the end — into the same folder, never a second window. A **Load more** button sits at the bottom for anyone who'd rather press it.

## The filter bar

Down the left of the folder: **Filter**, with group boxes of check boxes, a From/To for price, and **Arrange icons by** for sorting. Every change refilters the folder straight away; there's no Apply button to find.

* Each value shows how many products it would leave, and values that would leave none are greyed out rather than hidden, so the list doesn't jump about as the shopper narrows things down.
* Filters in use show as small tags above the products. Click a tag to remove it; **Clear all** removes the lot.
* The address bar follows, so a filtered folder can be bookmarked or sent to someone.
* On a phone, or a narrow window, the bar starts closed. The **Filter** button in the toolbar slides it over the products, and **Done** puts it away. The button shows how many filters are in use.

### Which filters appear

The theme draws whatever filters your store has. They're set in **Shopify's Search & Discovery app** → **Filters** — availability and price to begin with, then colour, size, product type, vendor, tags or any metafield you add. Colour filters with swatches set up in the app show the swatch beside each colour.

| Setting                                            | Default |                                               |
| -------------------------------------------------- | ------- | --------------------------------------------- |
| **Show the filter bar**                            | on      |                                               |
| **Show "Arrange icons by" (sorting)**              | on      |                                               |
| **Open the filter bar straight away on computers** | on      | Phones and narrow windows always start closed |

## Opening products

A product opens as a window on top of the folder — see [Product](/exp98-shopify-theme/exp98/sections-and-features/product.md). The address bar changes to the product's real address, so it can be shared and the back button works.

## Drag to cart

On a computer, a product can be dragged from any folder straight onto the cart icon. One variant: it goes straight in. More than one: a small dialog asks which, with sold-out ones greyed out. On a phone, tapping a product opens it as usual.

## Sold out

Sold-out products say **Sold out** where the price would be, and their pictures fade — see [Products](/exp98-shopify-theme/exp98/theme-settings/products.md).