---
title: ImageGroup
description: 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.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/components/imagegroup
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/components/imagegroup.md
---

# Image​Group

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.

## ImageGroupProps

* 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.

### Examples

* #### Basic ImageGroup

  ##### React

  ```tsx
  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 (
      <View maxInlineSize={300}>
        <ImageGroup>
          <Image source="../assets/flower.jpg" />
          <Image source="../assets/flower.jpg" />
          <Image source="../assets/flower.jpg" />
        </ImageGroup>
      </View>
    );
  }
  ```

  ##### JS

  ```js
  import {
    Image,
    ImageGroup,
    View,
    extension,
  } from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.page.render',
    (root, api) => {
      renderApp(root, api);
    },
  )

  function renderApp(root, api) {
    const firstImage = root.createComponent(Image, {
      source: "../assets/flower.jpg"
    });

    const secondeImage = root.createComponent(Image, {
      source: "../assets/flower.jpg"
    });

    const thirdImage = root.createComponent(Image, {
      source: "../assets/flower.jpg"
    });

    const imageGroup = root.createComponent(ImageGroup);

    imageGroup.append(firstImage);
    imageGroup.append(secondeImage);
    imageGroup.append(thirdImage);

    const view = root.createComponent(View, {maxInlineSize: 300});
    view.append(imageGroup);

    root.append(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.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/imagegroup-preview.png)

## Best Practices

* Use with the [ResourceItem](https://shopify.dev/docs/api/customer-account-ui-extension/unstable/components/resourceitem) component
* Optimize image file sizes and consider lazy loading for performance.