--- title: ProductThumbnail description: >- Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/productthumbnail md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/productthumbnail.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # Product​Thumbnail Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * 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 ## ProductThumbnailProps * **accessibilityLabel** **string** **Default: \`''\`** The alternative text that describes the product thumbnail for assistive technologies. Screen readers announce this text when they encounter the image, and it displays as a fallback if the image fails to load. An `alt` property is available as an alias for compatibility with the HTML specification. When both are specified, `accessibilityLabel` takes precedence. Learn more about [writing effective alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204). * **alt** **string** The alternative text that describes the product thumbnail for assistive technologies. Screen readers announce this text when they encounter the image, and it displays as a fallback if the image fails to load. This property is an alias for `accessibilityLabel` for compatibility with the HTML specification. When both are specified, `accessibilityLabel` takes precedence. Learn more about [writing effective alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204). * **badge** **number** A number displayed as a badge on the product thumbnail, typically used to indicate the quantity of the product in a cart or order. * **size** **Extract\** **Default: 'base'** The size of the product thumbnail image. * `small`: A compact thumbnail for tighter layouts. * `base`: Renders the thumbnail at its standard size. * **source** **MaybeConditionalStyle\** 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** **MaybeConditionalStyle\** 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. ### Size A keyword that maps to a predefined size from the design system's size scale. Components use a subset of these values depending on which sizes they support. - \`extraSmall\`: The smallest available size. - \`small\`: A compact size, smaller than the default. - \`base\`: The default size, appropriate for most contexts. - \`large\`: A larger size for increased visual prominence. - \`extraLarge\`: The largest available keyword size. - \`fill\`: Stretches to fill the available space in the container. ```ts 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill' ``` ### MaybeConditionalStyle A type that represents a value that can be a conditional style. We highly recommend using the \`Style\` helper which simplifies the creation of conditional styles. ```ts T | ConditionalStyle ``` ### ConditionalStyle A conditional style definition that maps one or more conditions to different values. The \`default\` value is used as a fallback when none of the conditions in \`conditionals\` are satisfied. * conditionals An array of conditional values. ```ts ConditionalValue[] ``` * default The default value applied when none of the conditional values specified in \`conditionals\` are met. ```ts T ``` ### ConditionalValue A single conditional branch that pairs a set of conditions with the value to apply when those conditions are met. * conditions The conditions that must be met for the value to be applied. At least one condition must be specified. ```ts AcceptedConditions ``` * value The value that will be applied if the conditions are met. ```ts T ``` ### ResolutionCondition A condition that targets devices based on their pixel density. * resolution The minimum device pixel ratio the condition must match. ```ts Resolution ``` ### Resolution The device pixel ratio used to serve resolution-appropriate images. A value of \`1\` targets standard displays, while higher values such as \`2\` or \`3\` target high-density (Retina) displays. ```ts 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4 ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/productthumbnail-default-Cm6uQoyG.png) ### Examples * #### Basic ProductThumbnail ##### React ```tsx import { reactExtension, ProductThumbnail, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import {extension, ProductThumbnail} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const paymentIcon = root.createComponent(ProductThumbnail, { source: '/assets/api/checkout-extensions/checkout/components/product-thumbnail-example-code.png', badge: 2, }); root.appendChild(paymentIcon); }); ``` ## Best Practices **High-quality images and consistent aspect ratio** * Use optimized product images that ensure visual clarity and loading speed. Maintain a consistent aspect ratio for product thumbnails to avoid distortion or stretching of the images. **Consistent visual style and appropriate sizes** * Keep a consistent visual style for product thumbnails throughout your store. Use appropriate size for product thumbnails depending on the layout and use case. This consistency helps buyers recognize and associate the thumbnails with your product offerings. **Accessibility considerations** * Ensure product thumbnails are accessible with descriptive alternative text (alt text).