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 per row | How many products appear side by side on desktop: 2, 3, 4, or 5. Mobile always uses 2 columns. |
| Pagination | 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 facets | Comma-separated list of filter URL parameters to pin at the top of the filter sidebar. Others still appear below. |
| Sub-collection chips | JSON or metafield path for a chip row above the product grid linking to related collections. |
| Sold-out treatment | How sold-out cards render: hide them entirely, show a badge only, or dim and badge (default). |
| Enable list view toggle | Shows a toggle above the grid so visitors can switch between card grid and list view. |
| Image aspect ratio | Crop applied to product-card images: portrait, square, natural, or landscape. |
| Default sort | 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. |
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 8 values)
- Show more / show less disclosure for large value lists
- Product type, vendor, and tags for diverse catalogs
Mobile (< 750 px): A <dialog> bottom-sheet slides up from the bottom of the viewport. Visitors can drag it down to dismiss, or tap outside / press Escape.
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 Settings → Navigation → Collection and search filters in your Shopify admin.
Pagination modes
The Pagination setting has three options:
- Load More (default) — A button appears at the bottom of the grid. Clicking it appends the next page of products in place without navigating away. The button carries a
?page=2URL fallback so search engines can crawl all pages. - 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; 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; matches leading themes.
- 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 identifying which product/option needs a metafield
Featured facets
The Featured facets setting accepts a comma-separated list of filter URL parameters. These are pinned above all other filters in the sidebar. Filters not in the list still appear below — the featured list elevates, not hides, other filters.
Example:
filter.v.option.size,filter.v.option.color,filter.p.product_type,filter.v.pricePer-preset defaults (applied via the collection template):
- Uisce (Services):
filter.v.option.duration,filter.v.option.location,filter.p.tag - Gaoth (Pets):
filter.v.option.species,filter.v.option.life-stage,filter.v.option.flavor - Talamh (Garden):
filter.v.option.season,filter.v.option.zone,filter.v.option.plant-type - Tine (Hardware):
filter.v.option.size,filter.v.option.material,filter.v.option.power-source - Neart (Wellness):
filter.v.option.wellness-goal,filter.v.option.dietary-tag,filter.v.option.form
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").
Two input shapes:
Metafield path (recommended): Populate collection.metafields.uisce.sub_collection_chips via Admin → Custom data → Collections. Use a list.collection_reference type to link directly to collections, or a JSON list for custom labels.
Inline JSON override: Paste a JSON list directly into the section setting:
json
[
{ "label": "Heritage seeds", "url": "/collections/heritage" },
{ "label": "Spring bulbs", "url": "/collections/bulbs" },
{ "label": "Tools", "url": "/collections/tools" }
]Only same-origin URLs are accepted — chip URLs must start with /. External URLs are filtered out automatically.
OOS treatment
The Sold-out 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 and 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 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 preference persists in browser storage for the current session.
Per-preset defaults: on for Tine and Uisce; off for Gaoth, Talamh, and Neart.
Sort by
The Default sort 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 — manual (wellness stack curation).
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. If you populate the uisce.suggested_collections metafield (Admin → Custom data → Collections), up to 3 fallback collection cards appear to guide visitors.
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.
Back-nav state restore
When a visitor applies filters, loads more products, clicks a product, and then navigates back, the collection page restores to the exact pre-click state: filters, sort order, all loaded pages, and scroll position. The preference persists 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. A "+N" pill appears if more than 2 badges apply.
- 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 (zero-results fallback cards)
- Admin → Settings → Custom data → Collections → Add definition
- Namespace:
uisce, key:suggested_collections, type:list.collection_reference(max 3) - Edit each collection → Metafields → set up to 3 fallback collections
uisce.sub_collection_chips (chip row above the grid)
- Admin → Settings → Custom data → Collections → Add definition
- Namespace:
uisce, key:sub_collection_chips, type:list.collection_referenceorjson - Edit each collection → Metafields → set up to 5 linked collections
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
Uisce swatch fallback:warnings that identify products still needing metafields
Per-preset recommendations
| Preset | Niche | Recommended setup |
|---|---|---|
| Uisce | Services | Pagination: Load More. Featured facets: duration, location, tag. Image aspect ratio: portrait. Enable list view toggle. Populate uisce.sub_collection_chips with 3–5 service category links on the main "All services" collection. |
| Gaoth | Pets | Pagination: auto-load on scroll. Featured facets: species, life-stage, flavor. Image aspect ratio: natural. Populate sub-collection chips with species categories (Cat food, Dog food, Small animals). Populate shopify.color-swatches for colored pet accessories. |
| Talamh | Garden | Pagination: auto-load on scroll. Featured facets: season, zone, plant-type. Image aspect ratio: natural. Sub-collection chips with seasonal categories (Spring, Summer, Autumn). Default sort: manual. |
| Tine | Hardware | Pagination: Load More. Featured facets: size, material, power-source. Image aspect ratio: square. Enable list view toggle. Sub-collection chips with tool categories (Hand tools, Power tools, Safety). Default sort: best selling. Consider 5 columns if your catalog suits dense browsing at wide viewports. |
| Neart | Wellness | Pagination: auto-load on scroll. Featured facets: wellness-goal, dietary-tag, form. Image aspect ratio: square. Sub-collection chips with wellness goals (Sleep, Recovery, Immunity). Products per page: 16. Default sort: manual to prioritize curated stacks. |
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; products missing metafields show neutral gray + browser console warning
- [ ] Sub-collection chip row renders above the grid when 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 sold-out treatment
- [ ] Badge stack shows at most 2 badges + "+N" pill if more qualify
- [ ] 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