Introduction

The Commerce Display Spotlight is a Commerce Display unit combining branded assets with product tiles.

Rendering Examples

Desktop

Mobile

Specifications

General

The Commerce Display Spotlight unit is composed of two different parts:

• A branding zone on the left side,
• A product zone on the right side.

The height is adapted or set with the retailer.

The format must be able to host up to 5 products and support navigation arrows which allow the user to scroll through the products.

Asset Sizes

Desktop

The background image must be 1400 x 450 pixels with a safety zone of 576 x 200 pixels centered in the image.

Mobile

The background image size is 1280 x 400 pixels.

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

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 CTA button can be added as an option.

Legal

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

Layout & Sizing

Navigation Arrows
Navigation arrows are consistently positioned within the Product Zone.

Border
A fixed 1px border must surround both the Creative and the Product Zone.

Zone Dimensions

• The widths of the Branding Zone and Product Zone vary based on placement size.
• The height is set during integration and remains fixed between 200px and 450px.

Responsive Layout Rules

Placement width between 1152px and 2800px

• Branding Zone and Product Zone each take up 50% of the total width.
• Height is defined by the retailer.

Placement width between 769px and 1152px

• Same as above: both zones are 50% width.
• The Branding Image asset is rendered at 67% scale of the original size (approximately 933.33 × 300px).

Placement width between 700px and 769px

• The Branding Zone has a fixed width of 384px.
• The Product Zone is less than 50% width, sized to fit all product content.
• If product content does not fit:
  • The Product Zone height may adjust automatically (up to 300px), or
  • An alternate layout may be applied (same rules as the 768px to 640px range).

Placement width between 640px and 769px

• Desktop asset renders at 67% scale.
• The banner height is fixed to the safety zone height (134px).
• The Product Zone moves below the banner, with a suggested height of 136px.
• Total format height: 270px.

Placement width under 640px (Mobile Mode)

• The layout switches to mobile.
• The banner spans 100% of the device width and scales proportionally, maintaining its original aspect ratio.

Desktop

CTA Button

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

More info

• Space size occupied by legal depends on the tile width.
• The text is in front of a layer (which color depends on the color mode)
• Font: Roboto Regular 12px
• More info height depends on the length of the text.
• There should be a 1 px fixed border around branding and product zones.

Mobile

Background image

• The background image position is fixed, and the image is never cut. It scales in proportion.
• The background color fills the creative part.

Borders & Padding

• The border is fixed to 2 px and surrounds the creative and the product listing.
• There is 10 px padding around each product listing.

Products display

• The 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.
• 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-spotlight": [
        {
          "format": "CDS",
          "products": [
            {
              "ProductId": "134679258",
              "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": "//assets.example.com/images/desktop-banner.jpg",
            "background_image_alt_text": "Promotional desktop banner showing featured product.",
            "mobile_background_image": "//assets.example.com/images/mobile-banner.jpg",
            "mobile_background_image_alt_text": "Promotional mobile banner showing featured product.",
            "redirect_url": "https://example.com/featured-product",
            "redirect_target": "_blank",
            "redirect_url_app": "app://example/featured-product",
            "cta_text": "Shop Now",
            "cta_text_color": "#FFFFFF",
            "cta_color": "#CCCCCC",
            "legal_text": "©2025 Example Co. All rights reserved.",
            "more_info_text": "Terms and conditions apply. Tap for details.",
            "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=..."
        }
      ]
    }
  ]
}