Appearance
Collection Pages
Collection pages show a grid of products from one of your collections. You set them up in the theme editor by opening any collection page.
What it looks like
Here's the collection grid alongside its settings. The left panel shows what you'll see in Customize, and the right shows how the grid appears on your storefront.
Collection page preview
Settings
These settings live in the Collection section in the theme editor.
| Setting | What it does |
|---|---|
| Color scheme | Which of your four colour schemes the collection page uses. |
| Products per page | How many products appear before pagination or the Load More button. |
| Columns on desktop | How many products appear side by side on desktop: 2, 3, 4, or 5. |
| Columns on mobile | 1 or 2 columns on small screens (default 2). Every preset ships with 1 for larger, more browsable cards. |
| Pagination mode | How additional products load: Load more (button) (default), auto-load on scroll, or numbered pages. |
| Color swatch style | How color swatches appear in the filter sidebar: circles (default) or inline chips. |
| Featured facet ordering | Comma-separated fallback list of filters to pin at the top of the filter sidebar. Featured filter blocks take priority when any are present. Others still appear below. |
| Icon | Icon shown on each product card's metadata capsule (for example a clock for turnaround time). |
| Metadata capsule label | Short prefix before each product's capsule value (for example "Turnaround"). The value comes from each product's metafield; the capsule hides when a product has none. |
| Out-of-stock card treatment | How sold-out cards render: hide them entirely, show a badge only, or dim and badge (default). |
| Enable grid/list view toggle | Shows a toggle above the grid so visitors can switch between card grid and list view. |
| Card image aspect ratio | Crop applied to product-card images: natural (default), square, portrait, or landscape. |
| Default sort order | The sort order shown when a visitor first opens the collection. Visitors can change it themselves. |
| Enable sorting | Shows a sort selector above the grid. |
| Enable filtering | Shows the filter sidebar (desktop) or bottom-sheet (mobile). |
| Enable quick buy | Shows an Add to cart button on each product card. |
| Enable quick view | Shows a quick-view button that opens a product drawer without navigating away. |
The section also accepts three block types: Featured filter (pins one filter to the top of the sidebar — repeat the block to build the order), Sub-collection chip (one chip in the row above the grid, with a label and an internal URL), and Custom Liquid.
Filtering
Filters let your visitors narrow down products. When filtering is enabled:
Desktop (≥ 1024 px): A filter sidebar appears on the left with:
- Availability, price range, color, size, and other options based on your product variants
- Search-within input for long facet lists (more than 15 values)
- Show more / show less disclosure once a filter has more than 10 values
- Product type, vendor, and tags for diverse catalogs
Mobile and tablet (below 1024 px): The sidebar collapses behind a Filter button, and a bottom sheet slides up from the bottom of the viewport. Visitors close it with the close button, by dragging it down, or by pressing Escape. Tapping the backdrop leaves the sheet open.
Active filters: Selected filters show as scrollable chips above the grid, with a clear-all button at the end. Filters apply automatically after a short delay — no Apply button needed.
To manage which filters appear, go to Online Store → Navigation → Collection and search filters in your Shopify admin.
Pagination modes
The Pagination mode setting has three options:
- Load more (button) (default) — A button appears at the bottom of the grid. Clicking it appends the next page of products in place without navigating away. The next page's address is held on the button as a data attribute rather than a link, so crawlability comes from the
rel=nextlink tag the theme emits in the page head. - Auto-load on scroll — The next page loads automatically when visitors scroll past 80% of the current grid. Best for catalog-browsing where you want zero friction.
- Numbered pages — Classic page 1 / 2 / 3 / Next footer. Each page is a distinct URL (
?page=N). Best when SEO page mapping matters — each numbered page emitsrel=prev/rel=nextlink tags and a self-canonical URL.
Per-preset defaults: Uisce and Tine use Load more (button); Gaoth, Talamh, and Neart use auto-load on scroll.
Color swatch style
When your store uses color options, the filter sidebar shows color swatches in one of two styles:
- Circles (default) — Color dots in a row above the checkbox label. High visual density.
- Inline — Color swatches sit beside the label as small chips. More readable when scanning a long filter list.
Swatch colors resolve in this order:
- Product metafield —
product.metafields.shopify.color-swatches(recommended — set this in Admin → Settings → Custom data → Products) - CSS allowlist — Common color names (Red, Blue, Green, Black, White, and others)
- Neutral gray fallback — Shown with a browser console warning,
[c]swatch-fallbackfollowed by the filter value's label, so you can see which values still need a hex
Featured filters
Featured filters are pinned above all other filters in the sidebar. Filters you do not pin still appear below — pinning elevates, it does not hide.
Add one Featured filter block per filter, in the order you want them to appear. Each block takes a single value: the filter's URL parameter (for example filter.v.option.color) or its handleized label (for example service-type for a filter labelled "Service type"). Values that match no filter on the collection are ignored.
The Featured facet ordering setting takes the same values as a comma-separated list and acts as a fallback — it applies only when no Featured filter blocks are present.
Per-preset defaults (Featured filter blocks on each preset's collection template):
- Uisce (Services):
service-type,duration,availability - Gaoth (Pets):
life-stage,pet-type,brand - Talamh (Garden):
plant-type,sunlight,water-frequency - Tine (Hardware):
power-source,voltage,brand - Neart (Wellness):
wellness-goal,format,dietary
Sub-collection chips
A horizontal chip row above the product grid, linking to related collections. Useful for drilling down within a parent collection ("Hand tools" → "Screwdrivers", "Hammers", "Wrenches").
Chips come from three possible sources, checked in this order — the first one with content wins:
1. Sub-collection chip blocks (recommended). Add one block per chip in the theme editor and fill in its Label and Link. This is the only path you can manage entirely from Customize, and it is what all five presets ship with.
2. Metaobject list metafield. Point collection.metafields.uisce.sub_collection_chips at a metaobject list, where each entry carries a label and a linked collection. Set this up in Admin → Settings → Custom data → Collections.
3. JSON metafield. The same metafield key with a json type, holding a list of label/url pairs:
json
[
{ "label": "Heritage seeds", "url": "/collections/heritage" },
{ "label": "Spring bulbs", "url": "/collections/bulbs" },
{ "label": "Tools", "url": "/collections/tools" }
]A list.collection_reference metafield on that key renders nothing — use one of the three sources above.
Only same-origin URLs are accepted — chip URLs must start with /. External and protocol-relative URLs are skipped.
Out-of-stock treatment
The Out-of-stock card treatment setting controls how sold-out products appear in the grid:
| Option | Behavior | Best for |
|---|---|---|
| Hide | Sold-out products do not appear in the grid | Limited drops, services that do not restock |
| Badge only | Full-color card with a "Sold out" badge | Merchants who want visitors to reach the back-in-stock signup form |
| Dim + badge (default) | Card at reduced opacity + "Sold out" badge, still clickable | Balanced default — available products dominate, sold-out ones are reachable |
View toggle
When Enable grid/list view toggle is on, two buttons appear above the grid: Grid and List. List view uses a single-column row layout that shows longer product descriptions — useful for comparing hardware specifications or service details. The visitor's choice is saved per collection in browser storage and stays in place on later visits until they pick the other view or clear their browser data.
Per-preset defaults: on for Tine and Uisce; off for Gaoth, Talamh, and Neart.
Sort by
The Default sort order setting sets the initial sort order visible when a visitor first opens the collection. Visitors can change it themselves using the sort selector above the grid (if enabled). The selected default appears in the sort selector on first paint even when no ?sort_by= parameter is in the URL.
Per-preset defaults: Uisce — manual (hand-curated services); Gaoth — best-selling (pet food restock signal); Talamh — manual (seasonal merchandising); Tine — best-selling (hardware demand signal); Neart — best-selling (wellness bestsellers lead).
Empty states
The theme shows different content depending on why the grid is empty:
Truly empty collection (no products at all): A heading and body text with no clear-filters CTA.
Filtered to zero: A distinct heading and body text with a clear-all-filters CTA. Clicking it removes all active filters and restores the full grid. If you populate the uisce.suggested_collections metafield (Admin → Settings → Custom data → Collections), up to 3 suggested collections also appear here as text links.
Back-nav state restore
When a visitor applies filters, sorts, scrolls, clicks a product, and then navigates back, the collection page restores their filters, sort order, and scroll position. The grid comes back as page 1 — extra pages loaded through Load more or auto-load are not re-fetched. The saved state lives in browser storage for 30 minutes.
Product card features
- Badge stack — Up to 2 badges per card, in priority order: sold out, preorder, sale, low stock, new. When more badges qualify than fit, an overflow pill shows the extra count.
- Hover lift — Cards animate upward on hover (respects
prefers-reduced-motion). - Swatch hover-preview — Hovering a color swatch updates the card image to show that variant.
- Eager loading — The first 4 product images load immediately for fast above-the-fold rendering; images 5 and beyond load lazily.
SEO
- Self-canonical — Every paginated collection page emits a
<link rel="canonical">with its own?page=NURL preserved. - rel=prev / rel=next — Paginated pages emit
<link rel="prev">and<link rel="next">for search engine pagination understanding. - CollectionPage JSON-LD — Every collection page emits
CollectionPage+ItemListstructured data with the product list for the current page.
Per-preset metafield setup
uisce.suggested_collections (suggested links in the filtered-to-zero empty state)
- Admin → Settings → Custom data → Collections → Add definition
- Namespace:
uisce, key:suggested_collections, type: metaobject list orjson - Edit each collection → Metafields → add the collections to suggest. The first 3 render.
uisce.sub_collection_chips (chip row above the grid — only needed if you are not using Sub-collection chip blocks)
- Admin → Settings → Custom data → Collections → Add definition
- Namespace:
uisce, key:sub_collection_chips, type: metaobject list orjson - Edit each collection → Metafields → add one entry per chip, each with a label and an internal link
shopify.color-swatches (color filter hex values)
- Admin → Settings → Custom data → Products → Add definition (Shopify provides this as a standard definition)
- Edit each product variant with a color option → set the hex value via Shopify's color picker
- Check the browser console for
[c]swatch-fallbackwarnings — each one names the filter value still falling back to neutral gray
Per-preset recommendations
| Preset | Niche | Recommended setup |
|---|---|---|
| Uisce | Services | Pagination: Load more (button). Featured filters: service-type, duration, availability. Image aspect ratio: landscape. Grid/list view toggle on. Default sort: manual. 3 columns on desktop, 1 on mobile. Sub-collection chips for your service categories (Kitchens, Bathrooms, Styling). |
| Gaoth | Pets | Pagination: auto-load on scroll. Featured filters: life-stage, pet-type, brand. Image aspect ratio: natural. Default sort: best-selling. 3 columns on desktop, 1 on mobile. Sub-collection chips for life stages and categories (Puppy, Senior, Toys, Grooming). Populate shopify.color-swatches for colored pet accessories. |
| Talamh | Garden | Pagination: auto-load on scroll. Featured filters: plant-type, sunlight, water-frequency. Image aspect ratio: natural. Default sort: manual. 3 columns on desktop, 1 on mobile. Sub-collection chips for seasons (Spring, Summer, Autumn, Winter). |
| Tine | Hardware | Pagination: Load more (button). Featured filters: power-source, voltage, brand. Image aspect ratio: square. Grid/list view toggle on. Default sort: best-selling. 4 columns on desktop, 1 on mobile. Sub-collection chips for tool categories (Power tools, Hand tools, Fasteners, Safety). |
| Neart | Wellness | Pagination: auto-load on scroll. Featured filters: wellness-goal, format, dietary. Image aspect ratio: portrait. Default sort: best-selling. 3 columns on desktop, 1 on mobile. Products per page: 16. Sub-collection chips for wellness goals (Sleep, Focus, Calm, Immunity). |
Before you go live
- [ ] Filter sidebar opens on desktop; bottom-sheet opens on mobile
- [ ] Filter checkbox toggle updates the grid after a brief delay (not immediate, not more than a second)
- [ ] Bottom-sheet drag-to-dismiss closes the dialog on swipe-down
- [ ] Active-filter chip row scrolls horizontally; chips have a clear button; clear-all appears at the end
- [ ] Color swatches render in the configured style (circles or inline)
- [ ] Color metafield hex values appear correctly; filter values missing a hex show neutral gray + a
[c]swatch-fallbackconsole warning - [ ] Sub-collection chip row renders above the grid when chip blocks are configured (or the metafield is populated)
- [ ] Filtered-to-zero shows a distinct heading with a clear-all CTA; truly-empty shows no CTA
- [ ] Pagination renders in the configured mode
- [ ] Self-canonical link tag emits with
?page=Npreserved - [ ]
rel=prev/rel=nextlink tags emit on paginated pages - [ ] CollectionPage JSON-LD emits on every collection page
- [ ] Product cards 1–4 load eagerly; cards 5+ load lazily
- [ ] Sold-out cards render per the configured out-of-stock card treatment
- [ ] Badge stack shows at most 2 badges, with an overflow pill when more qualify
- [ ] Grid/list view toggle is visible on Tine and Uisce only; toggling persists across page reload
- [ ] Navigating back from a product page restores filters, sort, and scroll position
- [ ] No accessibility violations (run Lighthouse → Accessibility in DevTools)
- [ ] Lighthouse Performance ≥ 0.6 desktop
- [ ] Lighthouse SEO = 1.00 desktop
Related guides
- Collection page support — diagnostics and troubleshooting
- Product pages — the product detail page
- Translations
- Theme settings
- Color schemes