Introduction

Commerce Display Grid Duet is an in-grid commerce display unit combining branding assets with a consecutive product tile.

49db03b643b5b5ec9c814821f8acdd5165c0c9bd66e4c3abfcf957a6ab463ee6 image

Rendering Examples

CodePen

Desktop

Mobile

Response Keys

`Name (API key)`	Parameters	Description
`background_image`	required:`true` maxBytes:`307200` extensions:`[“jpg, png, gif”]` width:`1500` height:`1500` safeZoneWidth:`540`safeZoneheight:`750`	Background image that can be used for desktop and mobile (mobile field can be hidden through override if needed)
`background_image_alt_text`	required:`true` maxChars:`120`	Text description of the Desktop background image for ADA compliancy purposes.
`mobile_background_image`	required:`true` maxBytes:`307200` extensions:`[“jpg, png, gif”]` width:`1280` height:`400`	Background image of mobile ad
`mobile_background_image_alt_text`	required:`true` maxChars:`120`	Text description of the Desktop background image for ADA compliancy purposes.
`redirect_url`	required:`true`	URL user is redirected to upon clicking on CTA button
`redirect_target`	required:`tru`e Option 1:`_self` Option 2:`_blank`	Defines where the link opens: same tab (`_self`) or new tab (`_blank`)
`redirect_url_app`	required:`true`	App URL user is redirected to upon clicking on CTA button from App environment
`cta_text`	required:`true` maxChars:`20`	Text of CTA button
`cta_text_color`	default:`#FFFFFF`	Text color of CTA button
`cta_color`	default:`#CCCCCC`	CTA button background color
`legal_text`	maxChars:`90`	Legal text (Desktop: next to CTA; Mobile/App: always visible)
`more_info_text`	maxChars:`180`	Legal text (Desktop: on hover “i” icon; Mobile/App: always visible)
`color_mode`	default:`lightmode` Option 1:`lightcommand` Option 2:`darkcommand`	Defines light or dark display mode for better viewing experience

Response Example

{
  "status": "OK",
  "placements": [
    {
      "viewHome_API_desktop-commerce-display-grid-duet": [
        {
          "format": "CDGD",
          "products": [
            {
              "ProductName": "RMP Product",
              "ProductId": "134679258",
              "ProductPage": "//b.us5.us.criteo.com/...",
              "Image": "https://rmp.us/static/wlpdatas/display/000/274/374/274cv3749.jpg",
              "Rating": "-1",
              "Price": "8.49",
              "ComparePrice": "8.49",
              "Shipping": "0",
              "ClientAdvertiserId": "123",
              "AdvertiserId": "431248565",
              "RenderingAttributes": "{\"brand\":\"brandname\",...}",
              "OnLoadBeacon": "//b.us5.us.criteo.com/...",
              "OnViewBeacon": "//b.us5.us.criteo.com/...",
              "OnClickBeacon": "//b.us5.us.criteo.com/...",
              "OnBasketChangeBeacon": "//b.us5.us.criteo.com/...",
              "OnWishlistBeacon": "//b.us5.us.criteo.com/..."
            }
          ],
          "products_order": [
            {
              "products": ["134679258"],
              "isMandatory": false
            }
          ],
          "rendering": {
            "background_image": "//assets.example.com/images/desktop.jpg",
            "background_image_alt_text": "alt text for desktop image",
            "mobile_background_image": "//assets.example.com/images/mobile.jpg",
            "mobile_background_image_alt_text": "alt text for mobile image",
            "redirect_url": "https://example.com/product",
            "redirect_target": "_blank",
            "redirect_url_app": "app://example/product",
            "cta_text": "Buy Now",
            "cta_text_color": "#FFFFFF",
            "cta_color": "#CCCCCC",
            "legal_text": "©2025 Example Brand. Terms apply.",
            "more_info_text": "More details available on our site.",
            "color_mode": "lightcommand"
          },
          "OnLoadBeacon": "//b.us5.us.criteo.com/...",
          "OnViewBeacon": "//b.us5.us.criteo.com/...",
          "OnClickBeacon": "//b.us5.us.criteo.com/...",
          "OnFileClickBeacon": "//b.us5.us.criteo.com/...",
          "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/..."
        }
      ]
    }
  ]
}

Specifications

General

The Commerce Display Grid Duet unit is composed of two different parts:

A branding zone,
A product zone.

The format must be displayed on the grid page. The format must be able to host up to 5 different products. The branding zone size should be equal to the product tile size and will redirect to 1 URL. Products will redirect to the respective PDP. When a website is responsive:

both tiles must always be at the same size
if in list view or single column grid, format will change to the Alternative Mobile Layout.

Asset Sizes and Behavior

Background Image Specifications

Dimensions
The background image asset is 1500x1500 pixels. Device Support
This asset can cover both desktop and mobile/APP placements based on the detected device and layout. It will not render at its original size but instead scaled down to accommodate double density screens (or higher) for improved quality. Alignment and Cropping
There is a minimum cropping area of the image asset called the Retailer safety zone. This Retailer safety zone will change with each preset scaling of the asset. Both Brand safety zone and component placeholders are centered in the image, therefore the background image needs to be centered within the branding zone and cropped on all sides.

3c703c914f5b37a16f4adb880a0f263b917ea27916eff3e1eb6ae2ebdfb06219 251211_ _Ingrid_Web_Asset

Brand Safety Zone The Brand safety zone is the area that is always guaranteed to be visible and unobstructed. The brand will design all their main messaging and critical visuals within this area. Component Placeholders
Two equal internal placeholders are used for legal text and a call-to-action (CTA) button. These are treated as margins and ensure no overlap with the Brand safety zone. Scaling Rules
Depending on the device and grid size, the background image is displayed at one of the following scales:

26% (390×390),
33.33% (500×500),
or 50% (750×750).

54b9be97080b944dcd1e3a1a6b2532d0ad6d879efcd0026fbc12d156ee6d1efb 251118_ _Ingrid_Image_behaviour

Grid-Based Scaling Presets

These presets define the image scale based on standard grid tile dimensions: Mobile Grid When the device is mobile and the tile width is between 140 and 180 pixels, and the height is between 257 and 390 pixels:

the image is displayed at 26% scale (390 by 390 pixels).
The Retailer safety zone is 140 px by 258 px.
- Brand safety zone is 140 px by 195 px.
- Each component placeholder is 140 px by 31 px.

Regular Grid For tile widths between 180 and 500 pixels and heights between 300 and 500 pixels:

the image is displayed at approximately 33% scale (500 by 500 pixels).
The Retailer safety zone is 180 px by 330 px.
- Brand safety zone is 180 px by 250 px.
- Each component placeholder: 180 px by 40 px.

Large Grid

When the tile width is greater than 270 pixels and the height is greater than 500 pixels
- the image is displayed at 50% scale (750 by 750 pixels).
- The Retailer safety zone is 270 px by 495 px.
  - Brand safety zone is 270 px by 375 px.
  - Each component placeholder: 270 px by 40 px.

Flexible Scaling Rules

In specific layout scenarios, the image scales differently depending on the aspect ratio and size constraints.

Long and Narrow Grids

The image scales to fit the tile height if all the following conditions are true:

Grid width is between 180 and 270 pixels.
Grid height is greater than 500 pixels.
The height-to-width ratio is less than 2.78.

Wide or Double-Tile Grids

The image scales to fit the tile width if all the following conditions are true:

Grid width is greater than 500 pixels.
Grid height is greater than 500 pixels (minimum 332 pixels).
The width-to-height ratio is less than or equal to 1.5.

5dce571406dfd04820706483978de937ad27efc18c8bcb9ddebad63695935232 251127_ _Ingrid_Image_behaviour_2

Non-compliant Tile Dimension

If the grid tiles do not match any of the above scenarios, other solutions can be determined and implemented as long as the Retailer safety zone and Brand safety zone is respected within the image.

Alternative Mobile Layout

This layout variant is optimized for mobile devices and single column product grids/lists and includes a horizontal product slider beneath a branded background area.

Background Image

The background image size is 1280 by 400 pixels.
It is divided into two sections:
- A branding zone at the top
- A product zone positioned below the branding zone
The image is fully responsive:
- It scales proportionally based on the width of its parent container.
- As the width decreases, the height decreases proportionally.
- The image is never cropped.

Product Slider Behavior

Products are displayed in a horizontally scrollable slider.
Navigation dots appear below the slider to indicate the user’s current position:
- One dot is shown for each product.
- The dot representing the visible product is darker to show its active status.
- If there is only one product, no dots are displayed.

The Commerce Display Grid Duet dimensions (alternative horizontal mobile layout)

Available Options

The available options are adding a CTA, a legal text, a “more info” text as well as color modes.

Example of the Commerce Display Grid Duet (desktop) with CTA, legal text and "more info" text

Redirection

When a user clicks on the branding zone (anywhere on banner image) or the CTA button, they will be taken to the redirection link defined within the response. There are two possible redirection options:

Self (open in the same tab)
Blank (open in a new tab)

Call to Action (CTA)

A CTA button can be added as an option. If enabled, it will appear at the bottom of the branding zone or above the legal text. When the user clicks on button, they will be redirected to the link.

CTA example for the Commerce Display Grid Duet format

Legal Text

Legal text can be added as an option and is always visible (90 characters maximum, including spaces).

More info

More info text can be added as an option (180 characters maximum, including spaces). If the option is enabled:

While hovering over the branding zone, an (i) icon is displayed in the top-left corner.
When hovering the (i) icon, the “More info” text is displayed on top of the branding zone.
On mobile, it is always visible or displayed when the user clicks on “See more”.

345a24e43dbb8f571ee745c0e087beaccf6318e0b27b28dcfa53c2fc4bfa36ac CD_Grid_Duet_ _More_info

"More Info" with CTA and legal text example for the Commerce Display Grid Duet format (mobile)

Color Mode

The advertiser can choose between two preset color modes to ensure the best contrast between text options and the branding zone. Options appear while hovering over the Branding Zone.

Light mode

Background color: #FFFFFF 80%
Icon color: #6A6A6A
Legal text color: #000000

Dark mode

Background color: 6A6A6A 80%
Icon color: #FFFFFF
Legal text color: #FFFFFF

da5983165c56e517c393b37aab4f4c71a0f897278798c51a5596b0245fb74d37 260112_CD_Grid_Duet_ _Color_mode

Technical Details

Responsive

The rendering is based on the grid of the page and detected device.

Styling

Element styles, such as fonts, button corner radius, and navigation controls, are determined by the retailer and the following details shows our default styles. However, button and text area dimensions must be adhered to so that the Retailer Safety Zone, Brand Safety Zone and component placeholders are respected.

Call-to-Action (CTA) Button

Max characters: 25
Size: 150 by 30 pixels
Font: Roboto Regular, 12 pixels
Margin
- Grid layout: 5 pixels below button
- Alternative Mobile Layout: 10 pixels below button

Legal Text and More Info

Desktop

Detail	Legal text	More info
Height	40 pixels	Dynamic, based on text length
Padding	5 pixels on both the left and right sides of the tile	8 pixels, all around
Font	Roboto Regular, 12 pixels	Roboto Regular, 12 pixels
Max characters	90	180

Background: Displayed over a colored layer (the layer color adapts based on color mode)

Dimensions and spacings for the Commerce Display Grid Duet format (Web)

Alternative Mobile Layout

Legal and More info text will be displayed together
“See less” / “See more” option for expanded or contracted view of text
Padding: 8 pixels, all sides
Font: same as Grid layout
Max characters: same as Grid layout
Background: Displayed over a colored layer (the layer color adapts based on color mode)

Dimensions and spacing for the Commerce Display Grid Duet Format (Mobile)

Layout and Borders

Grid layout (desktop and mobile): 1px border surrounds both the branding and product zones.
Alternative Mobile Layout: 2px border surrounds the full creative, including product listings.
- Padding: 10 pixels of spacing around each product listing.