> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/extensions/shopping-experiences-header.md).

# Shopping Experiences Header

The **Shopping Experiences Header** is a special header display where the header overlays the top area of a shopping experience (CMS page). It is especially suitable for overlaying images, videos and sliders.

On the home page the header overlays the shopping experience directly; for listing pages you additionally enable it via a custom field.

{% hint style="warning" %}
**Important**: So that the element behind the header is visible, the background color of the header and its elements should be set to "transparent" or "rgba(0, 0, 0, 0)".
{% endhint %}

***

## Configuration

### **Theme configuration**

1. Go to the tab "**Header**"
2. Expand the block "**Shopping Experiences Header**"
3. Set the configuration "**Shopping Experiences Header**" to "**enabled (Header overlays the Shopping Experience)**"
4. Save your changes after editing

### **Custom field (listing pages)**

On listing pages you control the Shopping Experiences Header per category via the custom field "**Show 'Shopping Experiences Header'**":

* **inherit from theme configuration** – uses the global setting from the theme configuration
* **no** – disables the Shopping Experiences Header for this category
* **yes** – enables the Shopping Experiences Header for this category

***

## Summary

#### Theme configuration

* Tab "Header" => Block "Shopping Experiences Header" => Shopping Experiences Header

#### Custom field

* "Show 'Shopping Experiences Header'" (listing pages)

***

## Further information

You can find a tutorial on how to use the "Shopping Experiences Header" in our Knowledge Base:

{% embed url="<https://knowledge.themeware.design/knowledge-base/tutorials/header/configuring-the-shopping-experience-header>" %}
ThemeWare® Knowledge Base => Configuring the Shopping Experiences Header
{% endembed %}