> 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/brand-pages/brand-page-retailer-integration-guide/module-capabilities.md).
# Module Capabilities
This document describes every available module type, its fields, constraints, and configuration options. Use it as the retailer-facing reference for what each module supports and what brands can configure when creating Brand Page content.
***
## Module types at a glance
| Module | Purpose |
| ------------- | ----------------------------------------------------------------- |
| Hero Banner | Full-width media with headline, subtitle, and CTA |
| Image | Single image with optional caption, alt text, and link |
| Text | Headline, tagline, body copy, or custom multi-line text |
| Split Layout | Two-column or stacked layout containing Image and/or Text modules |
| Image Gallery | Grid of images with optional section title, description, and CTA |
| Filter Menu | Navigation bar of labelled filter items |
| Product Grid | Curated product grid with optional filtering and CTA |
## Common fields (all modules)
Every module shares the following system-managed fields. Brands do not set these directly.
| Field | Description |
| --------------------------- | ------------------------------------------------------------------------- |
| `id` | Auto-generated unique identifier |
| `brandPageModuleTemplateId` | Links content to the retailer's module template |
| `order` | Display position on the page (managed via drag-and-drop) |
| `optionality` | Whether the whole module is required or can be skipped (retailer-defined) |
## 1. Hero Banner
A full-width banner that combines a background image, overlay, headline text, and a call-to-action. This is typically the first module on the Brand Page.
### Media
| Field | Required? | Constraints |
| -------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Image | Required | Formats: `GIF`, `JPG`, `PNG`, `SVG` · Min dimensions: retailer-defined · Max file size: retailer-defined |
| Alt text | Required or Optional (retailer-defined) | Descriptive text for accessibility |
{% hint style="info" %}
Video support is planned but not yet available. Only image is currently accepted.
{% endhint %}
### Overlay
The retailer defines whether an overlay is available on this module:
| Setting | Behavior |
| -------------------- | ------------------------------------------------------- |
| `disabled` | No overlay — the image is shown without any color layer |
| `optional` (allowed) | Brand can choose to enable or disable the overlay |
| `required` | Overlay is always shown; the brand cannot turn it off |
When the overlay is enabled, the brand selects the background style. The retailer controls which styles are offered:
| Style | Description |
| ---------- | -------------------------------- |
| `gradient` | Graduated fade from the image |
| `solid` | Flat color block behind the text |
Both options can be made available simultaneously.
### Text content
| Field | Required? | Constraints |
| --------------- | -------------------------------------------------- | ------------------------------------------------- |
| Headline | Required | Max chars: retailer-defined |
| Subheadline | Optional | Max chars: retailer-defined |
| CTA button text | Required, Optional, or Disabled (retailer-defined) | Max chars: retailer-defined |
| CTA link URL | Required, Optional, or Disabled (retailer-defined) | Max chars: retailer-defined · Must be a valid URL |
{% hint style="info" %}
The CTA text and CTA link are configured together. If CTA is disabled, neither field appears. You cannot have a CTA link without a CTA button, or vice versa.
{% endhint %}
### Text alignment
The retailer defines which alignment options are available. Possible values: `left`, `center`, `right`. The brand selects from the offered set.
## 2. Image
A single image with optional caption, alt text, and a link target.
### Image upload
| Field | Required? | Constraints |
| -------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Image | Required | Formats: `GIF`, `JPG`, `PNG`, `SVG` · Min dimensions: retailer-defined · Max file size: retailer-defined |
| Alt text | Required or Optional (retailer-defined) | Descriptive text for accessibility |
### Caption
| Field | Required? | Constraints |
| ------- | --------- | ----------------------------------------- |
| Caption | Optional | Max chars: retailer-defined · Single line |
{% hint style="info" %}
Caption availability is retailer-defined. If the retailer has not enabled captions, the field does not appear.
{% endhint %}
### Link
Each image can optionally link to a destination. The brand selects one of three link types:
| Link type | Description |
| --------- | ------------------------------------------------------------------------- |
| `image` | No link — the image is non-interactive |
| `url` | Navigates to a custom URL when selected |
| `product` | Navigates to a specific product detail page (selected via product picker) |
### Additional text lines
Some Image modules support extra labelled text lines alongside the image (for example, a title or description rendered below or over the image). Availability, labels, font sizes, and whether each line is required or optional are all retailer-defined.
## 3. Text
A flexible text module that supports single-line and multi-line variants.
### Variants
The retailer defines which variant the module uses:
| Variant | Description |
| ---------- | ---------------------------------------------------------------------- |
| `headline` | A single prominent line of text — large, bold |
| `tagline` | A single supporting line — smaller than headline |
| `body` | A single block of body copy — renders as a text area |
| `lines` | Multiple named text lines, each with its own font size and optionality |
### Fields — single-line variants (`headline`, `tagline`, `body`)
| Field | Required? | Constraints |
| ----- | --------- | -------------------------------------------------------- |
| Text | Required | Max chars: retailer-defined (applies to the whole field) |
### Fields — multi-line variant (`lines`)
Each line is defined independently by the retailer:
| Field | Required? | Constraints |
| --------- | ------------------------------------------------- | ------------------------------------------------------ |
| Line text | Required or Optional (per line, retailer-defined) | Max chars: retailer-defined (applies per line) |
| Line URL | Optional | Only available on lines where `isHyperlink` is enabled |
### CTA
| Field | Required? | Constraints |
| --------------- | -------------------------------------------------- | ------------------- |
| CTA button text | Required, Optional, or Disabled (retailer-defined) | — |
| CTA link URL | Required, Optional, or Disabled (retailer-defined) | Must be a valid URL |
{% hint style="info" %}
CTA optionality applies to both the text and URL together. If disabled, neither field appears.
{% endhint %}
### Alignment
Retailer-defined. Possible values: `left`, `center`, `right`. Applies to all text in the module.
### Max width
The retailer sets a `maxWidth` constraint that limits how wide the text block can render (for example, `600px` or `80%`). This is a display constraint, not a content constraint.
## 4. Split Layout
A layout container that holds two or more child modules arranged in columns or rows. The children are **Image** and/or **Text** modules. Nesting is supported up to depth 2, but you cannot nest Split Layouts at the root level.
### Layout options
| Layout | Options |
| --------- | -------------------------------------------------------------------------------------- |
| `columns` | Side-by-side. Ratio: `50:50`, `33:67`, or `67:33` (retailer-defined which are offered) |
| `rows` | Stacked vertically |
### Spacing
The gap between children is retailer-defined, drawn from the retailer's style guide spacing scale.
### Children
| Property | Value |
| ------------------- | --------------------------------------------------------------------------------- |
| Allowed child types | `Image`, `Text` |
| Number of children | Retailer-defined (`numChildren`) |
| Nesting | A child Split Layout can itself contain `Image` and `Text` modules (max depth: 2) |
{% hint style="info" %}
Important
You cannot place a Hero Banner, Image Gallery, Filter Menu, or Product Grid inside a Split Layout.
{% endhint %}
## 5. Image Gallery
A grid of images with an optional section header, description, and a bottom CTA.
### Section header
| Field | Required? | Constraints |
| ------------------- | -------------------------------------------------- | ----------- |
| Section title | Required, Optional, or Disabled (retailer-defined) | — |
| Section description | Required, Optional, or Disabled (retailer-defined) | — |
### Gallery layout
Retailer-defined per breakpoint:
| Property | Description |
| ------------ | ------------------------------------------------------------------- |
| Columns | Number of columns on mobile, tablet, and desktop (retailer-defined) |
| Image height | Pixel or percentage height per breakpoint (retailer-defined) |
| Gap | Spacing between images (from retailer style guide) |
### Images
| Property | Constraints |
| ----------------- | --------------------------------------------------------- |
| Minimum images | Retailer-defined (must add at least this many) |
| Maximum images | Retailer-defined (cannot exceed this count) |
| Formats | `GIF`, `JPG`, `PNG`, `SVG` |
| Min dimensions | Retailer-defined |
| Max file size | Retailer-defined |
| Alt text | Required or Optional per image (retailer-defined) |
| Caption per image | Optional, max chars: retailer-defined |
| Link per image | `image` (none) · `url` · `product` — same as Image module |
### Additional text lines per image
Same as the Image module — retailer-defined labels, font sizes, and optionality per line.
### CTA (bottom of gallery)
| Field | Required? | Constraints |
| --------------- | -------------------------------------------------- | ------------------- |
| CTA button text | Required, Optional, or Disabled (retailer-defined) | — |
| CTA link URL | Required, Optional, or Disabled (retailer-defined) | Must be a valid URL |
| CTA alignment | `left`, `center`, `right` (retailer-defined) | — |
## 6. Filter Menu
A horizontal navigation bar of labelled filter items. Use it to let shoppers filter content on the page (for example, by category or subcategory).
### Items
| Property | Constraints |
| ------------- | ----------------------------------------------------------------------- |
| Minimum items | Retailer-defined (must add at least this many) |
| Maximum items | Retailer-defined (cannot exceed this count) |
| Label text | Max chars: retailer-defined |
| Filter value | Internal value used by the filtering logic. Max chars: retailer-defined |
### Alignment
Retailer-defined. Possible values: `left`, `center`.
Filter items can be reordered. The label is what the shopper sees; the value is what gets applied as a filter. They do not have to be the same string.
## 7. Product Grid
A curated grid of products selected by the brand, with optional section header, filtering, and CTA.
### Section header
| Field | Required? | Constraints |
| ------------------- | -------------------------------------------------- | ----------- |
| Section title | Required, Optional, or Disabled (retailer-defined) | — |
| Section description | Required, Optional, or Disabled (retailer-defined) | — |
### Products
| Property | Constraints |
| ---------------- | ---------------------------------------------------- |
| Minimum products | Retailer-defined |
| Maximum products | Retailer-defined |
| Product source | Selected via product picker from the brand's catalog |
| Display order | Drag-and-drop within the module |
### Product card CTA
The retailer decides whether a CTA button appears on each product card:
| Setting | Behavior |
| -------- | -------------------------------------------------------------- |
| Disabled | No CTA button on product cards |
| Enabled | A CTA button is shown; the retailer sets the button label text |
{% hint style="info" %}
When enabled, all product cards in the grid share the same CTA label (set by the retailer, not the brand).
{% endhint %}
### Filtering
The retailer can optionally enable on-page filtering for the Product Grid:
| Setting | Description |
| ------------------- | ------------------------------------------------------ |
| `enabled` | Shoppers can filter the product grid |
| `showActiveFilter` | Highlights the currently active filter |
| `showResultCount` | Displays how many results match the active filter |
| `emptyStateMessage` | Custom message shown when no products match the filter |
{% hint style="info" %}
Filtering works in conjunction with a Filter Menu module. Filter values set on products must match filter item values in the Filter Menu.
{% endhint %}
### CTA (bottom of grid)
| Field | Required? | Constraints |
| --------------- | -------------------------------------------------- | ------------------- |
| CTA button text | Required, Optional, or Disabled (retailer-defined) | — |
| CTA link URL | Required, Optional, or Disabled (retailer-defined) | Must be a valid URL |
| CTA alignment | `left`, `center`, `right` (retailer-defined) | — |
## Constraint reference
### `ContentLimit` — text field constraint model
| Value | Meaning |
| ----------------------- | ----------------------------------------------------------------- |
| `disabled` | Field is not available in this template |
| `allowed` + `maxChars` | Field is optional; if filled, cannot exceed `maxChars` characters |
| `required` + `maxChars` | Field must be filled in; cannot exceed `maxChars` characters |
### `ImageConstraints` — image upload constraint model
| Property | Description |
| ----------------- | ------------------------------------------------------------------------- |
| `altOptionality` | `required` or `allowed` |
| `minWidth` | Minimum image width in pixels (optional) |
| `minHeight` | Minimum image height in pixels (optional) |
| `maxFileSizeMb` | Maximum file size in megabytes (optional) |
| `acceptedFormats` | Subset of `GIF`, `JPG`, `PNG`, `SVG` (optional — all accepted if not set) |
### `CtaConfig` — call-to-action constraint model
| Property | Description |
| ------------- | ----------------------------------- |
| `optionality` | `required` · `allowed` · `disabled` |
| `alignment` | `left` · `center` · `right` |
## What is retailer-defined vs. fixed
| Configuration | Retailer sets this | Fixed by the platform |
| ---------------------------------------------- | :------------------------------: | :---------------------------: |
| Whether a module is skippable | ✅ | |
| Max character limits | ✅ | |
| Image min dimensions and max file size | ✅ | |
| Which image formats are accepted | ✅ (subset of platform-supported) | |
| Whether CTA is required, optional, or disabled | ✅ | |
| Whether overlay is available (Hero) | ✅ | |
| Which text alignment options are offered | ✅ | |
| Column ratio options (Split Layout) | ✅ | |
| Min/max image count (Image Gallery) | ✅ | |
| Min/max product count (Product Grid) | ✅ | |
| Available module types | | ✅ (7 types, fixed) |
| Supported media type (Hero) | | ✅ (image only; video planned) |
| Link types for images | | ✅ (image · url · product) |
| Split Layout max nesting depth | | ✅ (depth 2) |
| Split Layout allowed child types | | ✅ (Image and Text only) |
---
# 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/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.