> 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/hero-section.md).

# Hero section

You can configure the theme extension "Hero section" via the theme configuration. The "Hero section" can be displayed on CMS listing and/or shop pages.

<figure><img src="/files/2ReexHW7iurX3EYb84I7" alt=""><figcaption><p>ThemeWare® "Hero section"</p></figcaption></figure>

You can also customise the display for each category using a corresponding custom field if you like.

If you want, you can also integrate the breadcrumb into the "Hero section".

The texts and images shown are taken from the category management ("Catalogues" => "Categories") of Shopware. The "**Name**" and the "**Image**" (= Display image) of the corresponding categories are displayed. As an alternative to the original category image, you can also use a custom image via a corresponding custom field.

But let's start with the theme configuration.

***

## Configuration

### **Theme configuration**

1. Go to the tab "**Extensions**"
2. Expand the block "**Hero section (on listing pages)**"
3. Enable the configuration "**Show 'Hero section' (CMS listing pages)**"
4. Optional: Adjust the further options (see the "Options" section) – e.g. integrating the breadcrumb
5. Save your changes after editing

### **Content**

1. Switch via the main navigation to the "**Category managment**" (1) (2) ("Catalogues" => "Categories")
2. Choose the category you want to edit (3)
3. To the right of the category list, the corresponding category now opens in the category editor (4)
4. You are in the tab "**General**"
5. In the block "**General**" you can edit the category name (**Name**).
6. Scroll to the block "**Menu settings**"
7. Here you can edit the category image (**Display image**)
8. Save your changes

<figure><img src="/files/w84WkMKYHL6LodAEmPU7" alt=""><figcaption><p>Shopware 6 "Category managment"</p></figcaption></figure>

***

## Display options

Here you have the following options for listing and shop pages:

* don't show
* show
* show (via custom field)

#### don't show

This is the default setting. In this case, the "Hero section" will not be displayed on the corresponding page type.

#### show

If you select the option `show`, the "Hero section" will be displayed on all pages of the corresponding page type.

{% hint style="success" %}
**Tip**: You can use the custom field to prevent the "Hero section" from being displayed in a category, allowing you to customise selected categories individually.
{% endhint %}

#### show (via custom field)

If you select `show (via custom field)`, the "Hero section" will only be displayed on the corresponding page type if you have configured the custom field to `yes` in the corresponding category.

<figure><img src="/files/2mU7Nz2MiwJ8aGwcFvWX" alt=""><figcaption></figcaption></figure>

***

## Options

In the same block you adjust the appearance of the "Hero section":

* **Pull up next element**
  * Pulls the next element a bit over the Hero section: "no", "yes" or "yes (via custom field)". (Beta)
* **Text colour**
  * "white", "light", "dark" or "black text".
* **Text alignment**
  * "align left", "align center" or "align right".
* **Sizing mode**
  * "Container-Max-Width (Full-width Boxed)" or "100% (Full-width)".
* **Content width**
  * Maximum width of the content in pixels (e.g. 1200px) or 100%.
* **Padding top**
  * Top spacing – only applies to pages with a "Shopping Experiences Header".
* **Overlay (background colour & opacity)**
  * Colour overlay over the background image incl. opacity.
* **Attachment** (background image)
  * "Background image scrolls with the page (scroll)" or "Background image stays fixed (fixed)".
* **Parallax effect** (background image)
  * "no" or "yes" – only with a fixed background image; the effect is controlled via JavaScript.
* **Show breadcrumb**
  * Adds a breadcrumb to the Hero section ("no" / "yes").
* **Breadcrumb – Position**
  * "align top" or "align bottom".
* **Breadcrumb – Content alignment**
  * "align left", "align center" or "align right".

Colours, fonts and further details are also adjusted in the theme configuration.

***

## Custom fields

As you probably already know, the theme configuration is always global, i.e. it applies to all pages across your shop. This also applies to the configuration of the "Hero section" However, you can "overwrite" the theme configuration with a selection of custom fields in any categories and, for example, use a different colour for the "Hero section" in a particular category.

<figure><img src="/files/Ahz8LqhosJQsejwS4T9V" alt=""><figcaption></figcaption></figure>

For more information on custom fields, see the following article:

{% content-ref url="/pages/CKMRywAg5zAoGqvduGfx" %}
[Hero section](/additional-features/custom-fields/categories/hero-section.md)
{% endcontent-ref %}

***

## Summary

#### Theme configuration

* Tab "Extensions" => Block "Hero section (on listing pages)" => Show 'Hero section' (CMS listing pages)
* Tab "Extensions" => Block "Hero section (on listing pages)" => Show 'Hero section' (CMS shop pages)

#### Custom field

* [Hero section](/additional-features/custom-fields/categories/hero-section.md)