Skip to main content

Image
component

The image component displays an image to a merchant in Shopify POS.

|
Default: 'l'

The size or fill size of the image.

string

The source of the image to be displayed.

Was this section helpful?

Example image

import React from 'react';

import {
Image,
Screen,
ScrollView,
Navigator,
Box,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
return (
<Navigator>
<Screen name="Image" title="Image Example">
<ScrollView>
<Image src="example.png" size="s" />
<Box blockSize="600px" inlineSize="600px" padding="400">
<Image src="example.png" size="cover" />
</Box>
</ScrollView>
</Screen>
</Navigator>
);
};

export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));

Preview