Choose a version:

ImageGroup

Display up to 4 images in a grid or stacked layout. The images are displayed as a grid when used within a 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.

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.

Was this section helpful?

Code

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

Examples

Code

Default

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

Anchor to best-practicesBest Practices

Optimize image file sizes and consider lazy loading for performance.

Was this section helpful?