# ProductThumbnail

Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products.

```tsx
import {
  reactExtension,
  ProductThumbnail,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ProductThumbnail
      source="/assets/api/checkout-extensions/checkout/components/product-thumbnail-example-code.png"
      badge={2}
    />
  );
}

```

```js
import {extension, ProductThumbnail} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const paymentIcon = root.createComponent(ProductThumbnail, {
    source:
      '/assets/api/checkout-extensions/checkout/components/product-thumbnail-example-code.png',
    badge: 2,
  });

  root.appendChild(paymentIcon);
});

```

## ProductThumbnailProps

### ProductThumbnailProps

### alt

value: `string`

An alternative text description that describe the image for the reader to
understand what it is about. It is extremely useful for both users using
assistive technology and sighted users. A well written description
provides people with visual impairments the ability to participate in
consuming non-text content. When a screen readers encounters an `Image`,
the description is read and announced aloud. If an image fails to load,
potentially due to a poor connection, the description is displayed on
screen instead. This has the benefit of letting a sighted buyer know an
image was meant to load here, but as an alternative, they’re still able to
consume the text content. Read
[considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
to learn more.

This property is an alias for `accessibilityLabel` for compatibility with the HTML
specification. When both are specified `accessibilityLabel` takes precedence.

### accessibilityLabel

value: `string`

An alternative text description that describe the image for the reader to
understand what it is about. It is extremely useful for both users using
assistive technology and sighted users. A well written description
provides people with visual impairments the ability to participate in
consuming non-text content. When a screen readers encounters an `Image`,
the description is read and announced aloud. If an image fails to load,
potentially due to a poor connection, the description is displayed on
screen instead. This has the benefit of letting a sighted buyer know an
image was meant to load here, but as an alternative, they’re still able to
consume the text content. Read
[considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
to learn more.

An `alt` property is available as an alias for this for compatibility with the HTML
specification. When both are specified, `accessibilityLabel` takes precedence.

### source

value: `MaybeConditionalStyle<string, ResolutionCondition>`

The image source (either a remote URL or a local file resource).

A `src` property is available as an alias for this for compatibility with the HTML
specification. When both are specified, `source` takes precedence.

### src

value: `MaybeConditionalStyle<string, ResolutionCondition>`

The image source (either a remote URL or a local file resource).

This property is available as an alias for `source` for compatibility with the HTML
specification. When both are specified, `source` takes precedence.

### badge

value: `number`

Decorates the product thumbnail with the quantity of the product.

### size

value: `Extract<Size, 'base' | 'small'>`

Adjusts the size the product thumbnail image.

### ConditionalStyle

### default

value: `T`

The default value applied when none of the conditional values
specified in `conditionals` are met.

### conditionals

value: `ConditionalValue<T, AcceptedConditions>[]`

An array of conditional values.

### ConditionalValue

### conditions

value: `AcceptedConditions`

The conditions that must be met for the value to be applied. At least one
condition must be specified.

### value

value: `T`

The value that will be applied if the conditions are met.

### ResolutionCondition

### resolution

value: `Resolution`