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 propertiesProperties

Anchor to id id string: A unique identifier for the element.
Anchor to totalItems 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.

ImageGroupPropsDocs

id
A unique identifier for the element.
```
string
```
totalItems
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.
```
number
```

ImageGroupProps

Was this section helpful?

Basic ImageGroup

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

return (

<s-image-group>

<s-image src="../assets/flower.jpg" />

</s-image-group>

);

}

examples

Basic ImageGroup

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  return (
    <s-image-group>
      <s-image src="../assets/flower.jpg" />
      <s-image src="../assets/flower.jpg" />
      <s-image src="../assets/flower.jpg" />
      <s-image src="../assets/flower.jpg" />
    </s-image-group>
  );
}

Preview

An example of the ImageGroup component shows a group of four images of plants, arranged in a 2x2 grid.

Anchor to best-practicesBest Practices

Optimize image file sizes and consider lazy loading for performance.

Was this section helpful?