---
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/ui-components/media-and-visuals/imagegroup
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/imagegroup.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-10/upgrading-to-2025-10) to upgrade your extension.

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

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

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

  The loading state of the image group. When `true`, the image group displays a loading indicator in place of images.

* **totalItems**

  **number**

  The total number of items that could be displayed in the image group. Used to calculate and display the remaining count when all available image slots have been filled (for example, "+3 more").

* **variant**

  **'grid' | 'inline-stack'**

  **Default: 'grid'**

  The layout arrangement for the images within the group.

  * `grid`: Displays images in a grid layout, filling available rows and columns.
  * `inline-stack`: Displays images in a horizontal stack, arranged inline from start to end.

Examples

## 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://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/imagegroup-preview-DRaNNsOZ.png)

### 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);
  }
  ```

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