Choose a version:

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

Support

Targets (24)

Supported targets

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

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.

Examples

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

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>

Anchor to best-practicesBest 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.

Was this page helpful?