Variants
Render and interact with product variant selectors — sizes, colors, and other options — using the Channel3 API.
Many products come in more than one configuration: a shirt in several colors and sizes, a shoe in multiple widths, a phone in different storage tiers. Channel3 models these as variants, exposed on the variants field of a Product.
The variant data model
Product.variants is either null (the product has no variations) or a Variants object:
Variants
VariantOption
OptionValue
AvailabilityStatus
Search vs. product detail
The same variants shape is returned by both endpoints, but available is only populated on product detail.
Search is optimized for breadth — it returns the full option matrix so you can render selectors immediately, but it does not compute per-value stock. When you display a product for purchase, refetch it with GET /v1/products/{id} to get live available values (this call is free).
Selecting a variant
To resolve a specific configuration, pass each chosen value to GET /v1/products/{id} as an option_<Name>=<Label> query parameter:
The response reflects your selection in two places:
productfields (title, price, image, offers) update to the matching variant.variants.selectedechoes the effective selection.
Relaxation
If the exact combination you requested doesn’t exist, the server relaxes your selection to the closest valid variant instead of returning nothing. Always read variants.selected after the call to detect what actually happened:
Navigating across products
Some option values point at a separate product rather than reconfiguring the current one. These values have a non-null product_id (and usually a thumbnail_url). When a shopper picks one, navigate to that product ID:
available vs. exists
exists and available describe two different things:
- Purchasable (
exists: true, in stock) — Full emphasis. The selected value gets a colored border. - Out of stock (
exists: true,availableisSoldOut/OutOfStock/Discontinued) — Dimmed. It’s a real variant you can’t buy right now. - Doesn’t exist (
exists: false) — Faintest. Selecting it would change another option. Show as a faint, disabled swatch.