---
title: Product thumbnail
description: Use ProductThumbnail to display a product thumbnail
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/product-thumbnail
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/product-thumbnail.md
---

# Product thumbnail

Use ProductThumbnail to display a product thumbnail

### Support Targets (29)

### Supported targets

* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## Properties

* **alt**

  **string**

  **Default: ''**

  Alternative text that describes the image for accessibility.

  Provides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.

  When a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.

  Learn more about [writing effective alt text](https://www.shopify.com/ca/blog/image-alt-text#4) and the [alt attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt).

* **size**

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

  **Default: 'base'**

  The size of the product thumbnail image.

  * `'base'`: Default size that works well in most contexts.
  * `'small'`: Small thumbnail, good for secondary contexts or tight layouts.
  * `'small-100'`: Extra small thumbnail for compact displays or dense lists.

* **sizes**

  **string**

  A set of media conditions and their corresponding sizes. Learn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#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 is rendered. Learn more about the [src attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src).

* **srcSet**

  **string**

  A set of image sources and their width or pixel density descriptors. Learn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset). This overrides the `src` property.

* **totalItems**

  **number**

  The total number of items that the product thumbnail represents. When this value exceeds 1, the component displays a badge showing the count, useful for representing bundled products or quantities.

Examples

## Preview

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

### Examples

* #### Code

  ##### Default

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