# Parts: VariantOption to ProductScope (/themes/sdk/reference/product/parts-1)

```ts
import { … } from '@poltura/theme-sdk/product';
```

## `VariantOption` [#variantoption]

One option of the picker with its name, laying its values out as buttons, swatches, tiles or a dropdown.

```ts
VariantOption(props: VariantOptionProps): ReactElement
```

**Props:** [`VariantOptionProps`](/themes/sdk/reference/product/types-4#variantoptionprops)

**Example**

```tsx
import { VariantOption, VariantOptionValue } from '@poltura/theme-sdk/product';
import type { VariantPickerOption } from '@poltura/theme-sdk/product';

export function SizeOption({ option, pick }: { option: VariantPickerOption; pick: (id: string) => void }) {
  return (
    <VariantOption option={option} display='buttons'>
      {option.values.map((value) => (
        <VariantOptionValue key={value.id} value={value} onSelect={() => pick(value.id)} />
      ))}
    </VariantOption>
  );
}
```

## `VariantOptionValue` [#variantoptionvalue]

One value of an option: a button, a swatch, an image tile or a dropdown entry, following its option.

```ts
VariantOptionValue(props: VariantOptionValueProps): ReactElement
```

**Props:** [`VariantOptionValueProps`](/themes/sdk/reference/product/types-4#variantoptionvalueprops)

**Example**

```tsx
import { VariantOptionValue } from '@poltura/theme-sdk/product';
import type { VariantPickerValue } from '@poltura/theme-sdk/product';

export function Choice({ value, pick }: { value: VariantPickerValue; pick: () => void }) {
  return <VariantOptionValue value={value} onSelect={pick} />;
}
```

## `VariantSwatch` [#variantswatch]

The colour, split colour or image fill of an option value's swatch.

```ts
VariantSwatch(props: VariantSwatchProps): ReactElement
```

**Props:** [`VariantSwatchProps`](/themes/sdk/reference/product/types-4#variantswatchprops)

**Example**

```tsx
import { VariantSwatch } from '@poltura/theme-sdk/product';
import type { Swatch } from '@poltura/theme-sdk/product';

export function Dot({ swatch }: { swatch: Swatch }) {
  return <VariantSwatch swatch={swatch} className='size-4 rounded-full' />;
}
```

## `QuantityStepper` [#quantitystepper]

The quantity field with minus and plus, snapping typed amounts to the order limits and naming them.

```ts
QuantityStepper(props: QuantityStepperProps): ReactElement
```

**Props:** [`QuantityStepperProps`](/themes/sdk/reference/product/types-4#quantitystepperprops)

**Example**

```tsx
import { useState } from 'react';
import { QuantityStepper } from '@poltura/theme-sdk/product';

export function Quantity() {
  const [quantity, setQuantity] = useState(1);
  return <QuantityStepper value={quantity} step={6} onChange={setQuantity} />;
}
```

## `AddToCartButton` [#addtocartbutton]

The buy box's add to cart button with the error of the last attempt under it.

```ts
AddToCartButton(props: AddToCartButtonProps): ReactElement
```

**Props:** [`AddToCartButtonProps`](/themes/sdk/reference/product/types-4#addtocartbuttonprops)

**Example**

```tsx
import { AddToCartButton } from '@poltura/theme-sdk/product';

export function Buy({ add, adding }: { add: () => void; adding: boolean }) {
  return <AddToCartButton label='Add to cart' busy={adding} disabled={adding} onAdd={add} />;
}
```

## `WalletButtons` [#walletbuttons]

Apple Pay, Google Pay and the other express wallets of the product page, mounted in the browser.

```ts
WalletButtons(props: WalletButtonsProps): ReactElement | null
```

Payment is host-owned: the row is a host slot the store's payment apps fill, and it draws nothing off the product page.

**Props:** [`WalletButtonsProps`](/themes/sdk/reference/product/types-4#walletbuttonsprops)

**Example**

```tsx
import { WalletButtons } from '@poltura/theme-sdk/product';

export function ExpressPay() {
  return <WalletButtons className='mt-2' />;
}
```

## `WholesaleTiers` [#wholesaletiers]

A wholesale buyer's tier price, list price and quantity breaks, the chosen quantity's break highlighted.

```ts
WholesaleTiers(props: WholesaleTiersProps): ReactElement
```

**Props:** [`WholesaleTiersProps`](/themes/sdk/reference/product/types-4#wholesaletiersprops)

**Example**

```tsx
import { WholesaleTiers } from '@poltura/theme-sdk/product';
import type { WholesaleTiersView } from '@poltura/theme-sdk/product';

export function Tiers({ tiers, quantity }: { tiers: WholesaleTiersView; quantity: number }) {
  return <WholesaleTiers tiers={tiers} quantity={quantity} />;
}
```

## `AvailabilityBadge` [#availabilitybadge]

"Pre-order", "Coming soon" or "Sold out" for a pre-order state; nothing for plain stock states.

```ts
AvailabilityBadge(props: AvailabilityBadgeProps): ReactElement | null
```

**Props:** [`AvailabilityBadgeProps`](/themes/sdk/reference/product/types-4#availabilitybadgeprops)

**Example**

```tsx
import { AvailabilityBadge } from '@poltura/theme-sdk/product';
import type { Product } from '@poltura/theme-sdk/product';

export function TileBadge({ product }: { product: Product }) {
  return <AvailabilityBadge availability={product.availability} className='absolute left-2 top-2' />;
}
```

## `PersonalizationFields` [#personalizationfields]

The texts the shopper fills in to personalise the product page's item, such as an engraving.

```ts
PersonalizationFields(props: BuyFieldsProps): ReactElement | null
```

The values and their checks are host-owned and travel with the item to the cart; nothing draws off the product page.

**Props:** [`BuyFieldsProps`](/themes/sdk/reference/product/types-4#buyfieldsprops)

**Example**

```tsx
import { PersonalizationFields } from '@poltura/theme-sdk/product';

export function Engraving() {
  return <PersonalizationFields className='mb-4' />;
}
```

## `GiftCardFields` [#giftcardfields]

A gift card product's amount, recipient, message and send date.

```ts
GiftCardFields(props: BuyFieldsProps): ReactElement | null
```

The draft is host-owned and travels with the card to the cart; nothing draws for other products.

**Props:** [`BuyFieldsProps`](/themes/sdk/reference/product/types-4#buyfieldsprops)

**Example**

```tsx
import { GiftCardFields } from '@poltura/theme-sdk/product';

export function GiftCard() {
  return <GiftCardFields />;
}
```

## `ProductScope` [#productscope]

Makes a product the nearest one for everything inside, with its own variant choice and quantity.

```ts
ProductScope(props: ProductScopeProps): ReactElement
```

Pass a product the SDK handed out, such as from [`useNearestProduct`](/themes/sdk/reference/product/hooks-1#usenearestproduct); the scope reads its full record on the host.

**Props:** [`ProductScopeProps`](/themes/sdk/reference/product/types-5#productscopeprops)

**Example**

```tsx
import { ProductScope, useNearestProduct, type Product } from '@poltura/theme-sdk/product';

function Title() {
  return <h3>{useNearestProduct()?.title}</h3>;
}

export function Featured({ product }: { product: Product }) {
  return (
    <ProductScope product={product}>
      <Title />
    </ProductScope>
  );
}
```