os-product-details (Product Details)
What it is
Section titled “What it is”os-product-details fetches one product by slug and renders a full PDP-style experience, including media gallery, attribute selectors, purchase options, and add-to-cart.
Tag name
Section titled “Tag name”os-product-details (Product Details)
Attributes / parameters
Section titled “Attributes / parameters”| name | type | required | default | description |
|---|---|---|---|---|
product-slug | string | Yes | None | Product slug used to fetch and render product details. |
<os-product-details product-slug="my-product-slug"></os-product-details><os-product-details product-slug="my-product-slug"></os-product-details>export function ProductPage({ slug }) { return <os-product-details product-slug={slug}></os-product-details>;}Screenshot
Section titled “Screenshot”
Styling (CSS variables)
Section titled “Styling (CSS variables)”Product details is themed primarily through the global tokens (--os-foreground, --os-muted-foreground, --os-primary, --os-primary-foreground, --os-border) inherited by every component.
Its variant dropdown selector additionally exposes these:
| CSS variable | Default |
|---|---|
--os-select-background-color | #ffffff |
--os-select-border-color | var(--os-border) |
--os-select-hover-background-color | #f0f0f0 |
--os-select-checked-background-color | #f0f0f0 |
--os-select-checkmark-color | #025712 |
--os-select-font-size | 16px |
Related components
Section titled “Related components” Single Product Card A compact preview card that links into this detail page.
Product List The collection grid customers browse before landing here.