Thumbnail

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

Thumbnails are used as a visual anchor and identifier for an object. They should be used along with text to provide context.

import {extend, Thumbnail} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const thumbnail = root.createComponent(Thumbnail, {

size: 'small',

scaleType: 'fit',

source: 'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png',

alt: 'Shopify',

});

root.appendChild(thumbnail);

root.mount();

});

import React from 'react';

import {extend, render, Thumbnail} from '@shopify/admin-ui-extensions-react';

function App() {

return (

<Thumbnail

size="small"

scaleType="fit"

source="https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png"

alt="Shopify"

);

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Thumbnail} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const thumbnail = root.createComponent(Thumbnail, {
    size: 'small',
    scaleType: 'fit',
    source: 'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png',
    alt: 'Shopify',
  });

  root.appendChild(thumbnail);
  root.mount();
});

import React from 'react';
import {extend, render, Thumbnail} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Thumbnail
      size="small"
      scaleType="fit"
      source="https://cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png"
      alt="Shopify"
    />
  );
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
size?	`"small" \| "base" \| "medium" \| "large" \| "extraLarge"`
scaleType?	`"fill" \| "fit" \| "crop"`
source	`string`	URL for the thumbnail image.
alt	`string`	Alt text for the thumbnail.

Was this page helpful?