Category
The category or also called listing lists your products.
Category header
Overlay header
The header can overlay the following contents like the elements of the shopping experience. The global settings in the theme configuration can be used as a preset and optionally set differently in the categories for each category.
[ ≡ ] Setting per category
If this effect is to be used on the majority of category pages, the global settings can be made in the theme configuration.
If this effect is to be used specifically on only a few category pages, the configuration should be set in the respective category.
You can find detailed documentation in our tutorials, just follow the link below:
pageOverlay headerHeader contrast
This setting is particularly useful if the header has been set to overlap and the opacity of the header's background colors has been set to 0%.
[ ≡ ] Setting per category
If this effect is to be used specifically on only a few category pages, the configuration should be set in the respective category.
If the header is set in such a way that it overlays the elements of the shopping experience, contrast problems may arise due to the selected foreground color of the elements of the header. Therefore, the theme offers the option of changing the colors of the header using the Header contrast (1) setting. Various options are available:
Default header: The header remains colored as defined in the theme configuration.
Light header - dark text: The foreground colors become dark. Improves the contrast when bright images / elements of the shopping experiences are to be overlaid.
Dark header - light Text: The foreground colors become bright. Improves the contrast when dark images / elements of the shopping experiences are to be overlaid.
Inverted header: Foreground colors and background colors are swapped. The result depends heavily on the colors set in the header configuration. Depending on the colors you have set, the result varies greatly. Whether the contrast improves with light or dark images / elements of the shopping experiences also depends on your header configuration.
Additional logos can be stored in the Logos tab for the various contrast headers. You can also display an inverted version of your logo.
Examples:
Hero section
The category image can be automatically set into the first section of the shopping experience (cms) as background image. This makes it possible to place the elements/blocks on the background image.
The global settings in the theme configuration can be used as preset and you can optionally set different settings in the category configuration of each category.
[ ≡ ] Setting per category
If this effect is to be used on the majority of category pages, the global settings can be made in the theme configuration.
If this effect is to be used specifically on only a few category pages, the configuration should be set in the respective category.
You can find detailed documentation in our tutorials, just follow the link below:
pageHero sectionFilter
Colors
Example:
Basic configuration
In the basic filter settings, in addition to general settings for the typeface (1, 2, 3, 4), a Expand / Collapse icon (5) to open the filter and a separator (6) between the filter options can be selected.
The option Hide filter options without results (7) reinforces the "Disable filter options without results" function already included in the Shopware standard. If active, the filter options without results are hidden.
In order for this option to take effect, the "Disable filter options without results" option under Settings > Products must be active.
Example:
Sidebar filter
The filter (in the sidebar only) can also be shown initially collapsed (1). This makes the filters more visible and the filtering is easier for your customers. Thereby you can limit (2) how many filters should be displayed initially open.
Tip: If you have a lot of filters, it can be advantageous to limit how many filters should be expanded directly.
Example:
Listing actions (pagination, sorting)
The listing actions area can have a border at the top (1) and/or bottom (3). Spacing is automatically added so that the borders do not stick to the elements (pagination and sorting).
Example:
Product boxes
Colors
-
Products per row
For the listing you can define for each viewport how many products should be displayed in one row.
[≡] Different settings per category In each category you can make a different setting in the Custom fields > Products per row.
Products per row (with active sidebar)
You can adjust different settings for layouts with active sidebar, because the available width is smaller by the width of the sidebar.
[≡] Different settings per category In each category you can make a different setting in the Custom fields > Products per row.
Products per row (Product slider)
You can set the number of products per line for product sliders in the Settings (1) of aeach product slider element itself (in the shopping experiences). The value for the Minimal width (2) specifies the minimum width of the product box - Javascript is then used to calculate how many elements fit in one row.
If the width of the content is e.g. 1340px, 4 product tiles can be displayed in a row because 1340px / 4 = 335px. With 5 tiles per line, the maximum possible width of a product tile would be 1340px / 5 = 268px and therefore too small.
Basic configuration
The short description in the listing depends on the layout type of the shopping experience listing element.
With the Border (1) setting the entire product box gets a border in the specified color. Shadow (2) and shadow:hover (3) highlights the product box with a drop shadow in the selected color.
Spacer (4) defines a distance between each product box in the listing grid.
Meta description as product description (5) lets you replace the product description that is displayed in the Standard layout type with the meta description of the product. If there is no meta description, the product description is used as a fallback.
The option Discount in % (6) displays the percentage savings in the badge on discount items.
Attention animation (7) moves the product box up a few pixels on mouseover.
Example:
Product image
With Mouseover Image change (1) you specify whether an alternative article image is displayed when hovering the mouse over it. The theme automatically selects the next closest assigned article image to the cover image from the configuration of the article.
The checkbox background (2) offers the possibility to use the background color configured under General > Product images > Product image background. This way you can control more specifically when the background color should be applied. In the detail page area, there is also such a checkbox for the gallery.
In addition to the product box itself, the product image can also have a border (3) in the defined border color (4).
Layout type big image - max height (5) gives you the possibility to change the height of the image of this product layout. Unlike the other product box layouts, the Big image product layout is not based on our aspect ratio feature of the images and uses the display of fitted item images with a fixed height.
Example:
Product image sizes
For displaying the optimal product image thumbnails in the product boxes for the different devices and screen sizes many factors play a role. These include, for example, the adjustable number of products per line, the adjustable maximum layout width as well as the distance between the product boxes. Settings which affect the size of the boxes and thus also the displayed images.
Basically, the theme automatically calculates the image size to be loaded for the various thumbnails in the listing based on the various parameters. Manual adjustment of fixed image sizes is only recommended in exceptional cases.
Background knowledge:
The product image sizes setting defines fixed image sizes of the product images for the different display sizes / viewport widths. The img-srcset decides which image should be loaded based on the conditions stored in the sizes attribute. Each constraint consists of an optional media query that describes the viewport width and the width of the image.
Once the setting Activate custom srcset-sizes (1) has been enabled, the specified image sizes for each viewport in the settings panels below will take effect.
Product rating
Choose between different positions of the rating stars with the Rating position (1) configuration and set et whether grayed out stars should be displayed as placeholders if a product does not yet have any reviews.
Example:
Product name
In addition to the general settings for color and typography, the number of lines of the product name in the listing can be changed using the Lines (8) option. This can be useful for particularly short or particularly long product names, as the length of the product names is limited by the number of lines displayed to ensure a uniform appearance in the listing.
Product description
The product description is only available with the Standard product layout. The Layout type (1) can be set in each category and shopping experience listing element.
Product number
Display the product number in the product listing. By disabling the display of the article number, you can reduce the height of the product boxes, because no space is reserved for this information.
Variant characteristics
By disabling the display of variant features, you can reduce the height of the product box display, as no space is reserved for this information.
Variant cheapest price
By disabling the display of the cheapest variant price, you can reduce the height of the display of the product boxes, as no space is reserved for this information.
Price unit
By deactivating the display of the basic price, you can reduce the height of the display of the product boxes, as no space is reserved for this information.
Please check the display of mandatory information beforehand!
"Whoever offers products according to length, volume, weight or area is obliged to state a basic price." Source: Shopware Blog on the subject of price quotations
If you are obliged to display a basic price, do not switch it off - if you only sell e.g. clothing, you can possibly save the unnecessary empty space of the basic price calculation.
Product price
-
Product actions
A product can have actions such as adding the item to the shopping cart, the details button for variants, or our additional quickview feature.
Appearance (desktop) (1): Product actions can overlay the product image on mouseover, push up the product information or overlay the product price. By default, the actions are always visible below the price.
Appearance (mobile) (2): If product actions are only visible on mouseover, mobile devices interpret the first touch gesture as mouseover event. The first "click" is therefore used to display the product actions - opening the product is therefore only possible with the second "click". You can therefore make a different setting for mobile devices.
Quickview (3): Activates the quickview functionality of our theme.
Quantity field (4): In addition to the shopping cart button, a quantity field will be displayed.
Rating position (5): Product ratings can overlay the product image in the bottom center or top right corner. In the default, these can also be displayed above the product title.
Rating placeholder (6): Displays inactive stars as placeholders if the product does not have any ratings yet.
Display detail buttons by default (7): This option ensures that a detail button can also be displayed if the "Display buy buttons in listings" option has been deactivated in the shop settings. The option modifies the functionality of the "Display buy buttons in listings" option.
Display detail buttons on variants (8): Shopware 6 normally shows a buy button on preselected variants which are not displayed as several individual variants, determined by their associated property values.
More information about the buy button:
Examples:
Last updated
