---
title: ImageGroup
description: Display up to 4 images in a grid or stacked layout. The images are displayed as a grid when used within a [Section](/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component. 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-10
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/media/imagegroup
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/media/imagegroup.md
---

# Image​Group

Display up to 4 images in a grid or stacked layout. The images are displayed as a grid when used within a [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component. 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.

## Properties

* id

  string

  A unique identifier for the element.

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

### Examples

* #### Code

  ##### Default

  ```jsx
  <s-image-group>
    <s-image 
      src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
      alt="Product image"
    ></s-image>
    <s-image 
      src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
      alt="Product image"
    ></s-image>
    <s-image 
      src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
      alt="Product image"
    ></s-image>
    <s-image 
      src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
      alt="Product image"
    ></s-image>
  </s-image-group>
  ```

## Preview

![An example of the ImageGroup component shows a group of four images of plants, arranged in a 2x2 grid.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/imagegroup-default.png)

## Best practices

Use these best practices to deliver a clear and accessible experience in your extensions.

### Write concise alt text for each image

Describe what’s important about each image so all users can understand the content.

### Optimize performance

Compress images and use modern formats; consider lazy loading to reduce initial load times.

### Preserve visual breathing room

Maintain consistent spacing around the group so images don’t feel crowded or overwhelming.