Product thumbnail

The ProductThumbnail component is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products.

Anchor to ProductThumbnailPropsProductThumbnailProps

T | ConditionalStyle<T, AcceptedConditions>

1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4

Anchor to ExamplesExamples

Anchor to Basic ProductThumbnailBasic ProductThumbnail

Basic ProductThumbnail

Basic ProductThumbnail

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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}

/>

);

}

99

1

2

3

4

5

6

7

8

9

10

11

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

});

React

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

JS

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 Best practicesBest practices

• Provide descriptive alt text: Write descriptive alt attributes that describe the product, including variant details like size and color. Avoid generic labels like “shirt” or “book”. See Shopify's alt text guidance to learn more about alt text best practices.
• Size thumbnails for your context: Smaller thumbnails work better in dense layouts like lists, while larger sizes suit product-focused interfaces like a recommended product block. Consider the buyer's task and the information density when selecting a size.
• Use quantity badges appropriately: Set badge only when the ProductThumbnail component represents a bundle or multi-quantity line item.
• Maintain visual consistency: Keep a consistent visual style and aspect ratio across ProductThumbnail components in your extension. This consistency helps buyers recognize and associate thumbnails with product offerings.
• Optimize for visual clarity and loading time: Choose a resolution and image quality that provide visual clarity while maintaining fast load times. For fast, reliable delivery during checkout, consider hosting images from Shopify's CDN.

Anchor to LimitationsLimitations

• The ProductThumbnail component renders at a fixed aspect ratio and crops non-square images to fit using center cropping.
• The ProductThumbnail component doesn't support custom pixel dimensions or percentage dimensions.
• Custom placeholder graphics aren't available when images fail to load or no source is provided.