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

# Collection

> Exibe uma coleção de produtos em grade ou carrossel, com link opcional para a página da coleção.

<img src="https://mintcdn.com/yampi/aVuas9YGYMYd9zGw/images/componentes/collection.png?fit=max&auto=format&n=aVuas9YGYMYd9zGw&q=85&s=999b40dbaa3e84e9d8eb64611ee2a631" alt="" width="1313" height="549" data-path="images/componentes/collection.png" />

O componente `Collection` busca os produtos de uma coleção pelo ID e os exibe em grade ou carrossel. Ideal para seções de destaque na página inicial, como "Lançamentos" ou "Mais vendidos".

## Uso

```twig theme={"system"}
<collection
  :collection-id="{{ section.collectionId }}"
  :total-products="8"
  desktop-layout="carousel"
  :products-per-line="2"
  :show-link="true"
/>
```

## Propriedades

| Propriedade       |    Tipo   | Obrigatória | Valor padrão | Descrição                                                 |
| :---------------- | :-------: | :---------: | :----------: | :-------------------------------------------------------- |
| `collectionId`    |  `Number` |      ✅      |       —      | ID da coleção a ser exibida.                              |
| `totalProducts`   |  `Number` |      ✅      |       —      | Quantidade máxima de produtos a carregar e exibir.        |
| `desktopLayout`   |  `String` |      ❌      |   `'grid'`   | Layout em desktop. Valores: `'grid'` ou `'carousel'`.     |
| `productsPerLine` |  `Number` |      ❌      |      `2`     | Número de colunas no mobile. Valores aceitos: `1` ou `2`. |
| `showLink`        | `Boolean` |      ❌      |    `false`   | Exibe um link para a página completa da coleção.          |