SpectreSkills
← All skills

shopify-collection-page

v1.0.0

Build a refined Shopify collection page — editorial banner, a calm responsive product grid, filtering and sorting from the Storefront Filtering API, and quiet pagination. Trigger when building the collection template or product listing pages.

Shopifyshopifycollectionplpfilteringtheme
Install
npx @spectre-apps/skills add shopify-collection-page

Writes .claude/skills/shopify-collection-page/SKILL.md. Add --user to install globally.

What it does

Shopify collection page

templates/collection.json renders a main-collection section. Keep it spacious and editorial — the grid is the page.

Banner

  • Optional full-width header: {{ collection.title }}, collection.description, and collection.image as a full-bleed backdrop. Centered, minimal.

Grid

  • {% paginate collection.products by section.settings.per_page %} then loop and render the shared {% render 'product-card' %}. 2 columns mobile, 3–4 desktop, large gutters, tall 4:5 imagery.
  • Empty state: a quiet message when collection.products.size == 0 (common once filters are applied).

Filtering & sorting

  • Use the storefront Filtering API: iterate collection.filters and render each filter.values as checkboxes/price range inside a <form> that GETs back to the collection URL. Preserve sort_by and active filters via value.url_to_add / url_to_remove.
  • Sort dropdown from collection.sort_options, defaulting to collection.sort_by.
  • Present filters in a slim off-canvas drawer or a restrained sidebar — not a heavy toolbar. Show active-filter pills with one-tap remove.

Pagination

  • Quiet numbered pagination or a 'Load more' that fetches the next paginate.next.url via fetch and appends — no full reload. Announce updates for a11y.

Match the home page's product-card exactly, and follow luxury-storefront-aesthetic for grid spacing and type.