Introduction

Branding Display Grid Solo is an in-grid display banner with a still image and a redirect link.

.

Rendering Example

Desktop

Mobile

Specifications

General

• The format must be displayed on the grid page.
• The format redirects to 1 URL.

When a website is responsive:

• The branding zone size should be equal to the grid tile size.
• if in list view or single column grid, format will change to the Alternative Mobile Layout.

Assets Size 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.

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

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.

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.

Background Image

• The background image size is 1280 by 400 pixels or 1200 by 1000.
  • Please note that only one of these size will be used once chosen.
• 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.

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 or the CTA button, 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)

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.

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

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

Technical Details

Responsive

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

Styling

Element styles, such as fonts and button corner radius, 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: 8 pixels between branding zone and button

Legal Text and More Info

Desktop

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

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, above and below
  • 10 pixels between CTA button and text
• 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 the branding zone.
• Alternative Mobile Layout: 2px border surrounds the branding zone.

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.

Response Keys

Response Example

{
  "status": "OK",
  "placements": [
    {
      "viewSearchResult_API_branding-display-grid-solo": [
        {
          "format": "BDGS",
          "products": [],
          "rendering": {
            "background_image": "https://cdn.example.com/assets/desktop-banner.jpg",
            "background_image_alt_text": "Accessible description of the desktop background image",
            "mobile_background_image": "https://cdn.example.com/assets/mobile-banner.jpg",
            "mobile_background_image_alt_text": "Accessible description of the mobile background image",
            "redirect_url": "https://www.example.com/product-page",
            "redirect_target": "_self",
            "redirect_url_app": "app://example/product-page",
            "cta_text": "Shop Now",
            "cta_text_color": "#FFFFFF",
            "cta_color": "#CCCCCC",
            "legal_text": "©2025 Example Corp. All rights reserved.",
            "more_info_text": "Click for details, terms, and conditions.",
            "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=...",
          "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=..."
        }
      ]
    }
  ]
}