Shop
Product Listing Grid
Responsive grid of product tiles for category, search, and brand listing pages.
Overview
ProductListingGrid is the responsive grid of ProductTileBasics for category, search, and brand listing pages. It owns the responsive column counts so tiles stay aligned across breakpoints. Pair it with FilterBar above the grid and SortModes for sort controls.
Auto-import tag: <LProductListingGrid>.
Key Business & UX Benefits
- Responsive column logic keeps tiles aligned from phone to wide desktop, so the listing always feels intentional rather than reflowed.
- One grid powers category, search, and brand pages, removing the cost of running three near-identical listing templates.
- Pairs directly with filter and sort components, so the full listing chrome composes from a small set of well-defined building blocks.
Usage
ProductListingGrid Default
<ProductListingGrid :products="products" />
Feature List
- Responsive column logic scales from phone to wide desktop without per-page layout overrides
- Built on ProductTileBasic so every grid stays consistent with cross-sell and slider placements
- Drives category, search, and brand listing pages from one component, removing parallel templates
- Pairs directly with FilterBar above and SortModes alongside to assemble the full listing chrome
- Accepts the products array shape from any commerce backend, so onboarding catalogs needs no tile rewrite
API Reference
| Prop | Default | Type |
|---|---|---|
productsrequired | ProductTileBasicProps[] { productId, variantId, href, 24 more } | |
tiles | TileConfig<AllowedComponents>[] |
| Slot | Type |
|---|---|
default | any |
centered | any |
| Event | Type |
|---|---|
addToCart | (event: "addToCart", payload: AddToCartPayload): void |