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.
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
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, then a Load more button that adds the next 24 to the same folder — it doesn't open a second window.
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.
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. 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.
Last updated