> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/product/product-header.md).

# Product-Header

### Overlay header

The header can overlay the following contents like the elements of the shopping experience. The global settings in the theme configuration can be used as a preset and optionally set differently in the products for each product.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FTbRF2MCrUaxPZHSTryPv%2Fdocs-en-config-theme-product-detail-header-overlay.webp?alt=media\&token=9b683405-ad34-46ae-ad52-c313d7ea3a4a)

{% hint style="success" %}

#### \[ ≡ ] Setting per product

If this effect is to be used on the majority of product pages, the [**global settings**](/en/content/category/overlay-header.md#overlay-header-1) can be made in the theme configuration. 

If this effect is to be used specifically on only a few product pages, the configuration should be set in the [**respective** ](/en/content/category/overlay-header.md#overlay-header)product**.**
{% endhint %}

You can find detailed documentation in:

{% content-ref url="/pages/bFEpQagKad4cE6Na4Emu" %}
[Product header](/en/content/details-page/product-header.md)
{% endcontent-ref %}

### Header contrast

This setting is particularly useful if the header has been set to overlap and the opacity of the header's background colors has been set to `0%`.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FFq256zhikDRFc6BbpypU%2Fdocs-en-config-theme-product-detail-contrast-header.png?alt=media&amp;token=592f1a0a-85ee-447f-9620-dba6ef19e787" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**\[ ≡ ] Setting per category**

If this effect is to be used on the majority of product pages, the [**global settings**](/en/content/category/overlay-header.md#header-contrast-1) can be made in the theme configuration.&#x20;

If this effect is to be used specifically on only a few product pages, the configuration should be set in the [**respective** ](/en/content/category/overlay-header.md#header-contrast)produc&#x74;**.**
{% endhint %}

You can find detailed documentation in:

{% content-ref url="/pages/bFEpQagKad4cE6Na4Emu" %}
[Product header](/en/content/details-page/product-header.md)
{% endcontent-ref %}