[{"value":"Preview","id":"preview","hLevel":2,"level":1},{"value":"Code example","id":"code-example","hLevel":2,"level":1},{"value":"ItemThumbnailProps","id":"itemthumbnailprops","hLevel":2,"level":1,"children":[{"value":"src","id":"src","hLevel":3,"level":2},{"value":"alt?","id":"alt","hLevel":3,"level":2},{"value":"badge?","id":"badge","hLevel":3,"level":2},{"value":"size?","id":"size","hLevel":3,"level":2}]}]

ItemThumbnail

The ItemThumbnail UI component is a small-sized preview image of an item, designed to help customers quickly identify the product's visual appearance.

Preview

Code example

render('Checkout::Dynamic::Render', (root) => {
  return <ItemThumbnail
      src="https://img-va.myshopline.com/image/store/1610440173818/56ca4c23a1145288ad493a9e006fa954ce5a9a74.png?w=540&h=810"
      size="small"
      badge={1}
    />
});

ItemThumbnailProps

tip

Optional properties are marked with a ?. Properties without a ? are required.

src

string

Image URL.

alt?

string

Text description of the image.

badge?

number

Circular badge number displayed in the top-right corner of the image.

size?

base small Default: base

Image size.

Was this article helpful to you?

SHOPLINE

Legal

ItemThumbnail​

Preview​

Code example​

ItemThumbnailProps​

src​

alt?​

badge?​

size?​