Choose a version:

Box
component

A box component is a container that can be used to group and display content in a consistent manner.

Anchor to boxBox

blockSize

Default: 'auto'

Adjust the block size.

Auto takes the block size of the box's children.

inlineSize

Default: 'auto'

Adjust the inline size.

Auto takes the inline size of the box's children.

maxBlockSize

Default: 'none'

Adjust the maximum block size.

maxInlineSize

Default: 'none'

Adjust the maximum inline size.

minBlockSize

Default: '0'

Adjust the minimum block size.

minInlineSize

Default: '0'

Adjust the minimum inline size.

padding

Default: '0'

Adjust the padding of all edges in pixels.

paddingBlock

Default: '0'

Adjust the block-padding.

This overrides the block value of padding.

paddingBlockEnd

Default: '0'

Adjust the block-end padding.

This overrides the block-end value of paddingBlock.

paddingBlockStart

Default: '0'

Adjust the block-start padding.

This overrides the block-start value of paddingBlock.

paddingInline

Default: '0'

Adjust the inline padding.

This overrides the inline value of padding.

paddingInlineEnd

Default: '0'

Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.

paddingInlineStart

Default: '0'

Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

Was this section helpful?

Box

import React from 'react';

import {

Box,

Image,

Navigator,

Screen,

ScrollView,

reactExtension,

} from '@shopify/ui-extensions-react/point-of-sale';

const ImageModal = () => {

return (

<Box

blockSize="100px"

inlineSize="100px"

paddingInlineStart="100"

paddingInlineEnd="100"

paddingBlockEnd="100"

paddingBlockStart="100"

<Image

src="example.png"

size="contain"

</Box>

</ScrollView>

</Screen>

</Navigator>

);

};

export default reactExtension(

'pos.home.modal.render',

() => <ImageModal />,

);

Boxcomponent

Anchor to boxBox

Preview

Box
component