> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/tutorials/categories/category-hero-section.md).

# Setting up a category hero section

With ThemeWare® you give your category pages a large "Hero section" – an inviting header area with the category name, a background image and an optional breadcrumb. Give your categories a premium look, strengthen your brand and guide customers straight into your assortment.

{% hint style="info" %}
**Note**: You enable the "Hero section" centrally in the theme configuration. The name and image come from the category management; with custom fields you customise individual categories.
{% endhint %}

***

## Requirements

* a category you want to add a "Hero section" to
* optionally a background image (recommended image size: 1920 x 1080 pixels)

***

## Step 1: Enable the hero section in the theme

> "Theme Manager" => your ThemeWare® theme => "Extensions" tab => "Hero section (on listing pages)" block

Set **"Show 'Hero section' (CMS listing pages)"** to **"show"**. Using the further options in the same block, you can define text colour, text alignment, overlay, breadcrumb and more if needed. Save your changes.

{% hint style="info" %}
**Note**: If you choose **"show (via custom field)"**, the "Hero section" only appears in categories where you set the custom field to "yes". For CMS shop pages there is a separate field **"Show 'Hero section' (CMS shop pages)"**.
{% endhint %}

***

## Step 2: Maintain the category content

> "Catalogues" => "Categories" => select category => "General" tab

By default the "Hero section" shows content from the category:

* **Name** – in the "General" block (used as the heading)
* **Display image** – in the "Menu settings" block (used as the background image)

Save your changes.

***

## Step 3: Customise a category individually (optional)

> "Catalogues" => "Categories" => select category => "Custom fields"

Using the custom fields you overwrite the global theme configuration per category:

* **Show 'Hero section'** – switch the display on or off specifically
* **Hero section – Text** – your own text (empty = category description)
* **Hero section – Background image** – an alternative image instead of the display image
* **Hero section – Background color** and **Hero section – Text colour** – colours per category

Save the category.

***

## Result

The "Hero section" now appears at the top of the category page. If nothing shows up, clear the Shopware cache once.

{% hint style="success" %}
**ThemeWare® Tip**: Combine the global "show" setting with the custom field to suppress the "Hero section" in individual categories – this lets you design selected categories individually.
{% endhint %}

***

## Further information

You can find all configuration options and custom fields in detail in the ThemeWare® manual:

{% embed url="<https://docs.themeware.design/additional-features/extensions/hero-section>" %}
ThemeWare® Manual ⇒ Hero section
{% endembed %}