Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

ProductThumbnail

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 (50)

Supported targets

Anchor to ExamplesExamples

Anchor to Basic ProductThumbnailBasic ProductThumbnail

Basic ProductThumbnail

Example

Basic ProductThumbnail

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}
/>
);
}
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);
});

Anchor to PropertiesProperties

Anchor to productthumbnailpropsProductThumbnailProps

Anchor to accessibilityLabel
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 and the alt attribute.

Anchor to alt
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 and the alt attribute.

Anchor to badge
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.

Anchor to size
size
'small' | 'base'
Default: 'base'

The size of the product thumbnail image.

  • base: Renders the thumbnail at its standard size.
  • small: A compact thumbnail for tighter layouts.
Anchor to source
source
<string, >

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.

Learn more about the src attribute.

Anchor to src
src
<string, >

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.

Learn more about the src attribute.

Anchor to Best PracticesBest 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).
Was this page helpful?