> ## Documentation Index
> Fetch the complete documentation index at: https://developers.criteo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Commerce Display Grid Duet

> This guide provides the specifications and technical details for the Commerce Display Grid Duet format rendering.

# Introduction

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

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/49db03b643b5b5ec9c814821f8acdd5165c0c9bd66e4c3abfcf957a6ab463ee6-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=ee59e3598a4392d5b05c9f0718320aa1" alt="49db03b643b5b5ec9c814821f8acdd5165c0c9bd66e4c3abfcf957a6ab463ee6 image" width="1059" height="1602" data-path="images/retailer-integration/docs/49db03b643b5b5ec9c814821f8acdd5165c0c9bd66e4c3abfcf957a6ab463ee6-image.png" />
</Frame>

***

# Rendering Examples

## CodePen

<iframe height="400" style={{ width: "100%", border: "none" }} src="https://codepen.io/demo_placement/embed/PwzzKZQ" loading="lazy" allowfullscreen />

## Desktop

<Frame caption="Rendering example of the Commerce Display Grid Duet format for desktop">
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/8c3665f5e90d71e5cd4ea9596bae34df66456a0fb51d6eb5f97116a893a88e41-image.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=12059e4f4dbcceac885261092e4bbb39" alt="Rendering example of the Commerce Display Grid Duet format for desktop" width="1440" height="1024" data-path="images/retailer-integration/docs/8c3665f5e90d71e5cd4ea9596bae34df66456a0fb51d6eb5f97116a893a88e41-image.png" />
</Frame>

## Mobile

<Frame caption="Rendering example for the Commerce Display Grid Duet format (mobile, vertical and horizontal options)">
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/fd42487dbba0bc738a562bab3ee33c29c29b301d34346d5bf32c03bce1f09ca4-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=2ef7ed81fd6d06f5858125b1d5ba82ea" alt="Rendering example for the Commerce Display Grid Duet format (mobile, vertical and horizontal options)" width="1750" height="1688" data-path="images/retailer-integration/docs/fd42487dbba0bc738a562bab3ee33c29c29b301d34346d5bf32c03bce1f09ca4-image.png" />
</Frame>

***

# Response Keys

<table>
  <thead>
    <tr>
      <th>
        <p>
          <code>
            Name (API key)
          </code>
        </p>
      </th>

      <th>
        <p>
          Parameters
        </p>
      </th>

      <th>
        <p>
          Description
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          <code>
            background\_image
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            true
          </code>
        </p>

        <p>
          maxBytes:

          <code>
            307200
          </code>
        </p>

        <p>
          extensions:

          <code>
            \["jpg, png, gif"]
          </code>
        </p>

        <p>
          width:

          <code>
            1500
          </code>
        </p>

        <p>
          height:

          <code>
            1500
          </code>
        </p>

        <p>
          safeZoneWidth:

          <code>
            540
          </code>

          safeZoneheight:

          <code>
            750
          </code>
        </p>
      </td>

      <td>
        <p>
          Background image that can be used for desktop and mobile (mobile field can be hidden through override if needed)
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            background\_image\_alt\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            true
          </code>
        </p>

        <p>
          maxChars:

          <code>
            120
          </code>
        </p>
      </td>

      <td>
        <p>
          Text description of the Desktop background image for ADA compliancy purposes.
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            mobile\_background\_image
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            true
          </code>
        </p>

        <p>
          maxBytes:

          <code>
            307200
          </code>
        </p>

        <p>
          extensions:

          <code>
            \["jpg, png, gif"]
          </code>
        </p>

        <p>
          width:

          <code>
            1280
          </code>
        </p>

        <p>
          height:

          <code>
            400
          </code>
        </p>
      </td>

      <td>
        <p>
          Background image of mobile ad
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            mobile\_background\_image\_alt\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            true
          </code>
        </p>

        <p>
          maxChars:

          <code>
            120
          </code>
        </p>
      </td>

      <td>
        <p>
          Text description of the Desktop background image for ADA compliancy purposes.
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            redirect\_url
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            true
          </code>
        </p>
      </td>

      <td>
        <p>
          URL user is redirected to upon clicking on CTA button
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            redirect\_target
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            tru
          </code>

          e
        </p>

        <p>
          Option 1:

          <code>
            \_self
          </code>
        </p>

        <p>
          Option 2:

          <code>
            \_blank
          </code>
        </p>
      </td>

      <td>
        <p>
          Defines where the link opens: same tab (

          <code>
            \_self
          </code>

          ) or new tab (

          <code>
            \_blank
          </code>

          )
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            redirect\_url\_app
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            true
          </code>
        </p>
      </td>

      <td>
        <p>
          App URL user is redirected to upon clicking on CTA button from App environment
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            cta\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          required:

          <code>
            true
          </code>
        </p>

        <p>
          maxChars:

          <code>
            20
          </code>
        </p>
      </td>

      <td>
        <p>
          Text of CTA button
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            cta\_text\_color
          </code>
        </p>
      </td>

      <td>
        <p>
          default:

          <code>
            \#FFFFFF
          </code>
        </p>
      </td>

      <td>
        <p>
          Text color of CTA button
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            cta\_color
          </code>
        </p>
      </td>

      <td>
        <p>
          default:

          <code>
            \#CCCCCC
          </code>
        </p>
      </td>

      <td>
        <p>
          CTA button background color
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            legal\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          maxChars:

          <code>
            90
          </code>
        </p>
      </td>

      <td>
        <p>
          Legal text (Desktop: next to CTA; Mobile/App: always visible)
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            more\_info\_text
          </code>
        </p>
      </td>

      <td>
        <p>
          maxChars:

          <code>
            180
          </code>
        </p>
      </td>

      <td>
        <p>
          Legal text (Desktop: on hover “i” icon; Mobile/App: always visible)
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          <code>
            color\_mode
          </code>
        </p>
      </td>

      <td>
        <p>
          default:

          <code>
            lightmode
          </code>
        </p>

        <p>
          Option 1:

          <code>
            lightcommand
          </code>
        </p>

        <p>
          Option 2:

          <code>
            darkcommand
          </code>
        </p>
      </td>

      <td>
        <p>
          Defines light or dark display mode for better viewing experience
        </p>
      </td>
    </tr>
  </tbody>
</table>

***

# Response Example

```json expandable theme={null}
{
  "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.

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/3c703c914f5b37a16f4adb880a0f263b917ea27916eff3e1eb6ae2ebdfb06219-251211_-_Ingrid_Web_Asset.jpg?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=77474c5cc0bc1285a1424a1b92afb43b" alt="3c703c914f5b37a16f4adb880a0f263b917ea27916eff3e1eb6ae2ebdfb06219 251211_ _Ingrid_Web_Asset" width="750" height="729" data-path="images/retailer-integration/docs/3c703c914f5b37a16f4adb880a0f263b917ea27916eff3e1eb6ae2ebdfb06219-251211_-_Ingrid_Web_Asset.jpg" />
</Frame>

**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).

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/54b9be97080b944dcd1e3a1a6b2532d0ad6d879efcd0026fbc12d156ee6d1efb-251118_-_Ingrid_Image_behaviour.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=af3ccd624df05def80f57337eef7e343" alt="54b9be97080b944dcd1e3a1a6b2532d0ad6d879efcd0026fbc12d156ee6d1efb 251118_ _Ingrid_Image_behaviour" width="750" height="331" data-path="images/retailer-integration/docs/54b9be97080b944dcd1e3a1a6b2532d0ad6d879efcd0026fbc12d156ee6d1efb-251118_-_Ingrid_Image_behaviour.png" />
</Frame>

<br />

***

### 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.

<Frame caption="Retailer Safety zone in-grid - Dimensions for Mobile, Regular and Large grid tiles">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/57961de7daa81dbd79750e765f06ddef4731141e83bbaead93f44f5ee610eebc-251118_-_Ingrid_Image_behaviour-v2.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=5aca5677a88db87e75192e6cac73cf7b" alt="Retailer Safety zone in-grid - Dimensions for Mobile, Regular and Large grid tiles" width="953" height="525" data-path="images/retailer-integration/docs/57961de7daa81dbd79750e765f06ddef4731141e83bbaead93f44f5ee610eebc-251118_-_Ingrid_Image_behaviour-v2.png" />
</Frame>

***

### 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.

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/5dce571406dfd04820706483978de937ad27efc18c8bcb9ddebad63695935232-251127_-_Ingrid_Image_behaviour_2.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=00b94e2925ca33de155e103bee8060d7" alt="5dce571406dfd04820706483978de937ad27efc18c8bcb9ddebad63695935232 251127_ _Ingrid_Image_behaviour_2" width="953" height="595" data-path="images/retailer-integration/docs/5dce571406dfd04820706483978de937ad27efc18c8bcb9ddebad63695935232-251127_-_Ingrid_Image_behaviour_2.png" />
</Frame>

<br />

#### 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.

<Frame caption="The Commerce Display Grid Duet dimensions (alternative horizontal mobile layout)">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/5b6e13a0b651c8d350884db735243aeffd7f4e1805eef480bdc5600f068267f9-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=6549ed3becb852a42cd5506ac96b8abf" alt="The Commerce Display Grid Duet dimensions (alternative horizontal mobile layout)" width="1500" height="1594" data-path="images/retailer-integration/docs/5b6e13a0b651c8d350884db735243aeffd7f4e1805eef480bdc5600f068267f9-image.png" />
</Frame>

***

## Available Options

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

<Frame caption="Example of the Commerce Display Grid Duet (desktop) with CTA, legal text and &#x22;more info&#x22; text">
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/c92aa2d5b0932f16f2ec59b3c5f3d0d3de8fb5b5d9a955ab9b99434bfc4c5cec-CD_Grid_duet_Web_-_LegalCTA.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=a3eb78db6eec5f0e9d673d0e1955a77c" alt="Example of the Commerce Display Grid Duet (desktop) with CTA, legal text and &#x22;more info&#x22; text" width="887" height="690" data-path="images/retailer-integration/docs/c92aa2d5b0932f16f2ec59b3c5f3d0d3de8fb5b5d9a955ab9b99434bfc4c5cec-CD_Grid_duet_Web_-_LegalCTA.png" />
</Frame>

### 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.

<Frame caption="CTA example for the Commerce Display Grid Duet format">
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/c77cd65b25e9a976440bdd9baac8add4327ea1a4e075c0dd721cbeff6856eb92-CD_Grid_Duet_-_CTA.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=cd17ebcf469a5847163438df52009f50" alt="CTA example for the Commerce Display Grid Duet format" width="1087" height="518" data-path="images/retailer-integration/docs/c77cd65b25e9a976440bdd9baac8add4327ea1a4e075c0dd721cbeff6856eb92-CD_Grid_Duet_-_CTA.png" />
</Frame>

### Legal Text

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

<Frame caption="Legal Text example for the Commerce Display Grid Duet format">
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/bfba5e80d11eea561d7a34027e1fc0ec7a3a99bca13091d4c18b7ce3100423bf-CD_Grid_Duet_-_legal.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=10534b66482163793ad08009ea57d615" alt="Legal Text example for the Commerce Display Grid Duet format" width="1087" height="518" data-path="images/retailer-integration/docs/bfba5e80d11eea561d7a34027e1fc0ec7a3a99bca13091d4c18b7ce3100423bf-CD_Grid_Duet_-_legal.png" />
</Frame>

### 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”.

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/345a24e43dbb8f571ee745c0e087beaccf6318e0b27b28dcfa53c2fc4bfa36ac-CD_Grid_Duet_-_More_info.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=d6d5d1e9cf2ec60ccf6e80e71dd12361" alt="345a24e43dbb8f571ee745c0e087beaccf6318e0b27b28dcfa53c2fc4bfa36ac CD_Grid_Duet_ _More_info" width="1125" height="482" data-path="images/retailer-integration/docs/345a24e43dbb8f571ee745c0e087beaccf6318e0b27b28dcfa53c2fc4bfa36ac-CD_Grid_Duet_-_More_info.png" />
</Frame>

<Frame caption="&#x22;More Info&#x22; with CTA and legal text example for the Commerce Display Grid Duet format (mobile)">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/568b9e1a05dc1cee4600d0328f8040c38c94990ccd3ef5d94979519d5ab59813-CD_Grid_Duet_-_More_info_mob.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=751294b0f50572bfa06ffae284df806c" alt="&#x22;More Info&#x22; with CTA and legal text example for the Commerce Display Grid Duet format (mobile)" width="1224" height="413" data-path="images/retailer-integration/docs/568b9e1a05dc1cee4600d0328f8040c38c94990ccd3ef5d94979519d5ab59813-CD_Grid_Duet_-_More_info_mob.png" />
</Frame>

### 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`

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/da5983165c56e517c393b37aab4f4c71a0f897278798c51a5596b0245fb74d37-260112_CD_Grid_Duet_-_Color_mode.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=0ca96708378f5c779c95dfa3900311b2" alt="da5983165c56e517c393b37aab4f4c71a0f897278798c51a5596b0245fb74d37 260112_CD_Grid_Duet_ _Color_mode" width="1038" height="839" data-path="images/retailer-integration/docs/da5983165c56e517c393b37aab4f4c71a0f897278798c51a5596b0245fb74d37-260112_CD_Grid_Duet_-_Color_mode.png" />
</Frame>

***

# Technical Details

## Responsive

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

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/e6e2fea1bd2316cc03eb45efe25930137ee2df9eafb253b60ba5605b04cf2a47-251118_-_CD_Grid_Duet_-_Responsive_layout.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=ab5a06187463381c2d0a70a63f228acb" alt="e6e2fea1bd2316cc03eb45efe25930137ee2df9eafb253b60ba5605b04cf2a47 251118_ CD_Grid_Duet _Responsive_layout" width="1125" height="389" data-path="images/retailer-integration/docs/e6e2fea1bd2316cc03eb45efe25930137ee2df9eafb253b60ba5605b04cf2a47-251118_-_CD_Grid_Duet_-_Responsive_layout.png" />
</Frame>

## 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**

<table>
  <thead>
    <tr>
      <th>
        <p>
          Detail
        </p>
      </th>

      <th>
        <p>
          Legal text
        </p>
      </th>

      <th>
        <p>
          More info
        </p>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <p>
          Height
        </p>
      </td>

      <td>
        <p>
          40 pixels
        </p>
      </td>

      <td>
        <p>
          Dynamic, based on text length
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Padding
        </p>
      </td>

      <td>
        <p>
          5 pixels on both the left and right sides of the tile
        </p>
      </td>

      <td>
        <p>
          8 pixels, all around
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Font
        </p>
      </td>

      <td>
        <p>
          Roboto Regular, 12 pixels
        </p>
      </td>

      <td>
        <p>
          Roboto Regular, 12 pixels
        </p>
      </td>
    </tr>

    <tr>
      <td>
        <p>
          Max characters
        </p>
      </td>

      <td>
        <p>
          90
        </p>
      </td>

      <td>
        <p>
          180
        </p>
      </td>
    </tr>
  </tbody>
</table>

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

<br />

<Frame caption="Dimensions and spacings for the Commerce Display Grid Duet format (Web)">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/58b5b2623bf79409173fa8d168f419403f60a453b3989f8f39c8ea4bd3defd2a-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=cb5a1710818e2c855825f10a3778142a" alt="Dimensions and spacings for the Commerce Display Grid Duet format (Web)" width="1330" height="748" data-path="images/retailer-integration/docs/58b5b2623bf79409173fa8d168f419403f60a453b3989f8f39c8ea4bd3defd2a-image.png" />
</Frame>

<br />

**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)

<br />

<Frame caption="Dimensions and spacing for the Commerce Display Grid Duet Format (Mobile)">
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/40ccb3cb28bdfc4e4404b71d1b2bd38cb74caee7a54696f6a0d8ae7c71b7643e-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=6dfc7e5432292346a26a900eec75beab" alt="Dimensions and spacing for the Commerce Display Grid Duet Format (Mobile)" width="576" height="605" data-path="images/retailer-integration/docs/40ccb3cb28bdfc4e4404b71d1b2bd38cb74caee7a54696f6a0d8ae7c71b7643e-image.png" />
</Frame>

### 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.

### Background Image

* **Grid layout (desktop and mobile):**
  * The background image is centered and is cropped from all sides
  * Image size rendering is determined by grid-based scaling presets
* **Alternative Mobile Layout:**
  * The background image has a fixed position and is never cropped
  * It scales proportionally to fit its container.

### Navigation and Slider Behavior

* The design of navigation **dots or arrows are customizable** to match the retailer’s native UI
* When the user releases the slide, the product with the **largest percentage of visibility** becomes the main displayed product

### Product Zone Behavior

* Product information dynamically fits within the product zone
* For Grid layouts (desktop and mobile), the tile height is determined by tallest product in the row.
* For the Alternative Mobile Layout, the product zone **maintains a consistent height**, regardless of the width of the branded header

#### Alternative Mobile Layout Product Visibility Logic

* If only **one product** is present:
  * The product is **100% in view**

* If the viewed product is **first or last in the list**:
  * The main product is **80% in view**
  * The adjacent (secondary) product is **20% in view**

* If the viewed product is **in the middle of the list**:
  * The main product is **80% in view**
  * Each adjacent product is **10% in view**

<br />

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/cmPz0RjwwK8-Y1zy/images/retailer-integration/docs/087ce7295af0412f339fefafaacf6f4767b188095f45e64e54614fc5f82a5900-image.png?fit=max&auto=format&n=cmPz0RjwwK8-Y1zy&q=85&s=2226a7391c258eb17965b907ba89eb67" alt="087ce7295af0412f339fefafaacf6f4767b188095f45e64e54614fc5f82a5900 image" width="1062" height="404" data-path="images/retailer-integration/docs/087ce7295af0412f339fefafaacf6f4767b188095f45e64e54614fc5f82a5900-image.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/19d4c3b6dc26d953ffba02f78084f1af3a851aeadf6a60a867b16cfb71b39100-image.png?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=9de6bf490f0f32edc85872ee57052bae" alt="19d4c3b6dc26d953ffba02f78084f1af3a851aeadf6a60a867b16cfb71b39100 image" width="1062" height="404" data-path="images/retailer-integration/docs/19d4c3b6dc26d953ffba02f78084f1af3a851aeadf6a60a867b16cfb71b39100-image.png" />
</Frame>

***

<br />

## What's next

* [Commerce Display Spotlight](/retailer-integration/docs/commerce-display-spotlight)
* [Commerce Display Grid Shelf](/retailer-integration/docs/commerce-display-grid-shelf)
* [Branding Display Grid Solo](/retailer-integration/docs/branding-display-grid-solo)
* [Branding Display Spotlight Solo](/retailer-integration/docs/branding-display-spotlight-solo)