> 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/es/brand-pages/brand-page-retailer-integration-guide/module-capabilities.md).
# Capacidades del módulo
Este documento describe cada tipo de módulo disponible, sus campos, restricciones y opciones de configuración. Utilícelo como la referencia orientada al minorista sobre lo que admite cada módulo y lo que las marcas pueden configurar al crear contenido para la página de marca (Brand Page).
***
## Tipos de módulos de un vistazo
| Módulo | Propósito |
| ----------------------- | ------------------------------------------------------------------------- |
| Hero Banner | Multimedia de ancho completo con titular, subtítulo y CTA |
| Imagen | Imagen única con leyenda opcional, texto alternativo y enlace |
| Texto | Titular, eslogan, texto del cuerpo o texto de varias líneas personalizado |
| Diseño dividido | Diseño en dos columnas o apilado que contiene módulos de Imagen y/o Texto |
| Galería de imágenes | Cuadrícula de imágenes con título de sección opcional, descripción y CTA |
| Menú de filtros | Barra de navegación con elementos de filtro etiquetados |
| Cuadrícula de productos | Cuadrícula de productos seleccionados con filtrado opcional y CTA |
## Campos comunes (todos los módulos)
Todos los módulos comparten los siguientes campos gestionados por el sistema. Las marcas no los configuran directamente.
| Campo | Descripción |
| --------------------------- | ------------------------------------------------------------------------------------- |
| `id` | Identificador único generado automáticamente |
| `brandPageModuleTemplateId` | Enlaza el contenido con la plantilla de módulo del minorista |
| `order` | Posición de visualización en la página (gestionada mediante arrastrar y soltar) |
| `optionality` | Indica si todo el módulo es obligatorio o se puede omitir (definido por el minorista) |
## 1. Hero Banner
Un banner de ancho completo que combina una imagen de fondo, una capa superpuesta, texto de titular y una llamada a la acción (CTA). Por lo general, este es el primer módulo en la página de marca (Brand Page).
### Multimedia
| Campo | ¿Obligatorio? | Restricciones |
| ----------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Imagen | Obligatorio | Formatos: `GIF`, `JPG`, `PNG`, `SVG` · Dimensiones mínimas: definidas por el minorista · Tamaño máximo de archivo: definido por el minorista |
| Texto alternativo | Obligatorio u Opcional (definido por el minorista) | Texto descriptivo para accesibilidad |
{% hint style="info" %}
La compatibilidad con vídeo está planificada, pero aún no está disponible. Actualmente solo se acepta imagen.
{% endhint %}
### Superposición
El minorista define si hay una capa superpuesta disponible en este módulo:
| Ajuste | Comportamiento |
| ---------------------- | ------------------------------------------------------------------- |
| `disabled` | Sin superposición: la imagen se muestra sin ninguna capa de color |
| `optional` (permitido) | La marca puede optar por activar o desactivar la superposición |
| `required` | La superposición se muestra siempre; la marca no puede desactivarla |
Cuando la superposición está activada, la marca selecciona el estilo de fondo. El minorista controla qué estilos se ofrecen:
| Estilo | Descripción |
| ---------- | -------------------------------------- |
| `gradient` | Degradado progresivo desde la imagen |
| `solid` | Bloque de color plano detrás del texto |
Ambas opciones pueden estar disponibles simultáneamente.
### Contenido de texto
| Campo | ¿Obligatorio? | Restricciones |
| ---------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------- |
| Titular | Obligatorio | Máx. de caracteres: definido por el minorista |
| Subtitular | Opcional | Máx. de caracteres: definido por el minorista |
| Texto del botón CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | Máx. de caracteres: definido por el minorista |
| URL del enlace del CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | Máx. de caracteres: definido por el minorista · Debe ser una URL válida |
{% hint style="info" %}
El texto del CTA y el enlace del CTA se configuran juntos. Si el CTA está desactivado, no aparece ninguno de los dos campos. No puede haber un enlace de CTA sin un botón de CTA, o viceversa.
{% endhint %}
### Alineación del texto
El minorista define qué opciones de alineación están disponibles. Valores posibles: `left`, `center`, `right`. La marca selecciona a partir del conjunto ofrecido.
## 2. Imagen
Una sola imagen con pie de foto opcional, texto alternativo y un destino de enlace.
### Carga de imagen
| Campo | ¿Obligatorio? | Restricciones |
| ----------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Imagen | Obligatorio | Formatos: `GIF`, `JPG`, `PNG`, `SVG` · Dimensiones mínimas: definidas por el minorista · Tamaño máximo de archivo: definido por el minorista |
| Texto alternativo | Obligatorio u Opcional (definido por el minorista) | Texto descriptivo para accesibilidad |
### Pie de foto
| Campo | ¿Obligatorio? | Restricciones |
| ----------- | ------------- | -------------------------------------------------------------- |
| Pie de foto | Opcional | Máx. de caracteres: definido por el minorista · Una sola línea |
{% hint style="info" %}
La disponibilidad del pie de foto la define el minorista. Si el minorista no ha habilitado los pies de foto, el campo no aparece.
{% endhint %}
### Enlace
Cada imagen puede vincularse opcionalmente a un destino. La marca selecciona uno de los tres tipos de enlace:
| Tipo de enlace | Descripción |
| -------------- | -------------------------------------------------------------------------------------------------------- |
| `image` | Sin enlace: la imagen no es interactiva |
| `url` | Navega a una URL personalizada cuando se selecciona |
| `product` | Navega a una página de detalles del producto específica (seleccionada mediante el selector de productos) |
### Líneas de texto adicionales
Algunos módulos de Imagen admiten líneas de texto etiquetadas adicionales junto a la imagen (por ejemplo, un título o una descripción que se muestra debajo o sobre la imagen). La disponibilidad, las etiquetas, los tamaños de fuente y si cada línea es obligatoria u opcional están definidos por el minorista.
## 3. Texto
Un módulo de texto flexible que admite variantes de una sola línea y de varias líneas.
### Variantes
El minorista define qué variante utiliza el módulo:
| Variante | Descripción |
| ---------- | ---------------------------------------------------------------------------------------------- |
| `headline` | Una sola línea destacada de texto: grande, en negrita |
| `tagline` | Una sola línea de soporte: más pequeña que el titular |
| `body` | Un solo bloque de texto principal: se muestra como un área de texto |
| `lines` | Varias líneas de texto con nombre, cada una con su propio tamaño de fuente y carácter opcional |
### Campos: variantes de una sola línea (`headline`, `tagline`, `body`)
| Campo | ¿Obligatorio? | Restricciones |
| ----- | ------------- | ------------------------------------------------------------------------- |
| Texto | Obligatorio | Máx. de caracteres: definido por el minorista (se aplica a todo el campo) |
### Campos: variante de varias líneas (`lines`)
Cada línea la define de forma independiente el minorista:
| Campo | ¿Obligatorio? | Restricciones |
| ----------------- | ------------------------------------------------------------- | ------------------------------------------------------------------- |
| Texto de la línea | Obligatorio u Opcional (por línea, definido por el minorista) | Máx. de caracteres: definido por el minorista (se aplica por línea) |
| URL de la línea | Opcional | Solo disponible en las líneas donde `isHyperlink` está habilitado |
### CTA
| Campo | ¿Obligatorio? | Restricciones |
| ---------------------- | --------------------------------------------------------------- | ----------------------- |
| Texto del botón CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | — |
| URL del enlace del CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | Debe ser una URL válida |
{% hint style="info" %}
El carácter opcional de la llamada a la acción (CTA) se aplica tanto al texto como a la URL conjuntamente. Si se deshabilita, no aparece ninguno de los campos.
{% endhint %}
### Alineación
Definida por el minorista. Valores posibles: `left`, `center`, `right`. Se aplica a todo el texto del módulo.
### Ancho máximo
El minorista establece una restricción de `maxWidth` que limita el ancho con el que se puede mostrar el bloque de texto (por ejemplo, `600px` or `80%`). Esta es una restricción de visualización, no una restricción de contenido.
## 4. Diseño dividido
Un contenedor de diseño que alberga dos o más módulos secundarios dispuestos en columnas o filas. Los elementos secundarios son módulos de **Imagen** y/o **Texto**. Se admite la anidación hasta una profundidad de 2, pero no se pueden anidar diseños divididos en el nivel raíz.
### Opciones de diseño
| Diseño | Opciones |
| --------- | --------------------------------------------------------------------------------------------------- |
| `columns` | Lado a lado. Proporción: `50:50`, `33:67`, or `67:33` (definido por el minorista cuáles se ofrecen) |
| `rows` | Apilado verticalmente |
### Espaciado
El espacio entre los elementos secundarios está definido por el minorista y se extrae de la escala de espaciado de la guía de estilo del minorista.
### Elementos secundarios
| Propiedad | Valor |
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| Tipos de elementos secundarios permitidos | `Image`, `Text` |
| Número de elementos secundarios | Definido por el minorista (`numChildren`) |
| Anidamiento | Un diseño dividido secundario puede contener a su vez módulos de `Image` y `Text` (profundidad máx.: 2) |
{% hint style="info" %}
Importante
No se puede colocar un Banner Hero, una Galería de imágenes, un Menú de filtros o una Cuadrícula de productos dentro de un Diseño dividido.
{% endhint %}
## 5. Galería de imágenes
Una cuadrícula de imágenes con un encabezado de sección opcional, una descripción y un CTA inferior.
### Encabezado de sección
| Campo | ¿Obligatorio? | Restricciones |
| ------------------------- | --------------------------------------------------------------- | ------------- |
| Título de la sección | Obligatorio, Opcional o Desactivado (definido por el minorista) | — |
| Descripción de la sección | Obligatorio, Opcional o Desactivado (definido por el minorista) | — |
### Diseño de la galería
Definido por el minorista por punto de interrupción:
| Propiedad | Descripción |
| ------------------- | ------------------------------------------------------------------------------------ |
| Columnas | Número de columnas en móvil, tableta y escritorio (definido por el minorista) |
| Altura de la imagen | Altura en píxeles o porcentaje por punto de interrupción (definida por el minorista) |
| Espacio | Espaciado entre imágenes (de la guía de estilo del minorista) |
### Imágenes
| Propiedad | Restricciones |
| ------------------------ | ------------------------------------------------------------------ |
| Mínimo de imágenes | Definido por el minorista (debe añadir al menos esta cantidad) |
| Máximo de imágenes | Definido por el minorista (no puede superar esta cantidad) |
| Formatos | `GIF`, `JPG`, `PNG`, `SVG` |
| Dimensiones mínimas | Definido por el minorista |
| Tamaño máximo de archivo | Definido por el minorista |
| Texto alternativo | Obligatorio u opcional por imagen (definido por el minorista) |
| Leyenda por imagen | Opcional, máx. de caracteres: definido por el minorista |
| Enlace por imagen | `image` (ninguno) · `url` · `product` — igual que el módulo Imagen |
### Líneas de texto adicionales por imagen
Igual que el módulo Imagen: etiquetas, tamaños de fuente y opcionalidad por línea definidos por el minorista.
### CTA (parte inferior de la galería)
| Campo | ¿Obligatorio? | Restricciones |
| ---------------------- | --------------------------------------------------------------- | ----------------------- |
| Texto del botón CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | — |
| URL del enlace del CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | Debe ser una URL válida |
| Alineación del CTA | `left`, `center`, `right` (definido por el minorista) | — |
## 6. Menú de filtros
Una barra de navegación horizontal de elementos de filtro etiquetados. Utilícela para permitir que los compradores filtren el contenido de la página (por ejemplo, por categoría o subcategoría).
### Elementos
| Propiedad | Restricciones |
| -------------------- | ------------------------------------------------------------------------------------------------ |
| Mínimo de elementos | Definido por el minorista (debe añadir al menos esta cantidad) |
| Máximo de elementos | Definido por el minorista (no puede superar esta cantidad) |
| Texto de la etiqueta | Máx. de caracteres: definido por el minorista |
| Valor del filtro | Valor interno utilizado por la lógica de filtrado. Máx. de caracteres: definido por el minorista |
### Alineación
Definida por el minorista. Valores posibles: `left`, `center`.
Los elementos de filtro se pueden reordenar. La etiqueta es lo que ve el comprador; el valor es lo que se aplica como filtro. No tienen por qué ser la misma cadena.
## 7. Cuadrícula de productos
Una cuadrícula seleccionada de productos elegidos por la marca, con encabezado de sección opcional, filtrado y CTA.
### Encabezado de sección
| Campo | ¿Obligatorio? | Restricciones |
| ------------------------- | --------------------------------------------------------------- | ------------- |
| Título de la sección | Obligatorio, Opcional o Desactivado (definido por el minorista) | — |
| Descripción de la sección | Obligatorio, Opcional o Desactivado (definido por el minorista) | — |
### Productos
| Propiedad | Restricciones |
| ---------------------- | ------------------------------------------------------------------------ |
| Mínimo de productos | Definido por el minorista |
| Máximo de productos | Definido por el minorista |
| Origen del producto | Seleccionado a través del selector de productos del catálogo de la marca |
| Orden de visualización | Arrastrar y soltar dentro del módulo |
### CTA de la tarjeta de producto
El minorista decide si aparece un botón CTA en cada tarjeta de producto:
| Ajuste | Comportamiento |
| ------------- | --------------------------------------------------------------------------------- |
| Deshabilitado | Sin botón CTA en las tarjetas de producto |
| Habilitado | Se muestra un botón CTA; el minorista establece el texto de la etiqueta del botón |
{% hint style="info" %}
Cuando está habilitado, todas las tarjetas de producto de la cuadrícula comparten la misma etiqueta de CTA (establecida por el minorista, no por la marca).
{% endhint %}
### Filtrado
El minorista puede habilitar opcionalmente el filtrado en la página para la cuadrícula de productos:
| Ajuste | Descripción |
| ------------------- | ---------------------------------------------------------------------------------- |
| `enabled` | Los compradores pueden filtrar la cuadrícula de productos |
| `showActiveFilter` | Destaca el filtro actualmente activo |
| `showResultCount` | Muestra cuántos resultados coinciden con el filtro activo |
| `emptyStateMessage` | Mensaje personalizado que se muestra cuando ningún producto coincide con el filtro |
{% hint style="info" %}
El filtrado funciona junto con un módulo Menú de filtros. Los valores de filtro establecidos en los productos deben coincidir con los valores de los elementos de filtro en el Menú de filtros.
{% endhint %}
### CTA (parte inferior de la cuadrícula)
| Campo | ¿Obligatorio? | Restricciones |
| ---------------------- | --------------------------------------------------------------- | ----------------------- |
| Texto del botón CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | — |
| URL del enlace del CTA | Obligatorio, Opcional o Desactivado (definido por el minorista) | Debe ser una URL válida |
| Alineación del CTA | `left`, `center`, `right` (definido por el minorista) | — |
## Referencia de restricción
### `ContentLimit` — modelo de restricción de campo de texto
| Valor | Significado |
| ----------------------- | ------------------------------------------------------------------------------- |
| `disabled` | El campo no está disponible en esta plantilla |
| `allowed` + `maxChars` | El campo es opcional; si se rellena, no puede superar los `maxChars` caracteres |
| `required` + `maxChars` | El campo debe completarse; no puede superar los `maxChars` caracteres |
### `ImageConstraints` — modelo de restricción de carga de imágenes
| Propiedad | Descripción |
| ----------------- | ----------------------------------------------------------------------------------------- |
| `altOptionality` | `required` or `allowed` |
| `minWidth` | Ancho mínimo de la imagen en píxeles (opcional) |
| `minHeight` | Alto mínimo de la imagen en píxeles (opcional) |
| `maxFileSizeMb` | Tamaño máximo de archivo en megabytes (opcional) |
| `acceptedFormats` | Subconjunto de `GIF`, `JPG`, `PNG`, `SVG` (opcional: se aceptan todos si no se establece) |
### `CtaConfig` — modelo de restricción de llamada a la acción
| Propiedad | Descripción |
| ------------- | ----------------------------------- |
| `optionality` | `required` · `allowed` · `disabled` |
| `alignment` | `left` · `center` · `right` |
## Qué está definido por el minorista frente a lo fijo
| Configuración | El minorista establece esto | Fijado por la plataforma |
| --------------------------------------------------------------------- | :------------------------------------------------: | :--------------------------------: |
| Si un módulo se puede omitir | ✅ | |
| Límites máximos de caracteres | ✅ | |
| Dimensiones mínimas de imagen y tamaño máximo de archivo | ✅ | |
| Qué formatos de imagen se aceptan | ✅ (subconjunto de los admitidos por la plataforma) | |
| Si la llamada a la acción es obligatoria, opcional o está desactivada | ✅ | |
| Si la superposición está disponible (Hero) | ✅ | |
| Qué opciones de alineación de texto se ofrecen | ✅ | |
| Opciones de proporción de columnas (Split Layout) | ✅ | |
| Cantidad mínima/máxima de imágenes (Galería de imágenes) | ✅ | |
| Cantidad mínima/máxima de productos (Cuadrícula de productos) | ✅ | |
| Tipos de módulos disponibles | | ✅ (7 tipos, fijo) |
| Tipo de medio admitido (Hero) | | ✅ (solo imagen; video planificado) |
| Tipos de enlace para imágenes | | ✅ (imagen · url · producto) |
| Profundidad máxima de anidamiento de Split Layout | | ✅ (profundidad 2) |
| Tipos de hijos permitidos para Split Layout | | ✅ (solo Imagen y 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/es/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.