> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uselooop.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hero Image

> Shows the imaage of develted product/variants

The hero image component is used to display the main image of a product or variant. It needs to be inside the product card. The image will dynamically change based on the variant selected.

## Setup

1. Add the following  custom attribute to the image inside product card component:

```html theme={null}
looop=hero-picture
```