> ## Documentation Index
> Fetch the complete documentation index at: https://developers.criteo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Branded Header

# Introduction

Branded Header is a horizontal Commerce Display unit that consists of a Branding Zone and a Product Zone with a carousel of up to 5 SKUs.

<Frame caption="Example of the Branded Header Ad format (for mobile)">
  <img src="https://mintcdn.com/criteo-e1682996/T1671lE5Qb9IdIDU/images/retailer-integration/docs/d61b2eefa15a056a0a49c14ade16b781ebd512363803711ffc75128cb9f2f42e-image.png?fit=max&auto=format&n=T1671lE5Qb9IdIDU&q=85&s=8c1d23441f3deb161244311fc34a7b24" alt="Example of the Branded Header Ad format (for mobile)" width="412" height="774" data-path="images/retailer-integration/docs/d61b2eefa15a056a0a49c14ade16b781ebd512363803711ffc75128cb9f2f42e-image.png" />
</Frame>

<Info>
  This format corresponds to the **mobile version**. For the sample API response and desktop version, please refer to [Flagship](/retailer-integration/docs/flagship) or [Showcase](/retailer-integration/docs/showcase).
</Info>

***

# Specifications

## General

<br />

<Frame caption="The Branded Header Ad format structure">
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/70fecaf-FS_Mobile_middle.jpg?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=5670fce8f344e3d3978cd8dcf008dce1" alt="The Branded Header Ad format structure" width="1242" height="1049" data-path="images/retailer-integration/docs/70fecaf-FS_Mobile_middle.jpg" />
</Frame>

* Composed of two parts: the **branding zone** on top, and the **product zone** below the branding zone.
* The format must be able to host **between 1 and 5 different products.**
* The product zone is created according to the mockup.
* 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.

***

## Asset size

* Background image: `1242 x 300px`

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/be7209db0577c62f47cac8d45d584eb73908a1798e47f3d7e534bb4c98fef4c6-image.png?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=6bf9f5a6914c5cd47e41a2ecb9b42662" alt="be7209db0577c62f47cac8d45d584eb73908a1798e47f3d7e534bb4c98fef4c6 image" width="1352" height="352" data-path="images/retailer-integration/docs/be7209db0577c62f47cac8d45d584eb73908a1798e47f3d7e534bb4c98fef4c6-image.png" />
</Frame>

<br />

***

## Available options

The branding zone can be clickable and contain the redirection (a CTA button is usually added to the background image to indicate it to the user. The button is part of the image, it's not a coded element). The user can click anywhere to be redirected.

***

### Redirection

It can redirect to (only one is possible per format):

* At the banner's click, it redirects to the link defined on the platform. It's possible to have it on `_Self_` and `_Blank_` redirection options (not applicable for App).

***

### PDF

* At the banner's click, the PDF file opens like a redirection link. It's possible to have it on `_Self_` and `_Blank_` redirection options (not applicable for App).

***

### Other options

<Warning>
  Multiple background images and legal text are not available for the mobile format.
</Warning>

***

### Technical details

* 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 indicate the different products for a user to view**. The size of each dot: H=`10 px`, W=`10 px`, with `10 px` in between each dot and a `10 px` margin below. The dot corresponding to the product being viewed must be shaded.
* When the user releases the slide, the main product displayed is **the one with the highest percentage of display**.

<Frame
  caption="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."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/72a3c82-FS_Mobile_2_products.jpg?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=251104fc35c2daad3b80c544f94f01f4"
    alt="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."
    width="1242"
    height="1024"
    data-path="images/retailer-integration/docs/72a3c82-FS_Mobile_2_products.jpg"
  />
</Frame>

<Frame
  caption="For the other products, 80% of the main product is in view  
and 10% of the products on each side are in view."
>
  <img
    src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/335d335-FS_Mobile_3_products.jpg?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=7196d259b87cde555d23ad9913f9e0f9"
    alt="For the other products, 80% of the main product is in view  
and 10% of the products on each side are in view."
    width="1242"
    height="1024"
    data-path="images/retailer-integration/docs/335d335-FS_Mobile_3_products.jpg"
  />
</Frame>

<Frame caption="If there is only one product, 100% of the product is in view.">
  <img src="https://mintcdn.com/criteo-e1682996/PtO-HGDADAVLvs2M/images/retailer-integration/docs/a08b87a-FS_Mobile_1_product_2.jpg?fit=max&auto=format&n=PtO-HGDADAVLvs2M&q=85&s=daf7636635c6123226da6ce31623175f" alt="If there is only one product, 100% of the product is in view." width="1242" height="935" data-path="images/retailer-integration/docs/a08b87a-FS_Mobile_1_product_2.jpg" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/criteo-e1682996/fr3QURzyzf6m9Hkn/images/retailer-integration/docs/3ce1ef6-Branded_Header_padding_schemes.jpg?fit=max&auto=format&n=fr3QURzyzf6m9Hkn&q=85&s=5a0862aae25205d497439f93a6ce9eb8" alt="Branded_Header_padding_schemes.jpg" width="609" height="958" data-path="images/retailer-integration/docs/3ce1ef6-Branded_Header_padding_schemes.jpg" />
</Frame>

<br />

***

## Implementation example

<iframe height="400" style={{ width: "100%", border: "none" }} src="https://codepen.io/demo_placement/embed/vYqWBjj" loading="lazy" allowfullscreen />

***

<br />

## What's next

* [Flagship](/retailer-integration/docs/flagship)
* [Showcase](/retailer-integration/docs/showcase)
* [Interactive Header](/retailer-integration/docs/interactive-header)
