os-single-product (Single Product Card)

What it is

os-single-product fetches one product by slug and renders a product card with pricing, add-to-cart, and optional subscribe action.

Tag name

os-single-product (Single Product Card)

Attributes / parameters

name	type	required	default	description
product-slug	string	Yes	None	Product slug used to fetch product card data.
product-full-url	string	No	None	Full URL used for product-page navigation (takes precedence over product-url-prefix).
product-url-prefix	string	No	None	URL prefix used to build product-page URLs with product-slug when product-full-url is not provided.
disable-product-page-link	boolean	No	false	Disables product-card link behavior to the product page when supported by the card UI.

Usage

HTML

index.html

<os-single-product
    product-slug="my-product-slug"
    product-url-prefix="/products"
></os-single-product>

Webflow

Embed block

<os-single-product
    product-slug="my-product-slug"
    product-url-prefix="/products"
></os-single-product>

React

FeaturedProduct.jsx

export function FeaturedProduct() {
    return (
        <os-single-product
            product-slug="my-product-slug"
            product-url-prefix="/products"
        ></os-single-product>
    );
}

Screenshot

Related components

Product List Render many of these cards together as a collection grid.

Product Details The full PDP customers see after clicking this card.