# 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

### 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.

### 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.

### badge

value: `number`

Decorates the product thumbnail with the quantity of the product.

### size

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

  - Size: 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
Adjusts the size the product thumbnail image.

### source

value: `MaybeConditionalStyle<string, ResolutionCondition>`

  - MaybeConditionalStyle: T | ConditionalStyle<T, AcceptedConditions>
  - ConditionalStyle: export interface ConditionalStyle<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: ConditionalValue<T, AcceptedConditions>[];
}
  - ResolutionCondition: export interface ResolutionCondition {
  resolution: Resolution;
}
  - Resolution: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4
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>`

  - MaybeConditionalStyle: T | ConditionalStyle<T, AcceptedConditions>
  - ConditionalStyle: export interface ConditionalStyle<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: ConditionalValue<T, AcceptedConditions>[];
}
  - ResolutionCondition: export interface ResolutionCondition {
  resolution: Resolution;
}
  - Resolution: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4
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.

### ConditionalStyle

### conditionals

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

  - ConditionalValue: export interface ConditionalValue<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}
An array of conditional values.

### default

value: `T`

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

### 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`

  - Resolution: 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4