---
title: ProductThumbnail
description: Use ProductThumbnail to display a product thumbnail
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/media/productthumbnail
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/media/productthumbnail.md
---

# Product​Thumbnail

Use ProductThumbnail to display a product thumbnail

## Properties

* alt

  string

  Default: \`''\`

  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 `s-image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `alt` 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://www.shopify.com/ca/blog/image-alt-text#4) to learn more.

* size

  'small' | 'base' | 'small-100'

  Default: 'base'

  Adjusts the size the product thumbnail image.

* sizes

  string

  A set of media conditions and their corresponding sizes.

* src

  string

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

  When the image is loading or no `src` is provided, a placeholder will be rendered.

* srcSet

  string

  A set of image sources and their width or pixel density descriptors.

  This overrides the `src` property.

* totalItems

  number

  Decorates the product thumbnail with the quantity of the product.

### Examples

* #### Code

  ##### Default

  ```html
  <s-product-thumbnail
    src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
    totalItems={1}
  ></s-product-thumbnail>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/product-thumbnail-default.png)