Options (size, color)

Render and sell a specific variant — size, color, and any other product option.

How options work

A product exposes attributes a person understands — Size, Color — each with a set of choices. You pass the shopper’s picks as readable opt.<attr> params, one per attribute (opt.size=l, opt.color=black). The server matches them to the right variant and resolves price and geometry — you never look up or hand-build an internal variant id. Pair these with asset.<key> to fill each placement.

Read the options

Build pickers from real catalog data — the attribute order, the labels, color swatches, and each priced combination. Whatever the shopper picks becomes an opt.<attr> value.

tsx

import { getProduct } from "@snowcone-app/sdk";

const product = await getProduct("tee-black");

product.options.attributesList;   // ["Size", "Color"]  — order to render pickers in
product.options.attributes.Color; // { choices: [{ label: "Black", hex: "#000" }, …] }
product.options.combinations;     // [{ Size: "L", Color: "Black", price: 2399 }, …]

choices carry a hex for color swatches and an imageUrl for variant thumbnails, so a selector renders straight from the record. combinations lists each valid pick set with its price.

Render and buy a variant

Add one opt.<attr> param per chosen attribute, matched against the catalog case-insensitively. The same params work on the mockup URL and carry through to checkout unchanged — no id to keep in sync.

<!-- One opt.<attr> param per attribute — the server resolves the variant. -->
<img src="https://img.snowcone.app/tee-black?asset=…&opt.size=l&opt.color=black&shop=YOUR_SHOP_ID" />

const params = new URLSearchParams({
  asset: "https://cdn.example.com/art.png",
  "opt.size": "l",
  "opt.color": "black",
  shop: "YOUR_SHOP_ID",
});
const src = `https://img.snowcone.app/tee-black?${params}`;

import { getMockupUrl } from "@snowcone-app/sdk";

const src = getMockupUrl("tee-black", {
  shop: "YOUR_SHOP_ID",
  options: { size: "l", color: "black" }, // omit to use the default variant
  design: { front: "https://cdn.example.com/art.png" },
});

html

<!-- The same opt.<attr> picks carry through to checkout — img → buy. -->
<a href="https://buy.snowcone.app/tee-black?asset=…&opt.size=l&opt.color=black&shop=YOUR_SHOP_ID">
  Buy now
</a>

Variant pricing lives in the catalog (combinations[].price), and the price a shopper pays is still resolved server-side from your Shop ID — see Pricing & margins.