Choose a version:

ImageGroup

Display up to 4 images in a grid or stacked layout. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed.

Anchor to imagegrouppropsImageGroupProps

accessibilityLabel

string

A label that describes the purpose or contents of the image group. When set, it will be announced to users using assistive technologies and will provide them with more context.

loading

boolean

Default: false

Indicates that the image group is in a loading state.

When true, the image group show a loading indicator.

totalItems

number

Indicates the total number of items that could be displayed in the image group. It is used to determine the remaining number to show when all the available image slots have been filled.

variant

'grid' | 'inline-stack'

Default: "grid"

Changes the layout of the images.

Was this section helpful?

Basic ImageGroup

import {

Image,

ImageGroup,

View,

reactExtension,

} from '@shopify/ui-extensions-react/customer-account';

import React from 'react';

export default reactExtension('customer-account.page.render', () => <App />);

function App() {

return (

</ImageGroup>

</View>

);

}

Preview

An example of the ImageGroup component shows 3 circular images of plants displayed in a row, each one slightly overlapping the previous image—in a horizontal stacked pattern. To the right, there is another group of 3 images of plants, arranged in a 2x2 grid. There is one square image in the upper-left quadrant, one square image in the lower-left quadrant, and the entire right half of the grid is occupied by one image.

Anchor to best-practicesBest Practices

Use with the ResourceItem component
Optimize image file sizes and consider lazy loading for performance.

Was this section helpful?