All pages
Powered by GitBook
1 of 7

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Slots

With the Slots you show additional details above and below the product name in the product box. There are two independent slots ("Slot above the product name" and "Slot below the product name"), each of which you fill freely with a source.

The following sources are available:

  • Product number – the product number of the product

  • Teaser text – a short, free text per product (custom field "Teaser text")

  • Manufacturer – the manufacturer name

  • Variant count – a hint like "+ 7 variations" on parent products with variants

The slots work independently of the "Show product number" / "Show manufacturer" options and can be combined freely.


  1. Go to the "Listing pages" tab

  2. Expand the "Product box" block

  3. Scroll to the section "Content"

For the "Teaser text" source you maintain the text per product via the "Teaser text" custom field.

You can adjust the texts of the "Product number" and "Variant count" sources via snippets:

  • twt.listing.ordernumberPrefix – prefix before the product number (default: "No.")

  • twt.listing.variantCount – hint text for the variant count (default: "+ %count% variations")

Two placeholders are available in the "twt.listing.variantCount" snippet:

  • %count% – the number of further variants (e.g. "+ 7 variations")

  • %countTotal% – the total number of variants (e.g. "available in 8 variations")


  • Tab "Listing pages" => Block "Product box" => Section "Content" => Slot above the product name

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Slot below the product name

  • "Teaser text" (Products)

  • twt.listing.ordernumberPrefix

  • twt.listing.variantCount


You can find more information about the "Teaser text" custom field here:

You can find an overview of all product box contents here:

Set "Slot above the product name" and/or "Slot below the product name" to the desired source
  • Save your changes after editing

  • Note: A slot stays empty if the selected source is not available on the product – for example if the "Teaser text" custom field is not filled in or no manufacturer is maintained. The "Variant count" source only appears on parent products with variants.

    Configuration

    Theme configuration

    Custom field

    Snippets

    Summary

    Theme configuration

    Custom field

    Snippets

    Further information

    Teaser text
    Content

    Teaser-Text

    The Teaser text is a short, free text per product (e.g. "New", "Organic", "Limited") that you can show in the product box above or below the product name.

    You maintain the text per product via a custom field. It is displayed as soon as you set a product box "Slot" to "Teaser text".


    Configuration

    Theme configuration

    1. Switch to the "Listing pages" tab

    2. Open the "Product box" block

    3. Set "Slot above the product name" or "Slot below the product name" to "Teaser text (custom field)"

    4. Save your changes after editing

    You maintain the text per product via the "Teaser text" custom field.


    • Tab "Listing pages" => Block "Product box" => Section "Content" => Slot above/below the product name

    • "Teaser text" (Products)


    You can find more information about the "Teaser text" custom field here:

    Custom field

    Summary

    Theme configuration

    Custom field

    Further information

    Teaser text

    Product boxes

    Manufacturer

    The manufacturer adds the manufacturer name to the product box of your category listings – optionally with a label in front of it.

    The extension is described in the article "Manufacturer in listings":

    Manufacturer in listings

    Content

    In the "Content" section you define which details the product box shows in your category listings. These are:

    • the two free slots above and below the product name

    • the product description (optionally the ThemeWare® short description) including viewport control

    • the variant characteristics

    • product number and manufacturer

    • the price details price unit, cheapest price, list price and list price percentage


    1. Go to the "Listing pages" tab

    2. Expand the "Product box" block

    3. Scroll to the section "Content"


    • Slot above the product name and Slot below the product name

      • "don't show"

      • "Product number": the product number.


    You can adjust the labels and texts of the contents via snippets:

    • twt.listing.ordernumberLabel – label in front of the product number ("Show product number")

    • twt.listing.manufacturerLabel – label in front of the manufacturer name ("Show manufacturer")

    • twt.listing.ordernumberPrefix – prefix in front of the product number (slots)


    • Tab "Listing pages" => Block "Product box" => Section "Content" => Slot above the product name

    • Tab "Listing pages" => Block "Product box" => Section "Content" => Slot below the product name

    • Tab "Listing pages" => Block "Product box" => Section "Content" => Show product description

    • "Teaser text" (products)

    • "Short description" (products)

    • twt.listing.ordernumberLabel

    • twt.listing.manufacturerLabel

    • twt.listing.ordernumberPrefix


    The individual contents are described in separate articles:

    Choose the desired options for the individual configurations
  • Save your changes after editing

  • "Teaser text (custom field)": a short free text you maintain per product (custom field "Teaser text").
  • "Manufacturer": the manufacturer name.

  • "Variant count": a hint like "+ 7 variations" on parent products with variants.

  • Show product description

    • "don't show"

    • "show (default)": Shows the abbreviated product description from Shopware.

  • Show product description from...

    • "always show (default)", "don't show", "Phone (landscape) (≥576px)", "Tablet (portrait) (≥768px)", "Tablet (landscape) (≥992px)", "Desktop (≥1200px)" or "Desktop (≥1400px)": Below the selected viewport the description is hidden.

  • Use short description

    • "don't use"

    • "use": Shows the ThemeWare® short description (custom field "Short description") instead of the product description, provided it is filled in on the product.

  • Show variant characteristics

    • "don't show"

    • "show (default)"

  • Show product number

    • "don't show"

    • "show": Shows the product number (or order number) in the product box.

    • "per layout type": The display is controlled separately in the blocks "Product box (Layout type 'Standard')", "Product box (Layout type 'Big image')" and "Product box (Layout type 'Minimal content')".

  • Show manufacturer

    • "don't show"

    • "show": Shows the manufacturer name in the product box.

    • "per layout type": The display is controlled separately in the blocks "Product box (Layout type 'Standard')", "Product box (Layout type 'Big image')" and "Product box (Layout type 'Minimal content')".

  • Show price unit

    • "don't show": Hides the price per unit (basic unit) if it is not relevant for your shop.

    • "show (default)"

  • Show cheapest price

    • "don't show"

    • "show (default)"

  • Show list price

    • "don't show"

    • "show (default)"

  • Show list price percentage

    • "don't show"

    • "show (default)"

  • twt.listing.variantCount – hint text for the variant count (slots)

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show product description from...
  • Tab "Listing pages" => Block "Product box" => Section "Content" => Use short description

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show variant characteristics

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show product number

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show manufacturer

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show price unit

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show cheapest price

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show list price

  • Tab "Listing pages" => Block "Product box" => Section "Content" => Show list price percentage

  • Tab "Listing pages" => Block "Product box (Layout type 'Standard')" => Section "Content" => Show product number

  • Tab "Listing pages" => Block "Product box (Layout type 'Standard')" => Section "Content" => Show manufacturer

  • Tab "Listing pages" => Block "Product box (Layout type 'Big image')" => Section "Content" => Show product number

  • Tab "Listing pages" => Block "Product box (Layout type 'Big image')" => Section "Content" => Show manufacturer

  • Tab "Listing pages" => Block "Product box (Layout type 'Minimal content')" => Section "Content" => Show product number

  • Tab "Listing pages" => Block "Product box (Layout type 'Minimal content')" => Section "Content" => Show manufacturer

  • twt.listing.variantCount

    Note: The product description or the short description is only available in the "Standard" layout type of the product box.

    Configuration

    Theme configuration

    Options

    Note: The slots work independently of the "Show product number" and "Show manufacturer" options and can be freely combined with them.

    Snippets

    Summary

    Theme configuration

    Custom fields

    Snippets

    Further information

    Slots
    Product number in listings
    Manufacturer in listings
    Product short description

    Rating

    The product rating shows the average rating of a product in the product box. You decide where it sits – in the text area or directly on the product image – and what it shows: stars only, stars with the number of reviews, or a compact number.

    Looking for the rating on the product page? For the buy box it is described in the article .

    Note: Products without a rating show nothing by default. With the "always show product rating" option, empty stars are displayed instead.

    Note: Product reviews are a core function of Shopware. ThemeWare® extends how they are displayed in the product box with placement, content and appearance.

    Whether reviews are possible and visible at all is controlled centrally in the Shopware settings ("Settings" > "Shop" > "Products" > "Show reviews"). To learn how to manage, approve and comment on reviews, see:


    Configuration

    Theme configuration

    1. Go to the "Listing pages" tab

    2. Expand the "Product box" block

    3. Scroll to the section "Product rating"

    4. Choose the desired option under "Show product rating"

    5. Use "Placement" to define whether the rating sits in the box or on the product image

    6. Choose what is displayed under "Content"

    7. Save your changes after editing


    • Show product rating

      • "don't show": The rating does not appear in the product box.

      • "show (default)": The rating appears as soon as the product has been rated.


    How the stars themselves are drawn is defined centrally via the "Star style" – solid or as an outline. The setting applies everywhere stars appear, so on the product page and in the testimonials as well. The same is true for the "Star" and "Star (blank)" colours.


    • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Show product rating

    • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Placement

    • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Position (in the box)

    "always show product rating": The rating also appears for products that have not been rated yet – as empty stars. This keeps all product boxes at the same height.
  • Placement

    • "in the box (default)": In the text area – the exact spot is defined by "Position (in the box)".

    • "on the product image": Placed over the image – the exact spot is defined by "Position (on product image)".

  • Position (in the box)

    • "above the product name (default)"

    • "below the product name"

  • Position (on product image)

    • "top right", "bottom right", "bottom left" or "bottom center (default)"

  • Content

    • "Simple (default)": Stars only.

    • "Detailed": Stars + number of reviews in brackets (shown as soon as the review count is available).

    • "Number": Compact number instead of stars (e.g. "3.4 ★"). The decimal separator follows the storefront language.

  • Layout type (in the box)

    • "Standard": Plain stars.

    • "Decorated": Stars flanked by lines (follows the text alignment).

  • Layout type (on product image)

    • "Box": Background + shadow (better legibility on the image).

    • "Clean": No background/shadow – the stars sit directly on the image.

  • Corner type (on product image)

    • "not rounded"

    • "rounded corners": Uses the "Rounded corners" configuration ("Layout" > "Layout" > "Rounded corners").

    • "round corners (Pill)": Uses a predefined radius for round corners.

  • Hover effect (on product image)

    • "always visible (default)"

    • "reveal on hover": The rating stays hidden and slides in when the product box is hovered.

    • "hide on hover": The rating is visible and slides out when the product box is hovered – handy to free up the image for the buttons appearing there.

    • The direction it slides in or out follows the alignment.

  • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Position (on product image)
  • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Content

  • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Layout type (in the box)

  • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Layout type (on product image)

  • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Corner type (on product image)

  • Tab "Listing pages" => Block "Product box" => Section "Product rating" => Hover effect (on product image)

  • Tab "Layout" => Block "Product rating" => Section "Basic configuration" => Star style

  • Tab "Layout" => Block "Product rating" => Section "Colour configuration" => Star

  • Tab "Layout" => Block "Product rating" => Section "Colour configuration" => Star (blank)

  • Options

    Note: "Layout type (on product image)", "Corner type (on product image)" and "Hover effect (on product image)" only take effect when the rating sits on the product image. "Corner type" additionally only applies to the "Box" layout type. The hover effect has no effect on touch devices – there the rating stays permanently visible.

    Note: The positions "top right", "bottom right" and "bottom left" can overlap with the wishlist and Quickview button (see "Position" in the "Wishlist button" section).

    Appearance of the stars

    Summary

    Theme configuration

    Rating on product pages
    Reviews

    Delivery information

    The delivery information shows the availability of a product in the product box, above the price: a status dot plus the delivery time maintained on the product.

    Four states are covered:

    • available (green)

    • pre-order (yellow)

    • ready for shipping in x days (yellow)

    • currently not available (red)


    1. Go to the "Listing pages" tab

    2. Expand the "Product box" block

    3. Scroll to the section "Delivery information"


    • Show delivery information

      • "don't show"

      • "show"


    • Tab "Listing pages" => Block "Product box" => Section "Delivery information" => Show delivery information

    • Tab "Listing pages" => Block "Product box" => Section "Delivery information" => Layout type

    • wishlist.deliveryTimeAvailable

    • wishlist.deliveryShipping

    • wishlist.deliveryTimeRestock

    Enable the configuration "Show delivery information"
  • Choose the desired appearance under "Layout type"

  • Save your changes after editing

  • Layout type
    • "inherit - like the product page": Uses the layout type of the product page (Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Basic configuration" => Layout type), so both surfaces stay in sync.

    • "Text": A plain line with the status dot – the familiar Shopware look, but in the ThemeWare® group.

    • "Label": The same line on a surface tinted in the status colour (green / yellow / red).

    • "Badge": A rounded badge without the dot – inherits the corner style and font size of the product badges.

    • "Chip": The dot sits in a tinted circle with the text next to it; hovering the product box grows the circle behind the text into a pill.

    wishlist.currentlyNotAvailable

    Note: Products without a delivery time show nothing.

    Configuration

    Theme configuration

    Options

    Summary

    Theme configuration

    Snippets

    Label | Badge | Chip | Text