logo
Shopify Builds>Surfaces>Product listing page

Product listing page

A product listing page is the collection template Shopify renders for a group of products: the grid, the paginated product loop, and the filters and sort controls built on Shopify's storefront filtering. Every tile in that grid is one snippet rendered once per product, which is why a change to the card is a change to every listing surface at once.

How We've Used It

Two things dominate. The card, because it is the most reused piece of markup on a storefront — it renders on collections, search and home rails, and it has to carry badges, swatches, a quick-add path and its own structured data without forking per context. And the grid's update path: filters, sort and load-more each swap out part of the page, so the work is re-rendering a region through the Section Rendering API and then re-binding everything that lives inside it. Third-party controls that were initialized at first paint never saw the cards a later append added, so anything mounted in a card has to be re-invoked after each update. Merchandiser-placed promo tiles ride in the same loop, positioned by index and scoped by collection.

Builds Using It

56 further gated builds use it; their pages follow.

Related Entities

Builds

Accessible link-label helpers for repeated CTAs

Two Liquid snippets that resolve a real conflict between two link-naming rules — identical link text on different destinations versus an accessible name that must contain the visible label — by deriving a name from the link's href and emitting it only when it differs from what the shopper can see.

Nudestix

A collection template turned into a palette builder that carts one priced SKU

A pick-your-own palette promotion runs on a normal collection page wrapped in a `<bundle-element>` custom element, which holds a fixed tray of empty slots and posts one priced bundle product with the shopper's picks attached as line-item properties.

Nudestix

Hand-authored per-market JSON-LD for the Bundles & Kits collection

One Liquid snippet in the layout's head carries a complete schema.org graph for the Bundles & Kits collection — breadcrumb, collection page, a product list with offers, and the page's FAQ — written twice, once for the Canadian storefront and once for the US one.

Three Ships

Product-card hover video and a reusable deferred-media playback refactor

The shared product card's hover slot can hold a short clip instead of a second still: a per-product metafield decides which, the card emits a video that fetches nothing until asked, and a pointer-only, motion-aware binder plays it on hover of the whole card — plus a refactor of Dawn's deferred-media element that handles every player kind through one function.

LUS Brands

Collection grid card on a licensed theme: metafield merchandising, a badge precedence chain, a hover-swap swatch element and first-row loading hints

Palo Alto's grid item extended so the card's title, strapline, cutline and badge come from product metafields, badges resolve in one fixed order, color options become a swatch element that swaps the card image on hover, and column classes are computed from whatever section happens to be calling.

Three Ships

Collapsible desktop filter sidebar that reflows the product grid instead of squeezing it

Toggling the vertical filter rail switches the collection grid between four columns and three, keeps that choice for the browsing session, and re-applies it every time the facet pipeline replaces the grid wholesale.

LUS Brands

Main collection grid: merchandisable promo tiles, load-more and a filter blocklist

Dawn's collection grid extended in four directions: promo tiles a merchandiser places by grid position, a textarea that suppresses unwanted filter values, load-more over the Section Rendering API, and an infinite-scroll fallback.

Nudestix

Collection page: three filter modes, in-grid promo blocks and infinite scroll

The live collection body here is vendor code from a paid premium theme. This page documents what that code does, how it is configured across a large template set, and where our own contribution to it begins and ends.

Three Ships

Tabbed collection product slider and the shared merchandising card

One section renders every configured collection at once and switches between them with a class, so moving from Serums to Cleansers waits on nothing — and one card snippet backs the shelf, the blog and the rewards page.

Three Ships

Marketing image banner with mobile art, typography controls and highlight headings

A campaign banner built as a fork of Dawn's image banner: the vendor's class contract and overlay behaviour left intact, with a real mobile source, per-block type controls and an inline highlight convention layered on top.

LUS Brands

Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag

A two-column row — optional linked lifestyle image, Swiper rail — where every label, color, badge and product is a theme-editor setting, and each card can add to bag without leaving the page.

LUS Brands

Featured-collection product card with metafield hero/hover media and a tag-driven badge stack

The card that renders inside the homepage's main merchandising rail: hero and hover art chosen in the Shopify admin, a responsive image ladder built by hand, and a badge stack resolved from tags, price and block settings at render time.

LUS Brands

Font delivery and a template-conditioned image preload in a licensed theme's layout

Three Ships' `theme.liquid` decides its own font delivery on a licensed theme — the picked faces preloaded, an Adobe Fonts `@font-face` block inlined with its loader demoted behind it — and emits one image preload on exactly one template type, under an explicit condition.

Three Ships

GA4 ecommerce dataLayer instrumentation across a Rebuy cart

A client-side event layer that hangs off the network rather than off the DOM: a `fetch` wrapper that recognizes a cart add, a diff against the previous cart so the event reports what changed, and item taxonomy read from a block the product page already renders.

Three Ships

Size-pill variant picker and quick add-to-cart inside product grids

One click handler, registered once on `document` in the capture phase, turns any grid card with a size-pill row into a variant selector and an add to cart — including cards that did not exist when the page loaded.

Three Ships

House pagination component with result counter for blog and collection grids

A self-contained `de_pagination` snippet: pill page buttons, prev and next arrows that become non-focusable spans at the ends of the range, and a computed result-range line, rendered by the blog index and the collection grid from one file.

LUS Brands

Kids featured collection: a custom element that builds its Swiper on approach and wraps the theme's own product cards

A `<kids-featured-collection>` element leaves its slides as static markup until an IntersectionObserver fires, initializes Swiper then, and tears everything down when the section is removed — around Dawn's `card-product`, not a card of its own.

LUS Brands

Metafield-driven breadcrumbs across product, collection, page, blog and article

One breadcrumb snippet whose ancestor trail is authored per product and per collection through a `custom.breadcrumbs` collection-list metafield, with a three-level fallback for products and natural trails for pages, blogs and articles — rendered as a real navigation landmark from a single argument-free `{% render %}`.

LUS Brands

Per-collection hero banner driven entirely by collection metafields

One section instance in the collection template serves every collection: its heading, copy and two separately cropped artworks are bound to collection metafields through dynamic sources, and it renders two independent breakpoint layouts from them, so launching a collection is a merchandising task rather than a theme edit.

LUS Brands

Product-page FAQ accordion: page-backed answers, mobile 'View More' reveal, auto-emitted FAQPage

A local extension of Palo Alto's Tabs section that hides every FAQ row past the third on mobile behind one reveal button, and emits `FAQPage` JSON-LD from the vendor's own block loop, reading each answer from the same Shopify page or rich-text field the accordion displays.

Three Ships

Market-forked product JSON-LD authored in the product section, with a templated tier for the catalog

Two tiers of structured data at the foot of one Three Ships product section: complete, per-market `@graph` documents for the hero SKUs, branched on `request.host`, and a Liquid-templated Product and Offer block that reads variants, currency and barcode for the rest of the catalog.

Three Ships

Price snippet with a bundle 'value' metafield line and opt-out labelled price links

Dawn's price snippet on Nudestix, extended in two small ways: a product metafield adds a "worth" line beside a kit's price, and the price text becomes a labelled link to the product unless the caller says otherwise.

Nudestix

Product card with award badges, per-variant content payload and per-card structured data

One snippet renders the whole Nudestix grid card: tag and award badges, quick view, wishlist, comparison, an in-grid add to bag, and a per-variant data payload the shade switcher reads without a fetch.

Nudestix

Side-by-side product comparison drawer and modal table

A compare-products flow with no app behind it: card checkboxes write the selection to localStorage, a drawer pinned to the bottom of the viewport carries it from collection to product page and back, and the modal table fetches each product's long-form copy from that product's own page section at the moment the shopper asks to compare.

Nudestix

Filter-triggered promo cards inside the search results grid

A theme-editor block that puts a merchandiser-designed card into the search results grid at a chosen position, and shows it only while a named facet is active on that query.

Three Ships

Color-accurate shade swatches driven by a merchandiser-editable hex registry

Roughly 250 `Shade Name:#hex` pairs live in one theme setting. The product section resolves every option value against them in Liquid, groups the results by finish, and paints each swatch server-side.

Nudestix

Subscription bundle grid with tiered unlock progress

Two custom elements on the subscription landing page: a card whose two-step button reveals a frequency choice and then posts the variant with that `selling_plan` to the cart, and a wrapper that fetches the live cart after every add and drives a merchandiser-defined tier bar from what it finds there.

Three Ships

Variant-aware price snippet with percentage + value savings badge

Dawn's price snippet extended so a caller can hand it any variant object ahead of the snippet's own lookup, and so a savings badge — a percentage computed in Liquid plus a merchandiser-written value sentence — renders whenever the compare-at price is higher than the price.

LUS Brands

Shade-level collection grid hydrated from an external faceting service

A Shopify collection template that lists shades instead of products: the section renders an empty grid shell, then builds every card, facet and count in the browser from a bespoke faceting service outside the theme.

Nudestix

Vertical filter rail and an in-place mobile filter accordion replacing Dawn's drill-down drawer

Dawn's facets snippet was rebuilt into a sidebar rail with color swatches and show-more truncation, an accordion mobile drawer where every group opens in place, and a single sort control that physically relocates between breakpoints.

LUS Brands