Introduction

The Commerce Display Spotlight is a responsive horizontal commerce display unit combining branded assets with products.

Rendering Examples

Desktop

Mobile

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

Specifications

General

The Commerce Display Spotlight is composed of two different parts:

• A branding zone,
• A product zone.

The format can be displayed in any page but only for out-of-grid locations. The width is dependent on the placement, however, the height is flexible within a range and can be determined by 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. Products will redirect to the respective PDP and the branding zone will redirect to 1 URL.

When a website is responsive:

• the branding and product zone will be side by side as a horizontal format
• for smaller breakpoints and mobile or app, the branding zone will stack above the product zone

Asset Sizes and Behavior

Desktop and Tablet Specifications

Dimensions

The background image asset is 1400x450 pixels.

Device Support

This asset will render at its original size and can cover both desktop and tablet placements as small as 576 px wide or based on the detected device.

Alignment and Cropping

There is a minimum cropping area of the image asset called the Safety zone, therefore the background image needs to be centered within the branding zone and cropped on all sides. The height of the branding zone can be determined by the retailer as long as the Safety zone is respected.

Mobile Specifications

This layout 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

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 below the branding zone. When the user clicks on button, they will be redirected to the link.

Legal Text

Legal text can be added as an option. It is always visible (90 characters maximum, including spaces) and placed below the branding zone.

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 Layout Rules

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

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.
• The background image is rendered at 100% the asset size, centered and cropped from all sides

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 640px and 769px

At this breakpoint, you can choose between the two layout options outlined below.

Main layout (recommended)

• 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
  Please note that the presence of optional elements such as the CTA button, “More info”, and "Legal" components may increase the overall height of the banner.

Alternative layout

• The Branding Zone has a fixed width of 384px.
• The Product Zone occupies no more than 50% of the total width, and is sized to fit all product content.
• If product content does not fit:
  • The Product Zone height may adjust automatically (up to 300px), or
  • The main layout above may be applied instead

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.

Styling

Element styles, such as fonts, button corner radius, and navigation controls, are determined by the retailer and the following details shows our default styles. We strongly advise to adhere to our button sizes to keep designs streamlined and consistent.

Borders

• Desktop and Tablet layout: 1px border surrounds both the branding and product zones.
• Mobile Layout: 2px border surrounds the full creative, including product listings.

Background Image

• Desktop and Tablet layout:

  • The background image is centered and is cropped from all sides
  • Image size rendering is determined by scaling presets

• 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 the Mobile Layout, the product zone maintains a consistent height, regardless of the width of the branded header
  • Padding: 10 pixels of spacing around each product listing.

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

Call-to-Action (CTA) Button

• Max characters: 25
• Size: 150 x 30 pixels
• Font: Roboto Regular, 12 pixels
• Margin & Alignment
  • Desktop and Tablet layout:
    • 8 pixels below branding zone & below button
    • When there is no legal text: Centered below branding zone
    • If legal text enabled: left aligned and 10 pixels to the right of the button
  • Mobile Layout: 8 pixels above and 10 pixels below button
  • Mobile Layout: 10 pixels below navigation dots and 10 pixels below button

Legal Text and More Info

Desktop and Tablet layout

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, all sides
• Font: Roboto Regular, 12 pixels
• Max characters: same as Desktop and Tablet layout
• Background: Displayed over a colored layer (the layer color adapts based on color mode)