Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products.
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);
});
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 `Image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the description 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://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204) to learn more. This property is an alias for `accessibilityLabel` for compatibility with the HTML specification. When both are specified `accessibilityLabel` takes precedence.
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 `Image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the description 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://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204) to learn more. An `alt` property is available as an alias for this for compatibility with the HTML specification. When both are specified, `accessibilityLabel` takes precedence.
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.
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.
Decorates the product thumbnail with the quantity of the product.
Adjusts the size the product thumbnail image.
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. To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.
T | ConditionalStyle<T, AcceptedConditions>
The default value applied when none of the conditional values specified in `conditionals` are met.
An array of conditional values.
The conditions that must be met for the value to be applied. At least one condition must be specified.
The value that will be applied if the conditions are met.
1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'