> For the complete documentation index, see [llms.txt](https://developers.citrusad.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.citrusad.com/integration/reference/module-capabilities.md). # Module Capabilities {% hint style="info" %} Epsilon Retail Media's documentation is now centralized with our knowledgebase! For up to date guides, please view [this page](https://help.citrusad.com/retail-media-interface/integration/brand-pages/brand-page-retailer-integration-guide/module-capabilities) in the new Integration APIs space of our documentation. {% endhint %} 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) |