Skip to main content

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

Anchor to propertiesProperties

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

Anchor to size
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.
Anchor to sizes
sizes
string

A set of media conditions and their corresponding sizes. Learn more about the sizes attribute.

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

Anchor to srcSet
srcSet
string

A set of image sources and their width or pixel density descriptors. Learn more about the srcset attribute. This overrides the src property.

Anchor to totalItems
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
<s-product-thumbnail
src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
totalItems={2}
></s-product-thumbnail>

Preview

Was this page helpful?