Product
The product page / product detail page.
Quickview
Basic configuration
Positions the product name in the . This allows the same representation to be recreated as with the Gallery & Buybox blocks of the Experience Worlds product page layouts on the product page.
Detail
Colors
-
Basic configuration
These settings also affect the layout of the quickview function.
Product title position (1): Sets the position for the product title.
In Shopping Experience layouts, the position of the product name is controlled by the product name block or the various gallery and buybox blocks which includes the product name.
Short description (2): The theme supports displaying an additional short description, which is used from the meta description of the product.
Variant characteristics (3): The main features of a variant can be displayed or hidden below the product title.
Rating position (4): Ratings can be displayed in the title area or below the price.
Rating placeholder (5): Displays inactive stars as placeholders if the product does not have any ratings yet.
Wishlist position (6): Position the Add to Wish List link above the gallery or below the shopping cart button.
Manufacturer position (7): The manufacturer's name or logo can be displayed in different places. You can also disable it.
Quantity field (8): Quantity selection/input can be hidden. The user can only place one delivery quantity in the shopping cart in the first step. The quantity can still be adjusted in the checkout and shopping cart.
In listings, you can show or hide the quantity selection/input under category > product boxes > product actions, too.
In quickview, the setting of the detail page is adopted.
Delivery status indicator appearance (9): Changes the appearance of the delivery status.
Example:
The spacings (10, 11, 12, 13) are analogous to the layout spacing of the elements/blocks of the shopping experiences. If the value is set to auto, the global container spacings from General > Basic layout > Basic configuration > Container spacings are used.
In Shopping Experience layouts, these settings are overwritten by the individual block/element settings.
Sticky (13): If active, the buybox is sticky, as long as the content is not higher than the viewport.
If the Sticky option is also activated for the adjacent gallery, the element with the smaller height will always be sticky.
Force Sticky (14): The sticky function only works if all parent elements do not use the "overflow:hidden" CSS property. There may be extensions that set this property. If active, the sticky function will be enforced and all parent elements with "overflow: hidden" will be rewritten to "overflow: visible".
Product title
-
Product price
-
Product configurator
The colors of the product configurator (variant selection) can be customized via the settings. In addition, non-combinable properties could be crossed out (1), are displayed with a dashed border (2) and/or have a reduced opacity (3). Tooltips (4) are used to show the option name of colors and images.
Tip: The reduction of opacity distorts the colors of a color selection, so it may be useful to use the strike-through and/or dashed display options.
Example:
Product details
Example:
Product features
Any number of advantages of a product can be displayed on the detail page via the product features. In addition to global activation (1), two different display modes (2) and the selection of an icon (4) are available. Via the position (3) you can determine where these features are displayed. The heading (5) is optional and can be hidden.
The content is stored directly in the product in the area of the custom fields in the Custom content (1) tab. In the Product features (2) input, any number of advantages can be inserted and separated by a semicolon.
Example:
Gallery
Basic configuration
With [!] Images display mode (1) you decide how the image should be displayed in the gallery:
Standard: The image is displayed in its entirety. The height of the entire slider element is therefore dynamic and automatically adjusts accordingly. Therefore, it is recommended that all images in the slider have the same aspect ratio, otherwise the elements below the slider "jump up and down".
Cover: The element is completely filled with the image. For smaller images, this will cause them to be stretched (and possibly appear blurry as a result). For images with an inappropriate aspect ratio, the longer side is cut off, so the full image is not displayed.
Contain: The height of the element is automatically determined based on the highest image. Unlike the default mode, however, it will not be adjusted when switching between different images.
The [≡] Gallery display mode (2) defines the behavior of the gallery. It can behave as a gallery slider to slide horizontally or as a gallery scroller to scroll vertically in the document flow and it could be displayed as a gallery grid.
[≡] The Gallery display mode can be set in each product via the custom fields in the Specifications > Custom fields > Gallery tab.
You can find more about this in the documentary under CONTENTS > Details page > Gallery mode
Gallery grid - cover full width (3) sets the cover image to full width in the gallery grid. All subsequent images are displayed side by side according to the grid.
| Cover full width activated | Cover full width disabled |
|---|---|
|
|
Gallery grid - Dynamic (4) ensures that the grid does not end with a single image. For example, if five product images are to be displayed, three images are displayed next to each other in the last line so that no image wraps around alone and there is a visual gap.
| Dynamic activated | Dynamic disabled |
|---|---|
|
|
The Background (5) checkbox activates the subsequent Background (6) color field. By default, the variable $zen-product-listing-card-img-bg is stored here and points to the value stored in the setting under General > Product images > Background color.
With Fallback image title (7) you specify the title of the image that should be stored if no image title has been stored for the image in the media management. This can be the name of the image file or the name of the product.
Sticky (8): If active, the gallery is sticky, as long as the content is not higher than the viewport.
If the Sticky option is also activated for the adjacent buybox, the element with the smaller height will always be sticky.
Force Sticky (9): The sticky function only works if all parent elements do not use the "overflow:hidden" CSS property. There may be extensions that set this property. If active, the sticky function will be enforced and all parent elements with "overflow: hidden" will be rewritten to "overflow: visible".
Example:
Width & Height
The Gallery width (1) determines how much space the gallery may occupy opposite the buybox.
Example:
The height of the gallery slider can be fundamentally changed by Use aspect ratio of product images for gallery height (2).
This setting refers to the setting for the aspect ratio of the product image made in General > Product images.
In addition, a minimum height (3) for the gallery slider can be stored for different device sizes. Use aspect ratio of product images for gallery height (2) can supplement the settings of the minimum heights (3). If the product images are in portrait format and the minimum height is very low, the product image on the product page may be higher and larger than the minimum height, but not smaller.
However, if the Use aspect ratio of product images for gallery height (2) setting is not active, the images on the product page are only as high as the minimum height set for the respective device.
Example:
Navigation
Analogous to the settings of the shopping experience block "Image gallery and buy box", settings can be made for navigation:
Arrow navigation (1): Adds arrows to click through the images. You can specify whether the arrows should be displayed on or next to the displayed image, or hide them.
Dots navigation (2): Alternatively (or additionally) to the arrow navigation you can use the dots navigation. This represents a small point for each deposited picture, over which you can call the respective picture directly. The display is possible on or under the image.
Use aspect ratio of product images for preview navigation height (3): The preview navigation images will be displayed in the configured image format and not in square boxes.
This setting refers to the setting for the aspect ratio of the product image made in General > Product images.
Preview navigation position (4): Specify whether the small gallery preview images should be displayed to the left of the image or below.
Preview navigation appearance (5): Sets the appearance of this navigation. In the alternate mode there is no border, inactive elements are displayed in a weakened form.
The dots of the "dots navigation" can be disturbing if there are too many navigation points, especially on mobile devices. With the following settings you can determine from how many points or images this navigation is not displayed:
Dots navigation max (mobile) (6): Defines from how many images the points navigation is not displayed on mobile devices. Dots navigation max (7): Determines from how many images the points navigation is not displayed on large devices.
Zoom
Zoom (1): If you enable this option, an enlarged view of the image will be displayed when the user hovers the mouse over the image. Zoom factor (2): You can use the zoom factor to determine how much the image is magnified. Keep aspect ratio on zoom (3): Controls whether the zoom view is in the aspect ratio of the image or square. Show magnifier over gallery (4): Provides the possibility to place the zoom function (magnifier function) above the gallery itself. Otherwise the zoom view will overlay the buy box. Fullscreen gallery (5): Makes it possible to display the gallery in fullscreen popup in the browser window by clicking on the image.
Description
Colors
Set a Background (1) color for the entire tabs and cross-selling tabs area.
Example:
Basic configuration
With Position (1) you determine the placement of the product description and the other tabs. By default, Shopware displays this information under the elements of the gallery and the Buybox. With the Buybox option you can also place this information to the right of the gallery in the Buybox.
Appearance (mobile) (2):
Offcanvas: By default, the content is displayed on mobile devices in a so-called off-canvas element. The contents of the tabs are only displayed in a preview. For longer product descriptions, displaying them as an
Offcanvas (standard)is more suitable, as the user can better access the underlying content (e.g. cross-selling) and maintain an overview.Scroller: If you want to keep the content accessible by scrolling, select the
Scrolleroption. The tab navigation then works as an anchor navigation and scrolls to the respective content when clicked.Linear: If you want to keep the content accessible by scrolling, select the
Linearoption. In contrast toscrollermode, tab navigation is hidden.Accordion: Displays the various contents in a folding accordion.
Appearance (3):
Tabs: Die Standard-Darstellung von Shopware. Bei längeren Produktbeschreibungen eignet sich die Darstellung als
Tabs (Standard)besser, da der Nutzer die darunter liegenden Inhalte (z.B. Crossselling) besser erreichen kann und den Überblick behält.Scroller: If you want to keep the content accessible by scrolling, select the
Scrolleroption. The navigation then works as an anchor navigation and scrolls to the respective content when clicked.Linear: If you want to keep the content accessible by scrolling, select the
Linearoption. In contrast toscrollermode, tab navigation is hidden.Accordion: Displays the various contents in a folding accordion.
Example:
Combine the position in the buybox with the appearance setting accordion.
Description navigation
Colors
Depending on the appearance setting in the basic configuration section, the background / border (1) is used for the underline or background of the tab navigation.
Example:
Basic configuration
Appearance (1): Choose between the appearance as underlined (default), tabs or pills.
The Tab alignment (2) can be switched between equally distributed, left, center, right. In addition to that, the alignment of the text can be determined with the Text align (6) field.
Examples:
Custom tabs
A tab with information about the manufacturer can be displayed in the article via the theme. Logo, name, description and link to the manufacturer's website are included as information in this tab.
The properties can also optionally be displayed in a single tab. This is particularly useful when a large number of properties are to be displayed.
Example:
Description content
Colors
Defining a background color for the tab content is always useful if the entire tabs section has been assigned a background color.
Example:
Basic configuration
Activate or deactivate the Product description headline (1) and use Appearance (2) to choose whether the product name, title or product name and title should be displayed in combination.
Last updated
