> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/getting-started/collection-page.md). # The collection page Collections in Showcase aren't grids — they're story decks too. Open any collection and its products play as full-screen story panels, one per screen, with the same side rail, fade transition, and add-to-cart as the homepage. Your whole store feels like one continuous experience. ## What's different from the homepage * **Products come from the collection.** There are no Story blocks to manage — every product in the collection gets a screen automatically, in the collection's own sort order. * **One shared background.** Instead of a background per product, the collection page has a single background (video, image, or color) that stays fixed behind *every* product screen. Products fade over it; the background never reloads or restarts. * **Pagination.** Long collections are split into pages (3–16 products per page, default 8), with Previous/Next buttons after the last screen. ## Setting it up 1. Go to **Online Store → Themes → Customize**. 2. Use the page selector at the top of the editor and choose **Collections → Default collection** (pick any collection to preview with). 3. Click the **Collection page** section in the left sidebar. ### The settings * **Products per page** (3–16, default 8) — how many story screens before pagination kicks in. For fade mode, 6–10 feels right; a 16-screen fade deck is a long scroll. * **Product transition** — `Fade (no sliding)` or `Scroll`, exactly like the homepage. Fade needs 2+ products on the page. * **Show scroll hint on first screen** — the "Scroll" cue on the first product. * **Slideshow navigation** — `Arrows`, `Dots`, `Arrows and dots`, or `None (swipe only)` for the product image slideshows. * **Show product image slideshow** — untick to hide product photos entirely and let the shared background carry the screen. * **Auto-remove studio background** — one switch for the whole page; applies cutout to every product's photos (photos that don't qualify are skipped automatically). See [Auto-cutout](/sitesbyseth-docs/showcase/auto-cutout.md). * **Show description under the title** — prints each product's description (trimmed) under its name. * **Info style** — `Transparent` or `Glass panel` for the product info card. ### The shared background Under the **Background** heading (note the caption: *"Shared by every product screen on this page"*): * **Background video** — one video behind all products. Because it's rendered once for the whole page, it loads once and plays continuously while products crossfade over it. This is the most cinematic option. * **Background image** — used when no video is set. * **Background color** — used when neither is set (default `#F3F0EA`). * **Overlay darkness** (0–90%, default 35%) and **Text color** (`Auto` / `Light` / `Dark`) — same as the homepage. 💡 Because every product shares this background, pick something that works with your whole range — a texture, a location, a slow ambient loop — rather than something product-specific. ### Buy now, size finder, and accordions These also apply page-wide: * **Show Buy now button** — off by default on collections (it's on by default on the homepage and product page). * **Find my size** — one **fit profile** ("How do these pieces fit?") and **garment type** for all products on the page. If your collection mixes cuts (some oversized, some fitted), leave it `True to size` here and set precise per-piece profiles on the homepage story blocks and product page instead. Details: [Size finder](/sitesbyseth-docs/showcase/size-finder.md). * **Accordions** — a **description accordion** toggle plus a **shipping timeline** (title + rich text) shown on every product screen. ## The rail and the Home chip The side rail lists every product on the current page, auto-numbered, with thumbnails — same behavior as the homepage. A **Home** chip (jumps back to the top) appears only when another section sits above the collection section; in the default setup the deck is first, so there's no Home chip. ## Empty collections A collection with no products falls back to a simple "No products found" page with a Continue shopping button — no broken deck. Next: [the product page](/sitesbyseth-docs/showcase/getting-started/product-page.md). 👉 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/getting-started/collection-page.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.