Product Media

Each product can have a primary image, a media gallery, and rich descriptions.

---

Adding Media to a Product

1. Open a product in the editor
2. Go to the Media section
3. Click Add Media to open the media picker
4. Select images, videos, or audio from your library
5. Drag to reorder

The first item in the media list is treated as the primary product image, displayed prominently in product cards and the storefront.

---

Primary Image

Set the primary image in the product editor:

1. Upload an image to the media library
2. Copy its URL
3. Paste it into the Image field in the product editor
4. Save

Alternatively, the first media item automatically becomes the primary image.

---

Media Types

Type	Supported Formats	Use Case
image	JPEG, PNG, WebP, AVIF	Product photos
video	MP4, WebM	Product demos, unboxing
audio	MP3, WAV	Music, podcasts

The storefront's ProductMedia component automatically renders the correct player based on media type.

---

Storefront Display

Use the ProductMedia component to show a product's gallery:

<ProductMedia>
  <Grid cols={4} gap={2}>
    <ProductMediaView>
      <ProductMediaItem
        class="aspect-square object-cover rounded cursor-pointer
               border-2 hover:border-primary transition-colors"
      />
    </ProductMediaView>
  </Grid>
</ProductMedia>

The ProductMediaItem component handles images, videos, and audio — no type checking needed.

---

Media Limits

Limit	Value
Max file size	10 MB
Max files per upload	50
Supported image formats	JPEG, PNG, WebP, AVIF, GIF
Supported video formats	MP4, WebM
Supported audio formats	MP3, WAV, OGG

---

Alt Text

Always set alt text on images — it improves accessibility and SEO. In the media library, set the alt field for each image. The ProductImage component renders it automatically.