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.

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.

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.

Further information

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