os-product-list (Product List)
What it is
Section titled “What it is”os-product-list loads available collections and renders a filterable list of products using os-single-product cards.
Tag name
Section titled “Tag name”os-product-list (Product List)
Attributes / parameters
Section titled “Attributes / parameters”| name | type | required | default | description |
|---|---|---|---|---|
product-url-prefix | string | No | None | Prefix used to build product page URLs for child os-single-product cards (for example /products). |
<os-product-list product-url-prefix="/products"></os-product-list><os-product-list product-url-prefix="/products"></os-product-list>export function Shop() { return <os-product-list product-url-prefix="/products"></os-product-list>;}Screenshot
Section titled “Screenshot”
Styling (CSS variables)
Section titled “Styling (CSS variables)”The product list renders the collection filter chips plus a responsive product grid. The chips expose these variables, in addition to the global tokens inherited by every component. (The grid columns are responsive and not exposed as variables.)
| CSS variable | Default |
|---|---|
--os-chip-bg | #f1f5f9 |
--os-chip-color | var(--os-foreground) |
--os-chip-hover-bg | var(--os-border) |
--os-chip-active-bg | var(--os-primary) |
--os-chip-active-color | #fff |
--os-chip-padding | 6px 16px |
--os-chip-radius | 8px |
--os-chip-font-size | 16px |
--os-chip-font-weight | 500 |
--os-chip-line-height | 1.5 |
Related components
Section titled “Related components” Single Product Card The card rendered for each item in this list.
Product Details The destination page customers land on after clicking a card.