Product Thumbnail
Use ProductThumbnail to display a product thumbnail
Anchor to propertiesProperties
- Anchor to altaltaltstringstringDefault: `''`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, thealtis 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 to learn more.- Anchor to sizesizesize'small' | 'base' | 'small-100''small' | 'base' | 'small-100'Default: 'base'Default: 'base'
Adjusts the size the product thumbnail image.
- Anchor to sizessizessizesstringstring
A set of media conditions and their corresponding sizes.
- Anchor to srcsrcsrcstringstring
The image source (either a remote URL or a local file resource).
When the image is loading or no
srcis provided, a placeholder will be rendered.- Anchor to srcSetsrcSetsrcSetstringstring
A set of image sources and their width or pixel density descriptors.
This overrides the
srcproperty.- Anchor to totalItemstotalItemstotalItemsnumbernumber
Decorates the product thumbnail with the quantity of the product.
Preview
Examples
Code
Default
<s-product-thumbnail src="https://cdn.shopify.com/YOUR_IMAGE_HERE" totalItems={2} ></s-product-thumbnail>