Category teaser

The ThemeWare® "Category teaser" automatically displays category data (name and image) from Shopware's category management and links to the respective category. It is independent of its CMS block. You can use the teaser in other CMS blocks too. Just try out different blocks (for example with a different number of columns) to personalise your Shopping Experience.

The category teaser uses the caption bar style (like the regular teaser).

ThemeWare® "Category teaser"

Important: This element is only available in the ThemeWare® Pro Edition.

---

Configure element

You can configure the ThemeWare® "Category teaser" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"

2. Hover the mouse over the desired CMS element

3. Click on the "gear" icon (2) to configure the CMS element

4. The "Element Settings" pop-up will open

5. Make the desired changes

6. Save your changes

You have now configured the CMS element.

Configuring the ThemeWare® "Category teaser"

---

Configuration

The configuration of the "Category teaser" is quite self-explanatory. The category is a mandatory field. The category data (name and image) is displayed automatically. Optionally, you can manually override the title and the image.

General

In the tab "General" you configure the content of the element.

Category

In the section "Category" you select the desired category. The name (2) and image (1) of the category are automatically displayed in the teaser. The link automatically points to the selected category.

Content

In the section "Content" you can enter the title (optional), the badge text (3) and the CTA text (optional). If the title is left empty, the name of the selected category is displayed automatically. The CTA text uses a default snippet if no text is entered.

Image

In the section "Image" you can optionally set a custom image to be displayed instead of the category image. You also configure the display mode (Cover/Contain/Stretch), the minimum height (default: 340px) and the accessibility settings (alt text, decorative image).

Link

In the section "Link" the link is automatically set from the selected category. You can configure whether the link should open in a new tab and whether the entire teaser should be linked.

Elements of the "Category teaser"

Layout

In the tab "Layout" you can configure the padding, the border radius, the background colour, the text alignment, the icon, the badge, the title, the CTA, the caption bar, image effects, hover effects and a coloured overlay.

General

In the section "General" you can configure the padding, the border radius and the general background colour.

Text alignment

In the section "Text alignment" you can select the desired text alignment.

Icon

In the section "Icon" you can configure the arrow icon in the caption bar.

Badge

In the section "Badge" you can configure the badge style, the badge colours and the badge position.

Title

In the section "Title" you can configure the font, the font weight, the text transform and the text colour of the title.

CTA

In the section "CTA" you can configure the text colour of the CTA.

Caption bar

In the section "Caption bar" you can configure the background colour and the background effect (backdrop effect) of the caption bar.

Image effects

In the section "Image effects" you can configure various image effects: blur, brightness, contrast, grayscale, opacity, saturate and scale.

Hover effects

In the section "Hover effects" you can select a hover effect (grow, slide-in-down, slide-in-up, hover-reveal) and determine whether the CTA should only be shown on hover.

Coloured overlay

In the section "Coloured overlay" a coloured overlay can be activated and configured. You can configure a colour, a gradient and the angle.

SEO & Pagespeed

In the tab "SEO & Pagespeed" you can configure the HTML tag, the HTML tag class, the fetch priority and the lazy loading of the image.

Advanced

You can select each HTML element of our teasers using the appropriate CSS classes. If you want to use your own CSS classes, you can insert them in the "Advanced" tab.

Fields are available for CSS classes of the element, the badge and the caption. Additionally, an element ID can be assigned.