​

Introduction

​

Rendering Examples

​

CodePen

​

Desktop

​

Mobile

​

Response Keys

​

Response Example

{
  "status": "OK",
  "placements": [
    {
      "viewHome_API_desktop-commerce-display-grid-shelf": [
        {
          "format": "CDGS",
          "products": [
            {
              "ProductName": "RMP Product",
              "ProductId": "134679258",
              "ProductPage": "https://example.com/product",
              "Image": "https://example.com/assets/image.jpg",
              "Rating": "-1",
              "Price": "8.49",
              "ComparePrice": "8.49",
              "Shipping": "0",
              "ClientAdvertiserId": "123",
              "AdvertiserId": "431248565",
              "RenderingAttributes": "{\"brand\":\"brandname\",\"numberOfReviews\":\"0\",\"shippingCost\":\"0\"}",
              "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
              "OnWishlistBeacon": "//b.us5.us.criteo.com/rm?rm_e=..."
            }
          ],
          "products_order": [
            {
              "products": ["134679258"],
              "isMandatory": false
            }
          ],
          "rendering": {
            "background_image": "https://cdn.example.com/images/desktop-banner.jpg",
            "background_image_alt_text": "Accessible description for desktop background image",
            "mobile_background_image": "https://cdn.example.com/images/mobile-banner.jpg",
            "mobile_background_image_alt_text": "Accessible description for mobile background image",
            "redirect_url": "https://example.com/click-destination",
            "redirect_target": "_blank",
            "redirect_url_app": "app://example/click-destination",
            "cta_text": "Shop Now",
            "cta_text_color": "#FFFFFF",
            "cta_color": "#CCCCCC",
            "legal_text": "©2025 Example Inc. All rights reserved.",
            "more_info_text": "Terms and conditions apply. Tap to view more.",
            "color_mode": "lightcommand"
          },
          "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
          "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
          "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
          "OnFileClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
          "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=..."
        }
      ]
    }
  ]
}

​

Specifications

​

General

• A branding zone,
• A product zone.

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

​

Asset Sizes and Behavior

​

Background Image Specifications

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

​

Grid-Based Scaling Presets

• 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

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

• Tile width is greater than 500 pixels.
• Tile 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

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

• 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

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

​

Call to Action (CTA)

​

Legal Text

​

More info

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

​

Color Mode

​

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

​

Styling

​

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

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

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

​

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

​

What’s next

• Commerce Display Grid Duet
• Commerce Display Spotlight
• Branding Display Grid Solo
• Branding Display Spotlight Solo