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

# Collection Grid

> Cookbook — grid de coleções a partir dos ids de collection_list.

> Quero um grid de coleções escolhidas no Editor. Como implementar?

Referência: `seu tema (adaptado do cookbook)`

Índice: [Cookbooks](https://docs-loja.usecorvex.com.br/cookbook/overview.md)

***

## Contratos utilizados

* [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md)
* [Data Contract](https://docs-loja.usecorvex.com.br/reference/contracts/data.md)
* [Coleção](https://docs-loja.usecorvex.com.br/data/resources/category.md)
* Field [`collection_list`](https://docs-loja.usecorvex.com.br/schema/fields/collection-list) — valor = `string[]` de ids de categoria

***

## Objetivo

1. Merchant seleciona várias coleções (`collection_list`).
2. O schema persiste **array de ids** em `settings.collections`.
3. `defineSectionData` resolve cada id → `Collection`.
4. Grid responsivo com imagem, título e URL pública.

***

## Fluxo de dados

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
settings.collections  (string[] de ids)
        ↓
storefront.collections.get(id)  (para cada)
        ↓
data.collections  (Collection[])
        ↓
Grid: collection.title, collection.image.url, collection.url
```

**Não** documente `settings.collections` como `Collection[]` — a resolução é explícita no `defineSectionData`.

***

## Schema + data

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
export const schema = defineSection({
  data: ['collections'],
  settings: [
    {
      id: 'collections',
      type: 'collection_list',
      label: 'Coleções',
      max: 8,
    },
  ],
});

export const data = defineSectionData(async ({ storefront, settings }) => {
  const ids = Array.isArray(settings.collections)
    ? settings.collections.filter(Boolean)
    : [];
  if (!ids.length) return { collections: [] };

  const results = await Promise.all(
    ids.map(async (id) => {
      try {
        return await storefront.collections.get(id);
      } catch {
        return null;
      }
    })
  );

  return { collections: results.filter(Boolean) };
});
```

Shape público `Collection`: `id`, `handle`, `url`, `title`, `image` — ver [Coleção](https://docs-loja.usecorvex.com.br/data/resources/category.md).

***

## Render

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
{collections.map((collection) => (
  <a key={collection.id} href={collection.url} className="collection-grid__card">
    <div
      style={
        collection.image?.url
          ? { backgroundImage: `url(${collection.image.url})` }
          : undefined
      }
    />
    <p>{collection.title}</p>
  </a>
))}
```

Grid CSS: `grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))`.

***

## Comportamento no Editor

* `collection_list`: o modal grava `collection.id` em cada item.
* Ordem no array = ordem no grid.

***

## Cuidados

* Id que não existe mais: `get` pode falhar. Filtre `null` no loader.
* Empty state quando nenhuma coleção selecionada.
* Múltiplas instâncias da section na página: cada uma com seu próprio `settings.collections`.

***

## Checklist

* [ ] Field `collection_list` com `max`
* [ ] `defineSectionData` com `collections.get` por id
* [ ] UI usa `title`, `url`, `image.url` apenas
* [ ] Grid responsivo
* [ ] `corvex validate` passa

Código completo: `seu tema (adaptado do cookbook)`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.