Introduction

Commerce Display Grid Duet is an in-grid Commerce Display unit combining branded assets with product tiles.

Rendering Examples

Desktop

Mobile

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. When a website is responsive, both tiles must always be at the same size.

Asset Sizes and Behavior

Background Image Specifications

Dimensions
The background image must measure 1500 by 1500 pixels. A safety zone of 540 by 740 pixels must be centered within the image.

Device Support
This asset supports both desktop and mobile (or app) placements. The version displayed is determined by the device type and layout.

Component Placeholders
Two internal placeholders are used for legal text and a call-to-action (CTA). These are treated as margins and ensure no overlap with the safety zone.

Alignment and Cropping
The safety zone and placeholders are center-aligned. Therefore, the background image must be centered within the branding zone and will be cropped evenly on all sides, depending on the available space.

Scaling Rules
The background image may be scaled to one of the following sizes, depending on grid dimensions and device type:

• 750 by 750 pixels (50% scale)
• 500 by 500 pixels (approximately 33% scale)
• 390 by 390 pixels (26% scale)

Fallback Behavior
If the grid size exceeds 750 pixels in either width or height, or if the image does not fully cover the grid, a background color can be used to fill the remaining space.

Retailer Safety Zone
The safety zone size for each image rendering is 390 px, 500 px, 750 px.

Grid-Based Scaling Presets

These presets define the image scale based on standard grid dimensions:

• Mobile Grid
  When the device is mobile and the grid 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.

• Regular Grid
  For grid 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 181 px by 330 px.

• Large Grid
  When the grid 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.

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

Alternative Mobile Layout

This layout variant is optimized for mobile devices 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.

Available Options

Redirection

When a user clicks on the branding zone, they should be redirected to the link defined within the response. There are two possible redirection options:

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

A Call to Action button can be added as an option.

Legal Text

Legal text can be added as an option and is always be 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. It is always visible on mobile or displayed when the user click on "see more”.

Color Mode

The advertiser can choose between two preset color modes to ensure the best contrast between legals 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

Technical Details

Responsive

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

Call-to-Action (CTA) Button

• Max characters: 25
• Size: 150 by 30 pixels
• Font: Roboto Regular, 12 pixels

Legal Text and More Info

• Padding: 5 pixels on both the left and right sides of the tile
• Background: Displayed over a colored layer (the layer color adapts based on color mode)
• Font:
  • Roboto Regular, 12 pixels for standard views
  • Roboto Regular, 10 pixels for mobile grid (Ingrid)
• Legal Text Height: Fixed at 40 pixels
• Legal Text Max characters: 90
• More Info Height: Dynamic, based on text length

Layout and Borders

• A 1-pixel fixed border surrounds both the branding and product zones.
• A 2-pixel outer border surrounds the full creative, including product listings.
• Desktop: 1px border around the format,
• Mobile: 2px border around the format,
• Padding: 10 pixels of spacing around each product listing.

Background Image and Color

• The background image has a fixed position and is never cropped,
• It scales proportionally to fit its container,
• A background color can be added to fill the entire creative area behind the image.

Dots and Slider Behavior

• The design of navigation dots is 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

• The product zone maintains a consistent height, regardless of the width of the branded header
• Product information dynamically fits within the product zone

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

Response Keys

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/..."
        }
      ]
    }
  ]
}