> For the complete documentation index, see [llms.txt](https://help.citrusad.com/retail-media-interface/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.citrusad.com/retail-media-interface/integration/pt-br/brand-pages/brand-page-retailer-integration-guide/module-capabilities.md).
# Capacidades do módulo
Este documento descreve cada tipo de módulo disponível, seus campos, restrições e opções de configuração. Use-o como a referência voltada ao varejista para o que cada módulo suporta e o que as marcas podem configurar ao criar o conteúdo da Página da Marca.
***
## Visão geral dos tipos de módulo
| Módulo | Finalidade |
| ------------------ | ------------------------------------------------------------------------- |
| Hero Banner | Mídia de largura total com título, subtítulo e CTA |
| Imagem | Imagem única com legenda opcional, texto alt e link |
| Texto | Título, slogan, corpo do texto ou texto personalizado de várias linhas |
| Layout dividido | Layout em duas colunas ou empilhado contendo módulos de Imagem e/ou Texto |
| Galeria de imagens | Grade de imagens com título de seção opcional, descrição e CTA |
| Menu de filtros | Barra de navegação de itens de filtro rotulados |
| Grade de produtos | Grade de produtos selecionados com filtragem opcional e CTA |
## Campos comuns (todos os módulos)
Cada módulo compartilha os seguintes campos gerenciados pelo sistema. As marcas não os definem diretamente.
| Campo | Descrição |
| --------------------------- | -------------------------------------------------------------------------------- |
| `id` | Identificador exclusivo gerado automaticamente |
| `brandPageModuleTemplateId` | Vincula o conteúdo ao modelo de módulo do varejista |
| `order` | Posição de exibição na página (gerenciada via arrastar e soltar) |
| `optionality` | Se o módulo inteiro é obrigatório ou pode ser ignorado (definido pelo varejista) |
## 1. Hero Banner
Um banner de largura total que combina uma imagem de fundo, sobreposição, texto de título e uma chamada para ação (CTA). Este é tipicamente o primeiro módulo na Página da Marca.
### Mídia
| Campo | Obrigatório? | Restrições |
| --------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Imagem | Obrigatório | Formatos: `GIF`, `JPG`, `PNG`, `SVG` · Dimensões mínimas: definidas pelo varejista · Tamanho máximo do arquivo: definido pelo varejista |
| Texto alt | Obrigatório ou Opcional (definido pelo varejista) | Texto descritivo para acessibilidade |
{% hint style="info" %}
O suporte a vídeo está planejado, mas ainda não disponível. Apenas imagem é aceita no momento.
{% endhint %}
### Sobreposição
O varejista define se uma sobreposição está disponível neste módulo:
| Configuração | Comportamento |
| ---------------------- | --------------------------------------------------------------- |
| `disabled` | Sem sobreposição — a imagem é exibida sem nenhuma camada de cor |
| `optional` (permitido) | A marca pode optar por ativar ou desativar a sobreposição |
| `required` | A sobreposição é sempre exibida; a marca não pode desativá-la |
Quando a sobreposição está ativada, a marca seleciona o estilo de fundo. O varejista controla quais estilos são oferecidos:
| Estilo | Descrição |
| ---------- | --------------------------------------- |
| `gradient` | Esmaecimento gradual a partir da imagem |
| `solid` | Bloco de cor plana atrás do texto |
Ambas as opções podem ser disponibilizadas simultaneamente.
### Conteúdo de texto
| Campo | Obrigatório? | Restrições |
| ------------------ | ------------------------------------------------------------- | --------------------------------------------------------------------- |
| Título | Obrigatório | Máx. de caracteres: definido pelo varejista |
| Subtítulo | Opcional | Máx. de caracteres: definido pelo varejista |
| Texto do botão CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | Máx. de caracteres: definido pelo varejista |
| URL do link do CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | Máx. de caracteres: definido pelo varejista · Deve ser uma URL válida |
{% hint style="info" %}
O texto do CTA e o link do CTA são configurados juntos. Se o CTA estiver desativado, nenhum dos campos aparecerá. Você não pode ter um link de CTA sem um botão de CTA, ou vice-versa.
{% endhint %}
### Alinhamento do texto
O varejista define quais opções de alinhamento estão disponíveis. Valores possíveis: `left`, `center`, `right`. A marca seleciona a partir do conjunto oferecido.
## 2. Imagem
Uma única imagem com legenda opcional, texto alternativo e um destino de link.
### Upload de imagem
| Campo | Obrigatório? | Restrições |
| --------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Imagem | Obrigatório | Formatos: `GIF`, `JPG`, `PNG`, `SVG` · Dimensões mínimas: definidas pelo varejista · Tamanho máximo do arquivo: definido pelo varejista |
| Texto alt | Obrigatório ou Opcional (definido pelo varejista) | Texto descritivo para acessibilidade |
### Legenda
| Campo | Obrigatório? | Restrições |
| ------- | ------------ | ----------------------------------------------------------- |
| Legenda | Opcional | Máximo de caracteres: definido pelo varejista · Linha única |
{% hint style="info" %}
A disponibilidade de legenda é definida pelo varejista. Se o varejista não tiver habilitado legendas, o campo não aparecerá.
{% endhint %}
### Link
Cada imagem pode opcionalmente ter um link para um destino. A marca seleciona um dos três tipos de link:
| Tipo de link | Descrição |
| ------------ | ------------------------------------------------------------------------------------------------------ |
| `image` | Sem link — a imagem não é interativa |
| `url` | Navega para um URL personalizado quando selecionado |
| `product` | Navega para uma página de detalhes de produto específica (selecionada por meio do seletor de produtos) |
### Linhas de texto adicionais
Alguns módulos de Imagem suportam linhas de texto rotuladas extras ao lado da imagem (por exemplo, um título ou descrição exibidos abaixo ou sobre a imagem). A disponibilidade, os rótulos, os tamanhos de fonte e se cada linha é obrigatória ou opcional são todos definidos pelo varejista.
## 3. Texto
Um módulo de texto flexível que suporta variantes de linha única e multilinha.
### Variantes
O varejista define qual variante o módulo usa:
| Variante | Descrição |
| ---------- | --------------------------------------------------------------------------------------------- |
| `headline` | Uma única linha de texto em destaque — grande, em negrito |
| `tagline` | Uma única linha de apoio — menor que o título |
| `body` | Um único bloco de texto principal — é exibido como uma área de texto |
| `lines` | Múltiplas linhas de texto nomeadas, cada uma com seu próprio tamanho de fonte e opcionalidade |
### Campos — variantes de linha única (`headline`, `tagline`, `body`)
| Campo | Obrigatório? | Restrições |
| ----- | ------------ | ------------------------------------------------------------------------ |
| Texto | Obrigatório | Máximo de caracteres: definido pelo varejista (aplica-se a todo o campo) |
### Campos — variante multilinha (`lines`)
Cada linha é definida independentemente pelo varejista:
| Campo | Obrigatório? | Restrições |
| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------------- |
| Texto da linha | Obrigatório ou Opcional (por linha, definido pelo varejista) | Máximo de caracteres: definido pelo varejista (aplica-se por linha) |
| URL da linha | Opcional | Apenas disponível em linhas onde `isHyperlink` está habilitado |
### CTA
| Campo | Obrigatório? | Restrições |
| ------------------ | ------------------------------------------------------------- | ---------------------- |
| Texto do botão CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | — |
| URL do link do CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | Deve ser um URL válido |
{% hint style="info" %}
A opcionalidade da CTA aplica-se tanto ao texto quanto ao URL juntos. Se desabilitado, nenhum dos campos aparecerá.
{% endhint %}
### Alinhamento
Definido pelo varejista. Valores possíveis: `left`, `center`, `right`. Aplica-se a todo o texto no módulo.
### Largura máxima
O varejista define uma restrição de `maxWidth` que limita a largura em que o bloco de texto pode ser exibido (por exemplo, `600px` or `80%`). Esta é uma restrição de exibição, não uma restrição de conteúdo.
## 4. Layout Dividido
Um contêiner de layout que contém dois ou mais módulos filhos dispostos em colunas ou linhas. Os filhos são módulos de **Imagem** e/ou **Texto**. O aninhamento é suportado até a profundidade 2, mas você não pode aninhar Layouts Divididos no nível raiz.
### Opções de layout
| Layout | Opções |
| --------- | --------------------------------------------------------------------------------------------------- |
| `columns` | Lado a lado. Proporção: `50:50`, `33:67`, or `67:33` (definido pelo varejista quais são oferecidos) |
| `rows` | Empilhados verticalmente |
### Espaçamento
O espaço entre os filhos é definido pelo varejista, extraído da escala de espaçamento do guia de estilo do varejista.
### Filhos
| Propriedade | Valor |
| -------------------------- | --------------------------------------------------------------------------------------------------- |
| Tipos de filhos permitidos | `Image`, `Text` |
| Número de filhos | Definido pelo varejista (`numChildren`) |
| Aninhamento | Um Layout Dividido filho pode ele mesmo conter módulos de `Image` e `Text` (profundidade máxima: 2) |
{% hint style="info" %}
Importante
Você não pode colocar um Banner Hero, Galeria de Imagens, Menu de Filtros ou Grade de Produtos dentro de um Layout Dividido.
{% endhint %}
## 5. Galeria de Imagens
Uma grade de imagens com um cabeçalho de seção opcional, descrição e uma CTA inferior.
### Cabeçalho da seção
| Campo | Obrigatório? | Restrições |
| ------------------ | ------------------------------------------------------------- | ---------- |
| Título da seção | Obrigatório, Opcional ou Desativado (definido pelo varejista) | — |
| Descrição da seção | Obrigatório, Opcional ou Desativado (definido pelo varejista) | — |
### Layout da galeria
Definido pelo varejista por ponto de interrupção:
| Propriedade | Descrição |
| ---------------- | ---------------------------------------------------------------------------------- |
| Colunas | Número de colunas no celular, tablet e desktop (definido pelo varejista) |
| Altura da imagem | Altura em pixels ou porcentagem por ponto de interrupção (definido pelo varejista) |
| Espaçamento | Espaçamento entre imagens (do guia de estilo do varejista) |
### Imagens
| Propriedade | Restrições |
| ------------------------- | ---------------------------------------------------------------- |
| Mínimo de imagens | Definido pelo varejista (deve adicionar pelo menos este número) |
| Máximo de imagens | Definido pelo varejista (não pode exceder este número) |
| Formatos | `GIF`, `JPG`, `PNG`, `SVG` |
| Dimensões mínimas | Definido pelo varejista |
| Tamanho máximo do arquivo | Definido pelo varejista |
| Texto alt | Obrigatório ou Opcional por imagem (definido pelo varejista) |
| Legenda por imagem | Opcional, máximo de caracteres: definido pelo varejista |
| Link por imagem | `image` (nenhum) · `url` · `product` — igual ao módulo de Imagem |
### Linhas de texto adicionais por imagem
Igual ao módulo de Imagem — rótulos definidos pelo varejista, tamanhos de fonte e opcionalidade por linha.
### CTA (inferior da galeria)
| Campo | Obrigatório? | Restrições |
| ------------------ | ------------------------------------------------------------- | ---------------------- |
| Texto do botão CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | — |
| URL do link do CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | Deve ser um URL válido |
| Alinhamento do CTA | `left`, `center`, `right` (definido pelo varejista) | — |
## 6. Menu de Filtros
Uma barra de navegação horizontal de itens de filtro rotulados. Use-a para permitir que os compradores filtrem o conteúdo na página (por exemplo, por categoria ou subcategoria).
### Itens
| Propriedade | Restrições |
| --------------- | ------------------------------------------------------------------------------------------- |
| Mínimo de itens | Definido pelo varejista (deve adicionar pelo menos este número) |
| Máximo de itens | Definido pelo varejista (não pode exceder este número) |
| Texto do rótulo | Máx. de caracteres: definido pelo varejista |
| Valor do filtro | Valor interno usado pela lógica de filtragem. Máximo de caracteres: definido pelo varejista |
### Alinhamento
Definido pelo varejista. Valores possíveis: `left`, `center`.
Os itens de filtro podem ser reordenados. O rótulo é o que o comprador vê; o valor é o que é aplicado como filtro. Eles não precisam ser a mesma string.
## 7. Grade de Produtos
Uma grade curada de produtos selecionados pela marca, com cabeçalho de seção opcional, filtragem e CTA.
### Cabeçalho da seção
| Campo | Obrigatório? | Restrições |
| ------------------ | ------------------------------------------------------------- | ---------- |
| Título da seção | Obrigatório, Opcional ou Desativado (definido pelo varejista) | — |
| Descrição da seção | Obrigatório, Opcional ou Desativado (definido pelo varejista) | — |
### Produtos
| Propriedade | Restrições |
| ------------------ | ---------------------------------------------------------------- |
| Mínimo de produtos | Definido pelo varejista |
| Máximo de produtos | Definido pelo varejista |
| Origem do produto | Selecionado por meio do seletor de produtos do catálogo da marca |
| Ordem de exibição | Arraste e solte dentro do módulo |
### CTA do cartão de produto
O varejista decide se um botão CTA é exibido em cada cartão de produto:
| Configuração | Comportamento |
| ------------ | --------------------------------------------------------------------- |
| Desativado | Nenhum botão CTA nos cartões de produto |
| Ativado | Um botão CTA é exibido; o varejista define o texto do rótulo do botão |
{% hint style="info" %}
Quando ativado, todos os cartões de produto na grade compartilham o mesmo rótulo de CTA (definido pelo varejista, não pela marca).
{% endhint %}
### Filtragem
O varejista pode opcionalmente ativar a filtragem na página para a Grade de Produtos:
| Configuração | Descrição |
| ------------------- | -------------------------------------------------------------------------- |
| `enabled` | Os compradores podem filtrar a grade de produtos |
| `showActiveFilter` | Destaca o filtro atualmente ativo |
| `showResultCount` | Exibe quantos resultados correspondem ao filtro ativo |
| `emptyStateMessage` | Mensagem personalizada exibida quando nenhum produto corresponde ao filtro |
{% hint style="info" %}
A filtragem funciona em conjunto com um módulo de Menu de Filtros. Os valores de filtro definidos nos produtos devem corresponder aos valores dos itens de filtro no Menu de Filtros.
{% endhint %}
### CTA (inferior da grade)
| Campo | Obrigatório? | Restrições |
| ------------------ | ------------------------------------------------------------- | ---------------------- |
| Texto do botão CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | — |
| URL do link do CTA | Obrigatório, Opcional ou Desativado (definido pelo varejista) | Deve ser um URL válido |
| Alinhamento do CTA | `left`, `center`, `right` (definido pelo varejista) | — |
## Referência de restrição
### `ContentLimit` — modelo de restrição de campo de texto
| Valor | Significado |
| ----------------------- | ------------------------------------------------------------------------- |
| `disabled` | O campo não está disponível neste modelo |
| `allowed` + `maxChars` | O campo é opcional; se preenchido, não pode exceder `maxChars` caracteres |
| `required` + `maxChars` | O campo deve ser preenchido; não pode exceder `maxChars` caracteres |
### `ImageConstraints` — modelo de restrição de upload de imagem
| Propriedade | Descrição |
| ----------------- | ------------------------------------------------------------------------------------ |
| `altOptionality` | `required` or `allowed` |
| `minWidth` | Largura mínima da imagem em pixels (opcional) |
| `minHeight` | Altura mínima da imagem em pixels (opcional) |
| `maxFileSizeMb` | Tamanho máximo do arquivo em megabytes (opcional) |
| `acceptedFormats` | Subconjunto de `GIF`, `JPG`, `PNG`, `SVG` (opcional — todos aceitos se não definido) |
### `CtaConfig` — modelo de restrição de chamada para ação
| Propriedade | Descrição |
| ------------- | ----------------------------------- |
| `optionality` | `required` · `allowed` · `disabled` |
| `alignment` | `left` · `center` · `right` |
## O que é definido pelo varejista vs. fixo
| Configuração | O varejista define isso | Fixo pela plataforma |
| ------------------------------------------------------- | :---------------------------------------: | :--------------------------------: |
| Se um módulo pode ser ignorado | ✅ | |
| Limites máximos de caracteres | ✅ | |
| Dimensões mínimas da imagem e tamanho máximo do arquivo | ✅ | |
| Quais formatos de imagem são aceitos | ✅ (subconjunto suportado pela plataforma) | |
| Se a CTA é obrigatória, opcional ou desativada | ✅ | |
| Se a sobreposição está disponível (Hero) | ✅ | |
| Quais opções de alinhamento de texto são oferecidas | ✅ | |
| Opções de proporção de coluna (Split Layout) | ✅ | |
| Contagem mínima/máxima de imagens (Galeria de Imagens) | ✅ | |
| Contagem mínima/máxima de produtos (Grade de Produtos) | ✅ | |
| Tipos de módulo disponíveis | | ✅ (7 tipos, fixo) |
| Tipo de mídia suportado (Hero) | | ✅ (apenas imagem; vídeo planejado) |
| Tipos de link para imagens | | ✅ (imagem · url · produto) |
| Profundidade máxima de aninhamento do Split Layout | | ✅ (profundidade 2) |
| Tipos de filhos permitidos no Split Layout | | ✅ (Apenas Imagem e Texto) |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.citrusad.com/retail-media-interface/integration/pt-br/brand-pages/brand-page-retailer-integration-guide/module-capabilities.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.