# Product boxes
### Colors
You can configure the background color of the product box.
### Products per row
For the listing you can define for each viewport how many products should be displayed in one row.
{% hint style="info" %}
**\[≡] Different settings per category** \
In each category you can make a different setting in the *Custom fields >* [*Products per row*](#produkte-pro-zeile).
{% endhint %}
### Products per row (Layouts with sidebar)
You can adjust different settings for layouts with active sidebar, because the available width is smaller by the width of the sidebar.
{% hint style="info" %}
**\[≡] Different settings per category** \
In each category you can make a different setting in the *Custom fields >* [*Products per row*](#produkte-pro-zeile).
{% endhint %}
### 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
{% hint style="info" %}
The short description in the listing depends on the layout type of the shopping experience listing element.
{% endhint %}
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. The setting may differ for mobile devices.\
The option **Discount in % (5)** displays the percentage savings in the badge on discount items. \
**Attention animation (6)** moves the product box up a few pixels on mouseover.\
If **Mark sold-out products (7)** is enabled, sold-out products (stock 0 + clearance sale) will be labeled with a badge.
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](https://docs.shopware.com/en/shopware-6-en/content/media?category=shopware-6-en/content#settings) 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.
{% hint style="success" %}
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.
{% endhint %}
{% hint style="info" %}
**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.
{% endhint %}
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.
Beispiel eines srcset HTML-Attributes t
### 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 (9)** 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.
The option to trim rows can be disabled by disabling the **Limit product names lines (8)** option.
### Product description
{% hint style="info" %}
The product description is only available with the `Standard` product layout. The L**ayout type (1)** can be set in each category and shopping experience listing element.
{% endhint %}
You can configure the typography of your product description **(1-4)**.\
The option **Short description instead of an abbreviated product description (5)** lets you replace the shortened product description with the product’s custom field **“Short description.”** If the custom field is not filled, the product’s meta description will be used instead. If that is also empty, the description will fall back to using the basic product description again.
### 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 Switcher
With the configuration **Position (1–2)**, you can define whether and where the variant switcher is displayed within the product box.\
You can customize the design of the variant switcher, including the **alignment (3)**, **background color (4–5)**, **text color (6–7)**, and **border color (8–9)**.
With **Display title (10)**, you can define whether the variant group title is displayed (for example, “Size” or “Color”).\
**Cross out non-combinable properties (11)** will visually strike out properties/variants that are not available.\
You can **display tooltips (12)** that appear when the user hovers over the variant options.
You can define a **variant group threshold (13)** if not all variant groups should be displayed. For example, your products may have the properties “Color” and “Size”, but you only want to display the color selection in the product boxes.
Likewise, you can set a **variant option threshold (14)** to limit how many individual options are shown. This is useful if your products have a large number of variants. Excess variant options will be trimmed and displayed, for example, as “+10”.
{% hint style="info" %}
The thresholds are especially useful for improving performance. When multiple products with many variant options are displayed on a listing page, loading times can be increased.
{% endhint %}
Examples:
### 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.
{% hint style="warning" %}
**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](https://www.shopware.com/de/news/preisangaben-richtlinie-diese-fakten-muessen-onlinehaendler-kennen/) 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.
{% endhint %}
### Product price
You can configure the typography of your product price **(1-4)**.
### Delivery information
Activate the **Delivery information (1)** in listings to display delivery information in the product card in a minimal **Appearance (2)** or default mode. Adjust the text align to fit to the alignment of the other elements.
Examples:
Minimal appearance
Minimal appearance :hover
Default appearance
### Product actions
A product can have actions such as adding the item to the shopping cart, the details button for variants and much more.
The display of **buy buttons in listings** is a standard feature in Shopware and can be activated under Settings > Shop > Products. More information about the buy button:
{% embed url="" %}
**Appearance (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.
**Wishlist (3):** Activates the wishlist product action, if wishlist is globally activated in the shopware core configuration.
**Quantity field (4):** In addition to the shopping cart button, a **quantity field** will be displayed.
{% hint style="info" %}
The display of the order quantity field requires the active option [**Display buy buttons in listings**](https://docs.shopware.com/en/shopware-6-en/settings/productlist#buy-buttons-2) in the Shopware basic settings.
{% endhint %}
**Display product action button (5):** If active, the product action button is displayed in listings, if extended prices or variants do not allow the display of this buy button.
**Product action for variants - main product (6):** Product action of the variant shown as the main product in the storefront presentation. `Details button` | `Select options button` Quickview must be active for 'Select options button'.
**Product action for variants - single product (7):** Product action of the variant as expanded by property values or as single product with preselected variant in the storefront presentation. `Details button` | `Select options button` | `Buy button` Since it is clear for individual products which variant ends up in the shopping cart, a shopping cart button can also be displayed here. \
\&#xNAN;*Quickview must be active for 'Select options button'.*
**Product action for product with advanced prices (8):** Product action of product with advanced prices. `Details button` | `Select options button` Since the cheapest price is usually shown in the listing for advanced prices, there can be no shopping cart button here. (No legal advice) \
\&#xNAN;*Quickview must be active for 'Select options button'.*
Example:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://themedocs.zenit.design/en/styling/category/product-boxes.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.