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.

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

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

ImageGroupProps

ImageGroupProps

accessibilityLabel

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

Indicates that the image group is in a loading state. When `true`, the image group show a loading indicator.

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.

variant

Changes the layout of the images.