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

# Product thumbnail

Use ProductThumbnail to display a product thumbnail

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

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

  **'base' | 'small' | '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

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