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

# Dynamic Galleries

> Render product, collection, category, and brand-aware Cevoid UGC galleries.

Use dynamic galleries when the gallery content should depend on the page context. Dynamic galleries use a normal `data-gallery` value plus one additional attribute for product, collection, category, or brand.

Start with [Embed Galleries and Cards](./embed) if you have not added the Cevoid widget script yet.

## Product page gallery

Use `data-product="auto"` when the gallery should detect the current product from the page URL.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-product="auto"></div>
```

You can also pass a product ID directly.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-product="PRODUCT_ID"></div>
```

The product ID must match the product ID you send to Cevoid through your product catalog. Product page galleries use fallback settings from Cevoid when the selected product has no posts, so you do not need to build separate fallback logic on your site.

## Collection page gallery

Use `data-collection="auto"` when the gallery should detect the current collection from the page URL.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-collection="auto"></div>
```

You can also pass a collection identifier directly.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-collection="summer-2026"></div>
```

The collection name or ID must match the collection data you send to Cevoid.

## Category page gallery

Use `data-category="auto"` when the gallery should detect the current category from the page URL.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-category="auto"></div>
```

You can also pass a category identifier directly.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-category="T-shirts"></div>
```

The category name or ID must match the category data you send to Cevoid. Category galleries prioritize posts related to the selected category, then include posts from child categories.

## Brand page gallery

Use `data-brand="auto"` when the gallery should detect the current brand from the page URL.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-brand="auto"></div>
```

You can also pass a brand slug directly.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID" data-brand="your-brand-name"></div>
```

## Related

* [Product feeds](/integrations/product-feeds)
* [Programmatic Market Values](./market-values)
* [Runtime Helpers](./runtime-helpers)