Introduction

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

Rendering Examples

Desktop

Mobile

Specifications

General

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

• A branding zone,
• A product zone.

The format must be able to host at least 3 products (or more).

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 size is 1500x1500 pixels, with a safety zone of 540 x 740 pixels.

Device Support
This asset can cover both desktop and mobile/APP placements based on the detected device and layout.

Component Placeholders
There are two component placeholders which are margins, ensuring that available options (legal text and CTA) are not clashing with the safety zone.

Alignment and Cropping

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

Scaling Rules

Depending on the device and grid size, the background image is displayed at one of the following scales:

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

Fallback Behavior

If the image dimensions exceed 750px or do not align with the grid layout, a fallback background-color may be applied to maintain visual consistency.

Grid-Based Scaling Presets

• Mobile grid: When a mobile device is detected, and the grid width is between 140 and 180 pixels while the height falls between 257 and 390 pixels, the background image is displayed at 26% of its original size (390×390). The Retailer safety zone is 140 px by 258 px.
• Regular grid: When the grid width is between 180 and 500 pixels, and the height is between 300 and 500 pixels, the background image is displayed at approximately 33% of its original size (500×500). The Retailer Safety zone is 181 px by 330 px.
• Large grid: When the grid width exceeds 270 pixels and the height is greater than 500 pixels, the background image is displayed at 50% of its original size (750×750). The Retailer Safety zone is 270 px by 495 px.

Scaling Rules

• Long and thin grid: When the grid width is between 180 and 270 pixels, the height is greater than 500 pixels, and the aspect ratio (height divided by width) is less than 2.78, the background image is scaled to match the full height of the grid.
• Extra wide or double tile grid: When the grid width exceeds 500 pixels, the height is greater than 500 pixels (with a minimum of 332 pixels), and the aspect ratio (width divided by height) is less than or equal to 1.5, the background image is scaled to match the full width of the grid.

Alternative Mobile Layout

An alternative layout can be used for mobile:

• Background image size: 1280x400
• It's composed of two parts: the branding zone on top, and the product zone below the branding zone.
• The user can change the product with a horizontal slider. On the bottom of the slider, there are dots to indicate to the user the position in the slider.
• There is one dot per product.
• The product viewable dot should be darker to indicate the position.
• If there is one product in the slider, the dot is not displayed.
• The creative width is equal to 100% of the parent div. It scales in proportion. When the width reduces, the height reduces as well. The background image is never cropped.

Available Options

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

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

Web

CTA

• Size: 150x30px,
• Font: Roboto Regular 12px.

Legal text & More info

• Space size occupied by legal depends on the tile width. There should be 5px padding on both the right and the left side of the tile.
• The legals are in front of a layer (which color depends on the color mode)
• Font: Roboto Regular 12px and 10px on mobile in grid.
• The legal text height should be fixed at 40px.
• More info height depends on the length of the text.
• There should be a 1 px fixed border around branding and product zones.

Mobile

• The background image position is fixed, and the image is never cut. It scales in proportion.
• The background color fills the creative part.
• The border is fixed to 2 px and surrounds the creative and the product listing.
• There is 10 px padding around each product listing.
• Dots design is customizable to match the retailer UI and native components. When the user releases the slide, the main product displayed is the one with the highest percentage of display.
• The Product Zone stays the same height regardless of the width of the Branded Header. Product info will dynamically fit in Product Zone area.
• For the products on the left and right, 80% of the first product is in view
and 20% of the secondary product is in view.
• For the other products, 80% of the main product is in view
and 10% of the products on each side are in view. If there is only one product, 100% of the product is in view.

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