Hero section
This setting is located in the custom fields of your category: Catalogues > Categories > [select category]
Last updated
Was this helpful?
This setting is located in the custom fields of your category: Catalogues > Categories > [select category]
Last updated
Was this helpful?
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.
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
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.
Of course, the category needs a background image, which you can store directly in the category.
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
Position (5) [ Selection ] - Alignment of the image in the container in which it expands.
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.
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.
Attachment (5) [ Inherit | Fixed | Scroll ] - Fixed images stretch to the entire viewport and stop when scrolling down the page.
Attachment (4) [ Fixed | Scroll ] - Fixed images stretch to the entire viewport and stop when scrolling down the page.
With data mapping, you can automatically map the category description to the text element.
