Hero section

This setting is located in the custom fields of your category: Catalogues > Categories > [select category]

In our themes you can display the category image in the first section of a shopping experience category page layouts - automatically! The image stored in the category is automatically used as background image in the first section of the shopping experience. Shopping experience elements can be placed on top of this image.

This way, you can use a single shopping experience to automatically show the appropriate image for each category without having to create individual layouts for each category.

Configuration per category

1. Settings in the category

To setup this functionality for each category individually, we have implemented custom fields in the category:

• Use first section of listing layout as "Hero section" (1) [ Inherit | Yes | No ]

• Text contrast (2) [ Inherit | Light text | Dark text ]

• Background color (3) [ Colorpicker ]

• Opacity (4) [ Percentage value ] - Visibility of the image on the background color in percent

• Attachment (5) [ Inherit | Fixed | Scroll ] - Fixed images stretch to the entire viewport and stop when scrolling down the page. More information

• Position (6) [ Selection ] - Alignment of the image in the container in which it expands.

• Image mode (7)

  • Auto: The image is displayed in its entirety. The height of the element is dynamic and automatically adjusts to the aspect ratio of the image. If the width of the image is less than the width of the element, the image will not be stretched to the width of the element.

  • Cover: The element is completely filled with the image. In the case of smaller images, this causes them to be stretched (and therefore appear blurry). Images with an inappropriate aspect ratio will have the longer side cut off, meaning the full image will not be displayed.

  • Stretch: The image is displayed completely. The height of the element is dynamic and automatically adjusts to the aspect ratio of the image. In contrast to the Standard mode, the image is stretched to the full available width of the element.

2. Deposit an image

Of course, the category needs a background image, which you can store directly in the category.

If no picture is stored in the category, the background image from the shopping experience section will be displayed as a fallback (if there is an image assigned).

After that, all you have to do is create a shopping experience category layout and prepare it for displaying the image. We will show you how to do this in the following section "Configuring the shopping experience layout".

Configuration for all categories

Using the theme configuration, the settings for displaying the category image can also be set globally for all categories and partially overridden in the respective category.

The custom fields in the category inherit these settings by default and can also overwrite them. This also makes it possible to exclude individual categories from these functionality.

If you want to display a category image on all but a few categories, then you don't have to repeat these settings in each category.

• Display category image (1) [ Yes | No ]

• Text contrast (2) [ Light text | Dark text ]

• Background color - is set in the shopping experience layout.

• Opacity (3) [ Percentage value ] - Visibility of the image on the background color in percent

• Attachment (4) [ Fixed | Scroll ] - Fixed images stretch to the entire viewport and stop when scrolling down the page. More information

• Position (5) [ Selection ] - Alignment of the image in the container in which it expands.

After that, all you have to do is create a shopping experience category layout and prepare it for displaying the image. We will show you how to do this in the following section "Configuring the shopping experience layout".

Configuring the shopping experience layout

To prevent the category image from being displayed uncontrollably in the first section of any category, you still need a shopping experience layout that is prepared for displaying the category image.

To do so, switch to the Shopping experience section under Content > shopping experiences and select the tab Listing page (1).

There are two listing layouts by default. Choose one of them and duplicate (2) it via the context menu. The duplicated layout can then be edited:

Create a new section (1) for your category image. In the first section you can, for example, place an image-text block (2) and our breadcrumbs element (3) which allows the breadcrumb navigation to be displayed on this category image. Delete the unnecessary elements (4) from the second section if you like.

With data mapping, you can automatically map the category description to the text element. Learn more

Fallback Image

You can include a fallback image (2) and a fallback color (1) in the shopping experience section, which will be displayed if no category image and/or background color has been assigned to the category.

___________________

* For technical reasons, the breadcrumb element is not available in the cloud version.