# 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%2FltuKH1DESiTcQZCRBJdq%2Fdocs-en-config-theme-product-detail-header.png?alt=media\&token=7f3e1c65-434c-41ad-8185-00dda610ac39)

{% hint style="success" %}

#### \[ ≡ ] Setting per product

If this effect is to be used on the majority of product pages, the [**global settings**](https://themedocs.zenit.design/en/content/category/overlay-header#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** ](https://themedocs.zenit.design/en/content/category/overlay-header#overlay-header)product**.**
{% endhint %}

You can find detailed documentation in:

{% content-ref url="../../content/details-page/product-header" %}
[product-header](https://themedocs.zenit.design/en/content/details-page/product-header)
{% 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&#x26;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**](https://themedocs.zenit.design/en/content/category/overlay-header#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** ](https://themedocs.zenit.design/en/content/category/overlay-header#header-contrast)produc&#x74;**.**
{% endhint %}

You can find detailed documentation in:

{% content-ref url="../../content/details-page/product-header" %}
[product-header](https://themedocs.zenit.design/en/content/details-page/product-header)
{% endcontent-ref %}