Plan the native template and collection behavior together. Keep product identity stable, apply filtering and sorting to the eligible set, then show a valid page of that set with matching counts and labels.
Start with the native theme structure
Shopify's official collection-template documentation describes templates/collection.json and the collection object. With a JSON template, HTML and Liquid belong in a referenced section rather than as raw markup inside the JSON file. The documentation also describes storefront filtering, sort_by, available/selected/default sort options and pagination.
For this task, prepare a native collection JSON template plus its referenced Liquid-section implementation brief and test matrix. Confirm the actual theme section names, configured filters, template assignment, product URLs and media sources. A standalone HTML grid can review a design, but it cannot substitute for those native artifacts or prove their runtime behavior.
Five original product records
The fictional Desk Tools collection contains these five products. Names, categories and US-dollar prices are mock data, not a connected catalog or market prices.
| Product ID | Name | Category | Mock price |
|---|---|---|---|
| P01 | Notebook | Paper | $8 |
| P02 | Planpad | Paper | $6 |
| P03 | Pen | Accessories | $4 |
| P04 | Case | Accessories | $10 |
| P05 | Folder | Paper | $5 |
P01 remains one product even if it has multiple variants. Do not turn its variants into extra collection cards and claim a larger product count. Product cards and selected-variant behavior are different scopes.
Use a proposed page size of two products for this small test fixture. In the original listed order, page one has P01/P02, page two P03/P04 and page three P05: 2 + 2 + 1 = 5 products.
The ranges are 1–2 of 5, 3–4 of 5 and 5–5 of 5, respectively. Keep IDs and the total visible while comparing the companion’s three pages.
Filter the collection and reset the page
The original Paper fixture contains P01, P02 and P05: three products and two pages at size two. Before a price sort, the listed-order pages are P01/P02, then P05.
If the previous unfiltered view was on page three, reset the filtered view to its first valid page. Do not preserve a stale page-three selection and call the resulting blank grid “no products.” Update the filter label, matching count, current page and range together.
Use the actual theme's native filtering configuration for implementation. The mock category fixture defines an expected design test; it does not establish that Paper is already configured as a storefront filter or that an arbitrary local category field can drive a live collection.
Sort the whole filtered set before paging it
For Paper with ascending mock price, the full order is P05 at $5, P02 at $6, P01 at $8. The first page must therefore contain P05/P02, and the second P01.
Sorting only the old P01/P02 page would produce P02/P01 while leaving the least expensive matching product elsewhere. It would not answer the shopper's selected collection-wide order.
Read the real available sort choices from the native collection configuration and reflect the actual selected/default choice. Preserve compatible filter state when changing sort, and ensure the resulting page is valid. Do not attach a label to a local ordering rule that the live theme has not applied.
Handle zero matches without a false range
A separate original No Match test fixture has zero matching products. Show “No products match”, the selected filters and a clear way to change or clear them. Omit a product range or label it explicitly as zero results; do not display “Showing 1 to 0.”
An empty filtered set is different from a loading or retrieval failure. Keep those states distinct if the real implementation needs them. A mock review cannot establish stock availability, working product navigation or a successful request to Shopify.
Verify the native result
After implementation in the approved theme workflow, check the five-product pages, Paper filtering from page three, full-set price order and zero-match state. Verify actual collection objects, filter/sort URLs, product links, media references and template assignment. Include keyboard focus, control labels and narrow-screen readability.
Record observed results instead of inferring them from a screenshot. The useful artifact is the native collection behavior and its tested evidence, not only a styled mock grid.
Copy a native collection-template brief
Create one complete, self-contained US-English HTML companion for “Desk Tools collection review”. Return the full HTML document, with inline CSS and any JavaScript needed for the local interactions. Use the original scenario, named records, numbers and expected cases below.
Design the page for this task: use clearly labeled input or source records, a readable result or worked example, and an adjacent explanation of the evidence. Use a restrained visual hierarchy, left-aligned text, readable tables or stacked records, and a responsive layout at 720px and 360px. Provide meaningful labeled controls for All; Paper; Accessories; No Match fixture; Listed order; Price: low to high; Clear filters; Previous; Next; Select JSON text. Use keyboard-accessible native controls and visible focus. Keep the complete content readable without an external dependency.
The following brief supplies the substantive content and constraints. Native-format requests describe the material to represent or copy manually; this HTML must not pretend to create DOCX, XLSX, PDF, PPTX, H5P or another native file, run Python/Flask/Django/Snowflake/Power BI, connect a live service, send messages, or perform an authorized real-world action. Where the task requires a native source, actual observation or separate approval, retain that requirement and leave unsupplied evidence blank.
Prepare a Shopify collection-page implementation plan in US English.
Actual theme, collection template and referenced section names: [enter]
Native filter/sort configuration and available/default choices: [paste]
Product IDs, collection membership, URLs and media references: [paste]
Page size, original fixtures and required empty/error states: [enter]
Template-assignment and authorized theme-review workflow: [enter]
Keep collection JSON configuration separate from referenced-section HTML/Liquid. Use actual native collection data/configuration; mock review data must be labeled. Count product identities, not separate variant cards. Filter and sort the whole
eligible set before showing its page. Reset stale pages when filter/sort changes. Update count, range, current selection and page together. Zero matches gets an
explicit empty message, not "Showing 1 to 0" or an assumed network failure. Do not invent filter support, URLs, media, stock or verified runtime behavior.
Return the proposed native JSON/section design and manual test matrix: five
products at size 2 => page counts 2/2/1; Paper has 3 products => counts 2/1;
ascending Paper => P05/P02, then P01; old page 3 resets to 1; empty count is 0. Any HTML mock is separate review material. No deployment, cart/purchase actions, catalog import or saved edits. State tests
as planned until actually executed in the authorized theme workflow.
COMPLETE AUTHORED SCENARIO AND EXPECTED CASES
The following is the supplied reading/teaching/calculation record to represent in the companion. Preserve its particular content, examples, source references and unknowns. Wording about a future native implementation refers to that native task, not permission to omit this HTML companion.
# Shopify Collection Page Template: Keep Filtering, Sorting and Pagination in One Scope
The shopper is on page three, selects Paper, and sees an empty grid—even though three paper products exist. Or the price sort rearranges only the two visible cards. Both failures come from treating the current page as the whole collection.
Plan the native template and collection behavior together. Keep product identity stable, apply filtering and sorting to the eligible set, then show a valid page of that set with matching counts and labels.
## Start with the native theme structure
[Shopify's official collection-template documentation](https://shopify.dev/docs/storefronts/themes/architecture/templates/collection) describes `templates/collection.json` and the collection object. With a JSON template, HTML and Liquid belong in a referenced section rather than as raw markup inside the JSON file. The documentation also describes storefront filtering, `sort_by`, available/selected/default sort options and pagination.
For this task, prepare a **native collection JSON template plus its referenced Liquid-section implementation brief and test matrix**. Confirm the actual theme section names, configured filters, template assignment, product URLs and media sources. A standalone HTML grid can review a design, but it cannot substitute for those native artifacts or prove their runtime behavior.
## Five original product records
The fictional **Desk Tools** collection contains these five products. Names, categories and US-dollar prices are mock data, not a connected catalog or market prices.
| Product ID | Name | Category | Mock price |
| --- | --- | --- | --- |
| P01 | Notebook | Paper | $8 |
| P02 | Planpad | Paper | $6 |
| P03 | Pen | Accessories | $4 |
| P04 | Case | Accessories | $10 |
| P05 | Folder | Paper | $5 |
P01 remains one product even if it has multiple variants. Do not turn its variants into extra collection cards and claim a larger product count. Product cards and selected-variant behavior are different scopes.
Use a proposed page size of **two products** for this small test fixture. In the original listed order, page one has P01/P02, page two P03/P04 and page three P05: **2 + 2 + 1 = 5 products**.
The ranges are **1–2 of 5**, **3–4 of 5** and **5–5 of 5**, respectively. Keep IDs and the total visible while comparing the companion’s three pages.
## Filter the collection and reset the page
The original Paper fixture contains **P01, P02 and P05**: three products and two pages at size two. Before a price sort, the listed-order pages are P01/P02, then P05.
If the previous unfiltered view was on page three, reset the filtered view to its first valid page. Do not preserve a stale page-three selection and call the resulting blank grid “no products.” Update the filter label, matching count, current page and range together.
Use the actual theme's native filtering configuration for implementation. The mock category fixture defines an expected design test; it does not establish that Paper is already configured as a storefront filter or that an arbitrary local category field can drive a live collection.
## Sort the whole filtered set before paging it
For Paper with ascending mock price, the full order is **P05 at $5, P02 at $6, P01 at $8**. The first page must therefore contain **P05/P02**, and the second **P01**.
Sorting only the old P01/P02 page would produce P02/P01 while leaving the least expensive matching product elsewhere. It would not answer the shopper's selected collection-wide order.
Read the real available sort choices from the native collection configuration and reflect the actual selected/default choice. Preserve compatible filter state when changing sort, and ensure the resulting page is valid. Do not attach a label to a local ordering rule that the live theme has not applied.
## Handle zero matches without a false range
A separate original No Match test fixture has **zero matching products**. Show **“No products match”**, the selected filters and a clear way to change or clear them. Omit a product range or label it explicitly as zero results; do not display **“Showing 1 to 0.”**
An empty filtered set is different from a loading or retrieval failure. Keep those states distinct if the real implementation needs them. A mock review cannot establish stock availability, working product navigation or a successful request to Shopify.
## Verify the native result
After implementation in the approved theme workflow, check the five-product pages, Paper filtering from page three, full-set price order and zero-match state. Verify actual collection objects, filter/sort URLs, product links, media references and template assignment. Include keyboard focus, control labels and narrow-screen readability.
Record observed results instead of inferring them from a screenshot. The useful artifact is the native collection behavior and its tested evidence, not only a styled mock grid.
## Copy a native collection-template brief
Implement the local companion rather than returning a text-only plan. Preserve every numerical fixture and the distinction between illustrative expectations and actual evidence. Any native-runtime or classroom tests mentioned above remain tests to perform in the proper environment; do not mark them passed. Keep edits and practice responses in this open page only, without claiming persistent storage. Provide invalid/missing-input feedback and reset behavior that agree with this specific brief. Do not claim accessibility certification, learning gains, real approvals or test results that were not observed.
Keep the native JSON template, referenced Liquid section and observed test results in the actual theme workflow. Confirm the product destinations and configured collection behavior there before calling the page ready.
Review the mock collection
Use the HTML companion to inspect labels and proposed browsing states; it does not deploy the Shopify theme, connect the catalog or verify native product navigation.