All pages
Powered by GitBook
1 of 62

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Custom announcement

The "Custom announcement" extension is an info element that can be displayed on product pages or in the checkout.

Status message can be displayed here. The element is suitable, for example, to inform about changed shipping times due to vacation or absence.

ThemeWare® "Custom announcement" (Product pages)
ThemeWare® "Custom announcement" (Checkout)

Note: The announcement is displayed if it is enabled in the theme configuration (either everywhere, only on product pages or only in the checkout), the "twt.extension.customAnnouncement.content" snippet is filled and – if set – the current date is within the configured start/end period.


Configuration

Theme configuration

  1. Go to the "Extensions" tab

  2. Expand the "Custom announcement (on product pages and in the checkout)" block

  3. Set the configuration "Show custom announcement" to the desired mode ("show", "show (only on product pages)" or "show (only in checkout)")

  4. Save your changes after editing

  • Edit the text using the following snippet:

    • twt.extension.customAnnouncement.content


  • Show custom announcement

    • Defines where the announcement appears: "show" (everywhere), "show (only on product pages)" or "show (only in checkout)".

  • Start date / End date


  • Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)" => Show custom announcement

  • Tab "Extensions" => Block "Custom announcement (on product pages and in the checkout)" => Section "Basic configuration" => Start date / End date

  • twt.extension.customAnnouncement.content

Limits the display of the announcement to a period.

Content

Note: For information on how to edit snippets, see the following instructions:

Tip: If a change does not affect the storefront, just clear the Shopware cache:

Options

Summary

Theme configuration

Snippet

Texts: Editing and translation
Clearing / warming up the Shopware cache

New badge

The new badge highlights new products – in the product box on listing pages and on the product page (gallery or buybox).

New

The "New" status is determined by the Shopware core. ThemeWare® has no control over this.


Configuration

Theme configuration

Listing pages

  1. Go to the "Listing pages" tab

  2. Expand the "Product badges (in the product box)" block

  3. Scroll to the section "Badge: New badge"

  4. Enable the configuration "Show new badge"

  5. Save your changes after editing

  1. Go to the "Product pages" tab

  2. Expand the "Product badges (in the image gallery or buy box)" block

  3. Scroll to the section "Badge: New badge"


  • Tab "Listing pages" => Block "Product badges (in the product box)" => Section "Badge: New badge" => Show new badge

  • Tab "Product pages" => Block "Product badges (in the image gallery or buy box)" => Section "Badge: New badge" => Show new badge

  • listing.boxLabelNew

    • Note: Shopware standard snippet (not a ThemeWare® snippet).

  • twt.extension.newBadge.icon

Set the configuration "Show new badge" to "show in the image gallery" or "show in the buy box"
  • Save your changes after editing

  • Note: May be replaced by a theme configuration.

  • Product pages

    Note: The badge is displayed if Shopware marks the product as "New" – provided the new badge is enabled. The ThemeWare® badge only appears if the ThemeWare® mode is selected in the "New badge (Product badges)" setting; otherwise Shopware's default badge is used.

    Summary

    Theme configuration

    Snippets

    Quickview

    Note: This feature is in beta and may still change in an upcoming update.

    The quickview feature adds a button to the product box in listings that opens a quick view of the product in a modal.


    Configuration

    Theme configuration

    1. Go to the "Others" tab

    2. Expand the "Beta" block

    3. Set the configuration "Quickview" to "yes"

    4. Save your changes after editing


    • Tab "Others" => Block "Beta" => Quickview

    • twt.extension.quickview.title

    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".


    1. Switch to the "Listing pages" tab

    2. Open the "Product box

    Summary

    Theme configuration

    Snippet

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

  • 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:

    Configuration

    Theme configuration

    Custom field

    Summary

    Theme configuration

    Custom field

    Further information

    Teaser text

    Product boxes

    Product badges

    With product badges you highlight products in the product box (listing pages) and on the product page (gallery or buybox) – e.g. as sold, new, discount, topseller, free shipping or with the stock.

    ThemeWare® "Product badges" (Categories)
    ThemeWare® "Product badges" (Product pages / Gallery)
    ThemeWare® "Product badges" (Product pages / Buybox)

    Note: The product badges are independent of one another – depending on the product data and configuration, several badges can appear at the same time. For each badge you decide separately whether it is shown in the product box on listing pages and/or on the product page (in the gallery or in the buybox), provided the badge is enabled and the product meets the corresponding condition.


    Configuration

    You can find the configuration in the tabs "Content", "Listing pages" and "Product pages":

    Tab "Content" => Block "Product badges"

    Tab "Listing pages" => Block "Product badges (in the product box)"

    Tab "Product pages" => Block "Product badges (in the image gallery or buy box)"

    Available badges


    • Tab "Content" => Block "Product badges"

    • Tab "Listing pages" => Block "Product badges (in the product box)"

    • Tab "Product pages" => Block "Product badges (in the image gallery or buy box)"

    Delivery time label

    The delivery time note shows the delivery time of an available product in the buybox. If a product is out of stock but can be restocked, the note "Ready for shipping in …" can be shown instead.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Delivery information (in the buy box)" block

    3. Scroll to the section "Delivery time"

    4. Enable the configuration "Show 'Delivery time'" and/or "Show 'Ready for shipping in …'"

    5. Save your changes after editing


    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Delivery time" => Show 'Delivery time'

    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Delivery time" => Show 'Ready for shipping in …'

    • detail.deliveryTimeAvailable

    • detail.deliveryTimeRestock

    Shopping Experiences Header

    The Shopping Experiences Header is a special header display where the header overlays the top area of a shopping experience (CMS page). It is especially suitable for overlaying images, videos and sliders.

    On the home page the header overlays the shopping experience directly; for listing pages you additionally enable it via a custom field.

    Important: So that the element behind the header is visible, the background color of the header and its elements should be set to "transparent" or "rgba(0, 0, 0, 0)".


    Configuration

    Theme configuration

    1. Go to the tab "Header"

    2. Expand the block "Shopping Experiences Header"

    3. Set the configuration "Shopping Experiences Header" to "enabled (Header overlays the Shopping Experience)"

    4. Save your changes after editing

    On listing pages you control the Shopping Experiences Header per category via the custom field "Show 'Shopping Experiences Header'":

    • inherit from theme configuration – uses the global setting from the theme configuration

    • no – disables the Shopping Experiences Header for this category

    • yes – enables the Shopping Experiences Header for this category


    • Tab "Header" => Block "Shopping Experiences Header" => Shopping Experiences Header

    • "Show 'Shopping Experiences Header'" (listing pages)


    You can find a tutorial on how to use the "Shopping Experiences Header" in our Knowledge Base:

    Topseller badge

    The topseller badge marks highlighted products – in the product box on listing pages and on the product page (gallery or buybox).

    Topseller

    The "Topseller" status is determined by the Shopware core. ThemeWare® has no control over this.


    Configuration

    Theme configuration

    Listing pages

    1. Go to the "Listing pages" tab

    2. Expand the "Product badges (in the product box)" block

    3. Scroll to the section "Badge: Topseller badge"

    4. Enable the configuration "Show topseller badge"

    5. Save your changes after editing

    1. Go to the "Product pages" tab

    2. Expand the "Product badges (in the image gallery or buy box)" block

    3. Scroll to the section "Badge: Topseller badge"


    • Tab "Listing pages" => Block "Product badges (in the product box)" => Section "Badge: Topseller badge" => Show topseller badge

    • Tab "Product pages" => Block "Product badges (in the image gallery or buy box)" => Section "Badge: Topseller badge" => Show topseller badge

    • listing.boxLabelTopseller

      • Note: Shopware standard snippet (not a ThemeWare® snippet).

    • twt.extension.topsellerBadge.icon

    Sold badge

    The sold badge marks sold-out products – in the product box on listing pages and on the product page (gallery or buybox).

    Sold out

    The status "Sold out" is fulfilled in Shopware if a product is in on "Clearance sale" and the "Available stock" is less than the "Min. order quantity". You can find more information in the Shopware documentation.


    Configuration

    Theme configuration

    Listing pages

    1. Go to the "Listing pages" tab

    2. Expand the "Product badges (in the product box)" block

    3. Scroll to the section "Badge: Sold badge"

    4. Enable the configuration "Show sold badge"

    5. Save your changes after editing

    1. Go to the "Product pages" tab

    2. Expand the "Product badges (in the image gallery or buy box)" block

    3. Scroll to the section "Badge: Sold badge"


    • Tab "Listing pages" => Block "Product badges (in the product box)" => Section "Badge: Sold badge" => Show sold badge

    • Tab "Product pages" => Block "Product badges (in the image gallery or buy box)" => Section "Badge: Sold badge" => Show sold badge

    • twt.extension.stockBadge.noStock

    • twt.extension.soldBadge.icon

      • Note

    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

    Product datasheets

    You can add product data sheets in PDF format to the product using custom fields in the respective product. The data sheets can be displayed on product pages either in the "Properties" tab or in a separate "Datasheets" tab.


    1. Go to the "Product pages" tab

    2. Expand the "Tab "Description"" block

    Custom tab

    With ThemeWare® you have the option of filling a tab on product pages individually by using a custom field.


    1. Go to the "Product pages" tab

    2. Expand the "Tab "Custom content"" block

    Discount badge

    The discount badge points out reduced products – in the product box on listing pages and on the product page (gallery or buybox).

    The "Discount" of a product is calculated from the difference between the "List price" and the "Price". For more information, see the .


    1. Go to the "Listing pages" tab

    Symbols tab

    The Symbols tab displays the product symbols of a product in a separate tab on the product page.


    1. Switch to the tab "Product pages"

    2. Open the block "Product symbols"

    Datasheets tab

    The datasheets tab shows the datasheets of a product in a separate tab on the product page.


    1. Go to the "Product pages" tab

    2. Expand the "Tab "Datasheets"" block

    Free shipping badge

    The free shipping badge marks products with free shipping – in the product box on listing pages and on the product page (gallery or buybox).

    The status "Free shipping" is fulfilled in Shopware if a product is configured as "Free shipping”. You can find more information in the .


    1. Go to the "Listing pages" tab

    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":

    Note: The delivery time note is displayed if the product is available (stock ≥ "Min. order quantity", or a digital product) and a delivery time is set – provided the "Show 'Delivery time'" configuration is enabled. If the stock is below the "Min. order quantity" but a delivery time and a restock time are set, "Ready for shipping in …" is shown instead, provided "Show 'Ready for shipping in …'" is enabled.

    Note: The appearance of both notes follows the "Layout type" in the "Basic configuration" section.

    Summary

    Theme configuration

    Snippets

    Set the configuration "Show topseller badge" to "show in the image gallery" or "show in the buy box"
  • Save your changes after editing

  • Note: May be replaced by a theme configuration.

  • Product pages

    Note: The badge is displayed if "Highlight product" is enabled for the product – provided the topseller badge is enabled. The ThemeWare® badge only appears if the ThemeWare® mode is selected in the "Topseller badge (Product badges)" setting; otherwise Shopware's default badge is used.

    Summary

    Theme configuration

    Snippets

    Set the configuration "Show sold badge" to "show in the image gallery" or "show in the buy box"
  • Save your changes after editing

  • : May be replaced by a theme configuration.

    Product pages

    Note: The badge is displayed if the product is on "Clearance sale" and the stock is below the "Min. order quantity" – provided the sold badge is enabled for the product box (listing pages) or the product page (gallery or buybox).

    Summary

    Theme configuration

    Snippets

    Manufacturer in listings
    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

    Stock badge

  • Topseller badge

  • Summary

    Theme configuration

    Discount badge
    Free shipping badge
    New badge
    Sold badge
    Expand the "Product badges (in the product box)" block
  • Scroll to the section "Badge: Free shipping badge"

  • Enable the configuration "Show free shipping badge"

  • Save your changes after editing

    1. Go to the "Product pages" tab

    2. Expand the "Product badges (in the image gallery or buy box)" block

    3. Scroll to the section "Badge: Free shipping badge"

    4. Set the configuration "Show free shipping badge" to "show in the image gallery" or "show in the buy box"

    5. Save your changes after editing


    • Tab "Listing pages" => Block "Product badges (in the product box)" => Section "Badge: Free shipping badge" => Show free shipping badge

    • Tab "Product pages" => Block "Product badges (in the image gallery or buy box)" => Section "Badge: Free shipping badge" => Show free shipping badge

    • general.deliveryShippingFree

      • Note: Shopware standard snippet (not a ThemeWare® snippet).

    • twt.extension.shippingFreeBadge.icon

      • Note: May be replaced by a theme configuration.

    Free shipping

    Configuration

    Theme configuration

    Listing pages

    Shopware documentation

    Product pages

    Note: The badge is displayed if the product is configured as "Free shipping" – provided the free shipping badge is enabled for the product box (listing pages) or the product page (gallery or buybox).

    Summary

    Theme configuration

    Snippets

    Scroll to the section "Datasheets"

  • Enable the configuration "Show datasheets"

  • Optional: Use the "Show preview" configuration to control whether the embedded PDF preview is shown in the description tab

  • Save your changes after editing

    1. Go to the "Product pages" tab

    2. Expand the "Tab "Datasheets"" block

    3. Enable the configuration "Show datasheets"

    4. Save your changes after editing

    1. Switch via the main navigation to the "Product managment" (1) (2) ("Catalogues" => "Products")

    2. Choose the product you want to edit (3)

    3. Switch to the tab "Specifications"

    4. Scroll to the section "Custom fields"

    5. Select the custom field set "Datasheets" of your theme

    6. Select a datasheet (PDF file) from your media manager in the custom field "Datasheet 1-3"

    7. Enter the desired link text in the custom field "Datasheet 1-3 – Title"

    8. Optional: Enter a description in the custom field "Datasheets (Text)"

    9. Save your changes

    Shopware 6 product managment

    In the separate datasheets tab, the embedded PDF preview is always displayed. In the description tab, it is only shown if the "Show preview" configuration is enabled. The datasheet download link remains available at all times in both cases.



    • Tab "Product pages" => Block "Tab "Description"" => Section "Datasheets" => Show datasheets

    • Tab "Product pages" => Block "Tab "Description"" => Section "Datasheets" => Show preview

    • Tab "Product pages" => Block "Tab "Datasheets"" => Show datasheets tab

    • twt.detail.datasheets.link

      • %name% is replaced by the file name.

    • twt.detail.datasheets.fallback

    • Datasheet 1-3

    • Datasheet 1-3 – Title

    • Datasheets (Text)


    Note: Currently, only "PDF" files are supported.

    Note: The datasheets are displayed within the product description if the feature is enabled in the theme configuration, the dedicated datasheet tab is disabled, and at least one datasheet has been assigned using a custom field (Datasheet 1–3).

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki: Providing datasheets as PDF

    Note: The tab is displayed if the feature is enabled as a dedicated tab in the theme configuration and at least one datasheet has been assigned using a custom field (Datasheet 1–3).

    Configuration

    Theme configuration

    Datasheets in the properties tab

    Datasheets in a separate tab

    Datasheets (Custom fields)

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom fields

    Further information

    Datasheets
    Datasheets tab
    Enable the configuration "Show custom tab"
  • Save your changes after editing

  • The "Custom tab" can be filled via a custom field in the corresponding product. As with all custom fields, make sure to fill them in for each variant.

    The tab name is based on the snippet twt.detail.tabCustom.title.

    This snippet is intended for a global labelling of the "Custom tab". This means that this tab is named the same on all product pages. This is sufficient if the tab is filled with the same content across all products (e.g. "Care instructions").

    If you want to name the tab individually in your products, you can use the custom field "Custom tab – Title".

    A headline is displayed within the tab. You edit the text using the snippet twt.detail.tabCustom.headline (%product% is replaced by the product name).

    To fill the text of the tab, just use the custom field "Custom tab – Text". The tab is only shown if this custom field is actually filled for the corresponding product or variant.


    • Show headline

      • Specify whether the headline is displayed within the tab ("show" / "don't show").



    • Tab "Product pages" => Block "Tab "Custom content"" => Show custom tab

    • Tab "Product pages" => Block "Tab "Custom content"" => Section "Basic configuration" => Show headline

    • Title

      • twt.detail.tabCustom.title

    • Headline

      • twt.detail.tabCustom.headline

    • Custom tab – Title

    • Custom tab – Text

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki: Creating a custom tab on the product page

    Configuration

    Theme configuration

    Content

    Title

    Headline

    Text

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom fields

    Custom tab – Title
    Custom tab – Text
    Expand the "Product badges (in the product box)" block
  • Scroll to the section "Badge: Discount badge"

  • Enable the configuration "Show discount badge"

  • Save your changes after editing

    1. Go to the "Product pages" tab

    2. Expand the "Product badges (in the image gallery or buy box)" block

    3. Scroll to the section "Badge: Discount badge"

    4. Set the configuration "Show discount badge" to "show in the image gallery" or "show in the buy box"

    5. Save your changes after editing


    You control how the discount is displayed in the "Content" tab:

    Tab "Content" => Block "Product badges" => Section "Badge: Discount badge"

    • Content: Defines how the discount is shown – e.g. "% (default)", "-25 %", "25 % saved", "-35 €" or "35 € saved".

    • Round number: Defines the rounding of the value – "0.12 (default)", "0.1" or "0".


    • Tab "Listing pages" => Block "Product badges (in the product box)" => Section "Badge: Discount badge" => Show discount badge

    • Tab "Product pages" => Block "Product badges (in the image gallery or buy box)" => Section "Badge: Discount badge" => Show discount badge

    • Tab "Content" => Block "Product badges" => Section "Badge: Discount badge" => Content

    • Tab "Content" => Block "Product badges" => Section "Badge: Discount badge" => Round number

    • twt.extension.discountBadge.discount

      • %discount% is replaced by the discount.

    • twt.extension.discountBadge.discountShort

      • %discount% is replaced by the discount.

      • %currency% is replaced by the current currency symbol.

    • twt.extension.discountBadge.percentage

      • %discount% is replaced by the percentage discount.

    • twt.extension.discountBadge.percentageShort

      • %discount% is replaced by the percentage discount.

      • %currency%

    Discount

    Configuration

    Theme configuration

    Listing pages

    Shopware documentation

    Product pages

    Note: The badge is displayed if the product has a "List price" that results in a discount (not for price ranges or "from" prices) – provided the discount badge is enabled. The ThemeWare® badge only appears if the ThemeWare® mode is selected in the "Discount badge (Product badges)" setting; otherwise Shopware's default badge is used.

    Options

    Summary

    Theme configuration

    Snippets

    Set the "Show product symbols" configuration to "show in a separate tab"

  • Save your changes after editing

  • The "Symbols tab" is filled via properties with an image and/or via custom fields in the respective product. As with all custom fields, make sure to fill them for variants accordingly.

    The name of the tab is based on the snippet twt.detail.tabSymbols.title.

    A headline is displayed within the tab. You can adjust the text via the snippet twt.detail.tabSymbols.headline (%product% is replaced by the product name).



    • Show headline

      • Specify whether the headline is displayed within the tab ("show" / "don't show").


    • Tab "Product pages" => Block "Product symbols" => Show product symbols

    • Tab "Product pages" => Block "Tab 'Symbols'" => Section "Basic configuration" => Show headline

    • Title

      • twt.detail.tabSymbols.title

    • Headline

      • twt.detail.tabSymbols.headline

        • %product% is replaced by the product name.


    Note: The tab is displayed when the "Show product symbols" configuration is set to "show in a separate tab" and at least one symbol has been maintained for the product – via a property with an image or a custom field.

    Configuration

    Theme configuration

    Content

    Title

    Headline

    Note: You can find out how to edit snippets in the following tutorial:

    Tip: If a change does not affect the storefront, simply clear the Shopware cache:

    Custom fields

    Options

    Summary

    Theme configuration

    Snippets

    Further information

    Symbols
    Properties
    Product symbols
    Enable the configuration "Show datasheets tab"
  • Save your changes after editing

  • The "Datasheets tab" can be filled via custom fields in the corresponding product. As with all custom fields, make sure to fill them in for each variant.

    The tab name is based on the snippet twt.detail.tabDatasheets.title.

    A headline is displayed within the tab. You edit the text using the snippet twt.detail.tabDatasheets.headline (%product% is replaced by the product name).


    • Show headline

      • Specify whether the headline is displayed within the tab ("show" / "don't show").


    • Tab "Product pages" => Block "Tab "Datasheets"" => Show datasheets tab

    • Tab "Product pages" => Block "Tab "Datasheets"" => Section "Basic configuration" => Show headline

    • Title

      • twt.detail.tabDatasheets.title

    • Headline

      • twt.detail.tabDatasheets.headline


    Note: The tab is displayed if the feature is enabled as a dedicated tab in the theme configuration and at least one datasheet has been assigned using a custom field (Datasheet 1–3).

    Configuration

    Theme configuration

    Content

    Title

    Headline

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippets

    Further information

    Product datasheets

    Custom field (listing pages)

    Summary

    Theme configuration

    Custom field

    Further information

    Stock badge

    The stock badge shows the stock of a product – in the product box on listing pages and on the product page (gallery or buybox).


    Configuration

    Theme configuration

    Listing pages

    1. Go to the "Listing pages" tab

    2. Expand the "Product badges (in the product box)" block

    3. Scroll to the section "Badge: Stock badge"

    4. Enable the configuration "Show stock badge"

    5. Save your changes after editing

    1. Go to the "Product pages" tab

    2. Expand the "Product badges (in the image gallery or buy box)" block

    3. Scroll to the section "Badge: Stock badge"


    You control the display mode and the thresholds in the "Content" tab:

    Tab "Content" => Block "Product badges" => Section "Badge: Stock badge"

    • Mode

      • "Show stock above/below the threshold": The badge only appears for low stock (below "Threshold (low stock)") or high stock (above "Threshold (high stock)").

      • "Always show stock": The current stock is shown regardless of the thresholds.


    • Tab "Listing pages" => Block "Product badges (in the product box)" => Section "Badge: Stock badge" => Show stock badge

    • Tab "Product pages" => Block "Product badges (in the image gallery or buy box)" => Section "Badge: Stock badge" => Show stock badge

    • Tab "Content" => Block "Product badges" => Section "Badge: Stock badge" => Mode

    • twt.extension.stockBadge.highStock.label

      • %stock% is replaced by the "Threshold (high stock)".

    is replaced by the current currency symbol.
    Set the configuration "Show stock badge" to "show in the image gallery" or "show in the buy box"
  • Save your changes after editing

  • Threshold (low stock) / Threshold (high stock): Limits for the "above/below the threshold" mode.
    Tab "Content" => Block "Product badges" => Section "Badge: Stock badge" => Threshold (low stock) / Threshold (high stock)
    twt.extension.stockBadge.lowStock.label
    • %stock% is replaced by the available stock.

  • twt.extension.stockBadge.stock.label

    • %stock% is replaced by the available stock.

  • twt.extension.stockBadge.highStock.icon

    • Note: May be replaced by a theme configuration.

  • twt.extension.stockBadge.lowStock.icon

    • Note: May be replaced by a theme configuration.

  • Product pages

    Note: The badge is displayed if the stock badge is enabled – permanently or only above/below the thresholds, depending on the selected mode (see Options).

    Options

    Summary

    Theme configuration

    Snippets

    Texts: Editing and translation
    Clearing / warming up the Shopware cache
    Edit and translate texts
    Clearing / warming up the Shopware cache
    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    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)

    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
    "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

    Product downloads

    You can store product downloads of the file type "PDF" in custom fields for the respective product. The downloads can be displayed on product pages in the "Properties" tab.


    1. Go to the "Product pages" tab

    2. Expand the "Tab "Description"" block

    Scroll to the section "Downloads"

  • Enable the configuration "Show downloads"

  • Save your changes after editing

    1. Switch via the main navigation to the "Product managment" (1) (2) ("Catalogues" => "Products")

    2. Choose the product you want to edit (3)

    3. Switch to the tab "Specifications"

    4. Scroll to the section "Custom fields"

    5. Select the custom field set "Downloads" of your theme

    6. Select a file (PDF file) from your media manager in the custom field "Download 1-3"

    7. Enter the desired link text in the custom field "Download 1-3 – Title"

    8. Optional: Enter a description in the custom field "Download 1-3 – Description"

    9. Save your changes

    Shopware 6 product managment


    • Tab "Product pages" => Block "Tab "Description"" => Section "Downloads" => Show downloads

    • twt.detail.downloads.link

      • %name% is replaced by the file name.

    • twt.detail.downloads.fallback

    • Download 1-3

    • Download 1-3 – Title

    • Download 1-3 – Description

    Note: Currently, only "PDF" files are supported.

    Note: Unfortunately, Shopware 6's media manager does not currently support zip files. As soon as this is possible, you can also use these.

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki: Providing downloads on products

    Note: The downloads are displayed in the "Description" tab if the "Show downloads" configuration is enabled and at least one download has been added via a custom field (Download 1–3).

    Configuration

    Theme configuration

    Downloads (Custom fields)

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom fields

    Downloads

    Not available label

    The 'Not available' note marks products in the buybox that are not available (inactive).


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Delivery information (in the buy box)" block

    3. Scroll to the section "Not available"

    4. Enable the configuration "Show 'Not available'"

    5. Save your changes after editing


    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Not available" => Show 'Not available'

    • general.deliveryNotAvailable

    Stock label

    The stock note shows the stock of a product in the buybox. Depending on the selected mode it appears permanently or only above/below the thresholds.

    Note: The stock note is a ThemeWare® addition without a Shopware counterpart. It therefore also appears when the compatibility option "Delivery information (in the buy box)" is set to "default".


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Delivery information (in the buy box)" block

    3. Scroll to the section "Stock"

    4. Enable the configuration "Show stock note"

    5. Save your changes after editing


    • Mode

      • "Show stock above/below the threshold": The note only appears if the stock is below the "Threshold (low stock)" or above the "Threshold (high stock)".

      • "Always show stock": The current stock is shown regardless of the thresholds.


    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Stock" => Show stock note

    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Stock" => Mode

    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Stock" => Threshold (low stock) / Threshold (high stock)

    • twt.detail.stockLabel.highStock.label

      • %stock% is replaced by the "Threshold (high stock)".

    Note: The note is displayed if the product is inactive (not active) – provided the "Show 'Not available'" configuration is enabled. Its appearance follows the "Layout type" in the "Basic configuration" section.

    Summary

    Theme configuration

    Snippet

    Threshold (low stock) / Threshold (high stock): Limits for the "above/below the threshold" mode.
    twt.detail.stockLabel.lowStock.label
    • %stock% is replaced by the available stock.

  • twt.detail.stockLabel.stock.label

    • %stock% is replaced by the available stock.

  • Note: The note is displayed if "Show stock note" is enabled – permanently or only above/below the thresholds, depending on the selected mode (see Options). Its appearance follows the "Layout type" in the "Basic configuration" section.

    Options

    Summary

    Theme configuration

    Snippets

    Mega Menu (Flyout)

    The submenu of the top navigation shows the subcategories as soon as a menu item is addressed. ThemeWare® comes with five layout types for this – from the wide flyout through the card view to the compact dropdown – and several styles for the menu items within each layout type.

    Layout types

    You set the layout type in the "Header" tab => "Top navigation flyout" area => "Top navigation flyout" configuration. It then applies to the entire main navigation.

    Tip: You can override the layout type per category – for example a flyout with teasers for "Clothing" and a slim dropdown for "Sale". To do so, open the category in the Shopware admin and select the desired layout type under "Custom fields" => "Flyout (Genesis Pro)" => "Top navigation flyout". The default value "inherit from theme configuration" applies the global setting. With "no submenu" you hide the submenu for a single category.

    Default Flyout

    The flyout uses the full width and shows the subcategories in columns – the layout type with the most room for deep category trees.

    Flyout layout with button style
    Flyout layout with list style
    Flyout layout with SW6 style

    Sidebar

    The subcategories of the first level sit in a rail on the left, the content next to it changes as soon as an entry is addressed. This keeps the submenu tidy even with many categories.

    Sidbar layout with button style
    Sidbar layout with list style
    Sidbar layout with SW6 style

    Teaser

    Next to the categories there is room for up to three teasers with image, text and link – for a campaign or a new collection, for instance. The more teasers you add, the more space the teaser area gets. You maintain the teasers on the category under "Custom fields" => "Flyout (Genesis Pro)".

    Every subcategory of the first level is displayed as a card with its category image. Categories without an image do not appear as a card – so make sure every category has an image if you use this layout type.

    The dropdown opens a narrow card directly below the menu item instead of using the full width – suitable for flat category trees or individual menu items.

    How the individual menu items look is set separately for the flyout and the dropdown:

    • "Header" tab => "Top navigation flyout" area => "Basic configuration 'ThemeWare® Flyout'" section => "Style" configuration

      • The options are "List (Shopware 6)", "List", "List in columns (Shopware 5)" and "Buttons".

    • "Header" tab => "Top navigation flyout" area => "Basic configuration 'ThemeWare® Dropdown'" section => "Style" configuration

    The flyout style also applies to the "Cards", "Sidebar" and "Teaser" layout types – with one exception: "List in columns (Shopware 5)" only applies to the flyout (see below).

    You can use the button style when hovering over them or apply consistent colors to the buttons:

    You colour the surfaces of the menu items in the "Header" tab => "Top navigation flyout" area => "Colour configuration" section via the "Background colour (menu items)", "Background colour (menu items) @hover" and "Background colour (menu items) @active" configurations. In the flyout they are applied in the "Buttons" style, in the dropdown navigation in the "Buttons (compact)" and "Buttons" styles.

    Flyout and dropdown use the same colours and therefore look identical even if you use both layout types side by side.

    Via the "Glass effect [px] (panel)" configuration – also in the "Colour configuration" section – you blur the page content behind the panel. The effect only becomes visible once you choose a semi-transparent colour as the "Background colour (panel)". Recommended value: 10.

    Of course, the Glass effect works in all layout types:

    The "Shopware 5" style changes the column layout in the flyout layout to match the arrangement in Shopware 5's "Advanced Menu". The categories are not wrapped into rows but flow across four columns – if a category no longer fits into its column, it moves into the next one. If a category image is shown next to the categories, there are three columns.

    Because the columns are filled by height, this style is less suitable if the number of subcategories varies greatly.

    Sharing links

    With the sharing links, visitors can share a product via social networks and e-mail – displayed in the buybox on the product page.


    1. Go to the "Product pages" tab

    2. Expand the "Sharing links (in the buy box)" block

    Product symbols

    With the ThemeWare® "Product symbols" you display individual symbols and notice images such as care symbols (e.g. washing symbols), seals or certificates directly on the product page – below the product images, in the buy box, in the description, in the properties tab or in a separate tab.


    1. Switch to the tab "Product pages"

    The options are "List", "Buttons (compact)" and "Buttons".

    Cards

    Dropdown

    Styles

    The styles of the dropdown navigation are still in development. We welcome your constructive feedback.

    Dropdown: Button style

    Colours of the menu items

    Liquid glass effect

    Flyout: "Shopware 5" style

    The style only applies to the flyout. The "Cards", "Sidebar" and "Teaser" layout types bring their own arrangement and use the "List" style.

    Teaser layout with button style
    Teaser layout with list style
    Teaser layout with SW6 style
    Cards layout
    Dropdown layout with button style
    Dropdown layout with "button (compact)" style
    Dropdown layout with list style
    Buttons coloured on hover
    Buttons are coloured throughout
    Flyout layout with button stlye and glass effect (blur)

    Enable the configuration "Show sharing links"

  • Save your changes after editing

    • Customise the headline using the following snippet:

      • twt.detail.socialSharingLinks.headline

    For each channel (icon) you define a label (label – used as the icon's aria label) and a title (title – shown as a tooltip):

    • Facebook

      • twt.detail.socialSharingLinks.facebook.label

      • twt.detail.socialSharingLinks.facebook.title

    • Twitter

      • twt.detail.socialSharingLinks.twitter.label

      • twt.detail.socialSharingLinks.twitter.title

    • Pinterest

      • twt.detail.socialSharingLinks.pinterest.label

      • twt.detail.socialSharingLinks.pinterest.title

    • WhatsApp

      • twt.detail.socialSharingLinks.whatsapp.label

      • twt.detail.socialSharingLinks.whatsapp.title

    • X / Twitter

      • twt.detail.socialSharingLinks.x.label

      • twt.detail.socialSharingLinks.x.title

    • E-mail

      • twt.detail.socialSharingLinks.email.label

      • twt.detail.socialSharingLinks.email.title

    When sharing via e-mail, a pre-filled message is generated in addition. You can customise the salutation, message text and closing using the following snippets:

    • Salutation

      • twt.detail.socialSharingLinks.email.salutation

    • Message text

      • twt.detail.socialSharingLinks.email.body

    • Closing

      • twt.detail.socialSharingLinks.email.closing


    You decide which channels are offered individually in the same block – each via its own configuration for Facebook, Twitter, X, Pinterest, WhatsApp and e-mail.


    • Tab "Product pages" => Block "Sharing links (in the buy box)" => Show sharing links

    • Headline

      • twt.detail.socialSharingLinks.headline

    • E-mail

      • twt.detail.socialSharingLinks.email.body

      • twt.detail.socialSharingLinks.email.closing

      • twt.detail.socialSharingLinks.email.label

      • twt.detail.socialSharingLinks.email.salutation

      • twt.detail.socialSharingLinks.email.title

    • Facebook

      • twt.detail.socialSharingLinks.facebook.label

      • twt.detail.socialSharingLinks.facebook.title

    • Pinterest

      • twt.detail.socialSharingLinks.pinterest.label

      • twt.detail.socialSharingLinks.pinterest.title

    • Twitter

      • twt.detail.socialSharingLinks.twitter.label

      • twt.detail.socialSharingLinks.twitter.title

    • WhatsApp

      • twt.detail.socialSharingLinks.whatsapp.label

      • twt.detail.socialSharingLinks.whatsapp.title

    • X

      • twt.detail.socialSharingLinks.x.label

      • twt.detail.socialSharingLinks.x.title

    Configuration

    Theme configuration

    ThemeWare® "Sharing links"

    Content

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippets

    Open the block "
    Product symbols
    "
  • Select the desired position via the "Show product symbols" configuration

  • Optional: Use the further configuration options

  • Save your changes after editing

  • For symbols that are used on several products (e.g. care symbols or seals), it is best to use properties with an image:

    1. Switch via the main navigation to the "Properties" management of your shop ("Catalogues" => "Properties")

    2. Choose the desired property group

    3. Set the custom field "Show as product symbol" to "yes"

    4. Assign an image to each of the desired options of the group

    5. Save your changes

    Only options with an image are displayed as a symbol. The group will still appear in the properties table as usual.

    For symbols that only concern a single product, use the custom fields in the respective product:

    1. Switch via the main navigation to the "Products" management of your shop ("Catalogues" => "Products")

    2. Choose the desired product

    3. Switch to the tab "Specifications"

    4. Scroll to the block "Custom fields"

    5. Select the custom field set of your theme

    6. Select the desired images via the custom fields "→ Symbol 1" to "→ Symbol 3" and optionally assign a title to each

    7. Save your changes

    • Adjust the subheadline via the following snippet:

      • twt.detail.symbols.title

    • Adjust the description text via the following snippet and/or the "Product symbols (Text)" custom field – you select the source via the "Description text" configuration:

      • twt.detail.symbols.text


    • Style

      • Specify how the symbols are displayed: "Icons (side by side)", "Icon with text" or "Icon list". "Standard (recommended)" automatically selects the appropriate style for each position.

    • Size

      • Specify the height of the symbols in pixels. The width results from the respective image – the aspect ratio is preserved, regardless of whether you upload square, portrait or landscape images. In the "Icon list" style, the icons get a fixed square column of this size so that the titles align left.

    • Show subheadline

      • Specify whether a subheadline is displayed above the symbols (image gallery, buy box and description – in the separate tab the tab headline is used instead).

    • Description text

      • Specify where the description text above the symbols comes from: snippet, custom field or both – or hide it completely.



    • Tab "Product pages" => Block "Product symbols" => Show product symbols

    • Tab "Product pages" => Block "Product symbols" => Section "Basic configuration" => Style / Size / Show subheadline / Description text

    • twt.detail.symbols.title (subheadline)

    • twt.detail.symbols.text (description text)

    • Show as product symbol (property group)

    • Symbol 1-3

    • Symbol 1-3 – Title


    If you want to display the product symbols in a separate tab, simply use the ThemeWare® Symbols tab:

    Note: The product symbols are displayed when the "Show product symbols" configuration is activated and at least one symbol has been maintained for the product – via a property with an image or a custom field.

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki: Showing care symbols & product symbols

    Configuration

    Theme configuration

    Product symbols below the gallery
    Product symbols in the buybox

    Content: Properties with an image

    Content: Custom fields in the product

    Note: The symbols from the custom fields are displayed before the symbols from the properties. The property symbols follow the native sorting of the properties (position of the group and sorting of its options).

    Tip: Upload the symbols as SVG or PNG in your desired colour – they are not recoloured.

    Text: Subheadline

    Text: Description text

    Note: You can find out how to edit snippets in the following tutorial:

    Tip: If a change does not affect the storefront, simply clear the Shopware cache:

    Options

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom fields

    Further information

    Symbols
    Properties
    Symbols tab

    Listing subcategories

    The "Subcategories in Listing" feature familiar from our themes for Shopware 5 is also available in ThemeWare® for Shopware 6.

    You can activate this theme extension via the theme configuration. Like all theme configurations, this configuration is also global. This means that the subcategory navigation will then appear on all CMS pages of the type "Listing page".

    Starting with ThemeWare® 3.2.4, you can activate/deactivate this global navigation via a custom field in selected categories.

    In addition, the extension can also be displayed on shop pages in the future; the test phase for this will start soon.

    ThemeWare® "Listing subcategories"

    The texts and images shown were taken from the category management ("Catalogues" => "Categories") of Shopware. The "Name" and the "Image" (= Display image) of the corresponding categories are displayed. The image is not mandatory.

    Note: As the name suggests, the ThemeWare® extension "Listing subcategories" only works on CMS pages of the type "Listing page". In addition, subcategories in Shopware 6 are only displayed for the main category.

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki:


    1. Go to the tab "Extensions"

    2. Expand the block "Listing subcategories (on listing pages)"

    3. Enable the configuration "Show 'Listing subcategories' (CMS listing pages)"

    1. Switch via the main navigation to the "Category managment" (1) (2) ("Catalogues" => "Categories")

    2. Choose the category you want to edit (3)

    3. To the right of the category list, the corresponding category now opens in the category editor (4)


    Here you have the following options for listing and shop pages:

    • don't show

    • show

    • show (via custom field)

    This is the default setting. In this case, the "Listing subcategories" will not be displayed on the corresponding page type.

    If you select the option show, the "Listing subcategories" will be displayed on all pages of the corresponding page type.

    If you select show (via custom field), the "Listing subcategories" will only be displayed on the corresponding page type if you have configured the custom field to yes in the corresponding category.

    Here you select the layout type (image only, text only or text below the image) and set the horizontal content alignment.

    Here you define the display mode of the images (cropped/cover or fixed height/contain) as well as width, height and minimum/maximum height.

    Here you adjust the colours: text, background and border colour (each also for the hover state) as well as the background colour of the image.

    Here you set the font family, font size, font weight and text formatting.

    Here you define the number of columns per breakpoint (phone, tablet, desktop) – i.e. how many subcategories are displayed per row.

    Here you control the lazy loading of the images (eager or lazy) for loading performance.


    There are currently 3 different display modes available (see screenshots below):

    • Text only

    • Image only

    • Text below the image


    From ThemeWare® 3.2.4, you can enable/disable this global subcategory navigation in selected categories using a custom field.


    • Tab "Extensions" => Block "Listing subcategories (on listing pages)" => Show 'Listing subcategories' (CMS listing pages)


    For more flexibility, the Pro Edition offers the CMS element of the same name – it lets you position the subcategories freely as a CMS block in your layouts:

    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:

    Texts: Editing and translation
    Clearing / warming up the Shopware cache
    Product symbols (Text)
    Edit and translate texts
    Clearing / warming up the Shopware cache

    Optional: Use the further configuration options

  • Save your changes after editing

  • You are in the tab "General"

  • In the block "General" you can edit the category name (Name).

  • Scroll to the block "Menu settings"

  • Here you can edit the category image (Display image)

  • Save your changes

  • Configuration

    Theme configuration

    Tip: In the Pro Edition, a corresponding CMS extension is also available. This allows you to freely position a dedicated CMS block in your layouts and configure it individually:

    Content

    Display options

    Note: Of course, only subcategories are displayed if a category has visible subcategories and Shopware provides them in the corresponding category tree.

    don't show

    show

    Tip: You can use the custom field to prevent the "Listing subcategories" from being displayed in a category, allowing you to customise selected categories individually.

    show (via custom field)

    Basic configuration

    Image configuration

    Colour configuration

    Typography

    Grid configuration

    Pagespeed configuration

    Layout types

    Custom field

    Summary

    Theme configuration

    Custom field

    Further information

    Listing subcategories
    Listing subcategories
    Listing subcategories
    Showing subcategories in the listing
    Shopware 6 "Category managment"
    Text only
    Image only
    Text below the image
    Mobile representation (all layout types)
    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
    Listing subcategories

    Benefits on product pages

    You can display shop and/or product benefits on product pages. Product benefits can be entered via a snippet and/or a custom field in the corresponding product.

    Note: You maintain the global "Shop benefits" using an individual snippet.

    ThemeWare® "Benefits on product pages"

    Note: The benefits are displayed if the "Show benefits" configuration is enabled and – depending on the "Content" setting – the selected content exists (the "twt.detail.benefits.content" snippet and/or the "Benefits" custom field on the product). The position setting controls whether they appear above the price or below the product specifications.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Benefits (in the buy box)" block

    3. Enable the configuration "Show benefits"

    4. Save your changes after editing

    • Customise the headline using the following snippet:

      • twt.detail.benefits.headline

    • You can customise the text using the following snippet:


    You adjust the display in the same block:

    • Content: Defines where the content comes from – "Snippet", "Custom field", "Custom field or snippet" or "Snippet and custom field".

    • Position: Defines whether the benefits appear "above the price" or "below the product specifications".

    • Layout type: "plain" or "emphasised".



    • Tab "Product pages" => Block "Benefits (in the buy box)" => Show benefits

    • Tab "Product pages" => Block "Benefits (in the buy box)" => Content

    • Tab "Product pages" => Block "Benefits (in the buy box)" => Position

    • Headline

      • twt.detail.benefits.headline

    • Text

    twt.detail.benefits.content

    Tab "Product pages" => Block "Benefits (in the buy box)" => Layout type

    twt.detail.benefits.content

    Note: You can find more information about the corresponding custom field in the article .

    Content

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom field

    Benefits
    Benefits
    Benefits
    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Announcement banner

    The announcement banner is a status bar above the header. Status messages can be displayed here.

    The banner is suitable for the promotion of campaigns, for example. Changes in shipping times due to vacation or absence can also be displayed.

    ThemeWare® "Announcement banner"

    Note: The announcement banner is shown above the header if the "Show announcement banner" configuration is enabled. If you have set a start and/or end date, it only appears within that period.


    Configuration

    Theme configuration

    1. Go to the tab "Extensions"

    2. Expand the block "Announcement banner (in the header)"

    3. Enable the banner with the configuration "Show announcement banner"

    4. Save your changes after editing

    • Edit the text of the announcement banner using the snippet twt.extension.announcementBanner.content

    • Optional: Edit the link URL using the snippet twt.extension.announcementBanner.link (only used if the "Link banner" configuration is enabled)


    • Closable

      • Adds a close button that lets visitors hide the banner (details below).

    • Start date / End date

    With the configuration "Closable", a close button is added to the banner. This allows the visitor to hide the banner for one day.

    This is logged via a "local storage" cookie. An seperate entry is added to the cookie consent from Shopware for this purpose. If this "comfort feature" is not agreed to, the close button is not displayed.

    Note: Please note that Shopware adds this entry for each installed theme! This option is therefore not recommended if you are using more than one ThemeWare® theme.


    • Tab "Extensions" => Block "Announcement banner (in the header)" => Show announcement banner

    • Tab "Extensions" => Block "Announcement banner (in the header)" => Section "Basic configuration" => Closable / Start date / End date / Link banner / Open link in new tab / Link relation "nofollow"

    • Text

      • twt.extension.announcementBanner.content

    • Link

    Limits the display of the banner to a period.

  • Link banner

    • Makes the entire banner clickable; you set the target URL via the snippet twt.extension.announcementBanner.link.

  • Open link in new tab

    • Opens the linked banner in a new browser tab.

  • Link relation "nofollow"

    • Adds the attribute rel="nofollow" to the banner link.

  • twt.extension.announcementBanner.link

  • Aria label

    • twt.extension.announcementBanner.ariaLabel

    • twt.extension.announcementBanner.closeButton.ariaLabel

  • Content

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Announcement banner closable

    Summary

    Theme configuration

    Snippets

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Product videos

    ThemeWare® provides the functionality of adding videos to products via custom fields and displaying them on product pages.

    ThemeWare® "Product videos"

    Note: The product videos are displayed if the "Show product videos" configuration is enabled and at least one video has been added to the product via a custom field (YouTube, Vimeo or Video 1–3). The position setting controls whether they appear above or below the properties.

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki:


    Configuration

    Theme configuration

    1. Go to the tab "Product pages"

    2. Expand the block "Tab "Description""

    3. Scroll to the section "Product videos"

    4. Enable the configuration "Show product videos"

    5. Optional: Use the further configuration options

    6. Save your changes after editing

    1. Switch via the main navigation to the "Product managment" (1) (2) ("Catalogues" => "Products")

    2. Choose the product you want to edit (3)

    3. Switch to the tab "Specifications"

    • Edit the headline in the "Description" tab using the following snippet:

      • twt.detail.productVideos.title


    • Product videos position

      • Specify whether the product videos are displayed "above the properties" or "below the properties".



    • Tab "Product pages" => Block "Tab "Description"" => Section "Product videos" => Show product videos / Product videos position

    • twt.detail.productVideos.title (in Tab "Description")

    • twt.detail.productVideos.fallback (fallback name of a video)

    • twt.detail.productVideos.iframe.title


    If you would like to display the product videos in a separate tab, simply use the ThemeWare® Videos tab:

    Scroll to the section "Custom fields"

  • Select the custom field set of your theme

  • Enter the video ID in the custom field "YouTube video" and/or "Vimeo video"

    • Tip: Multiple video IDs can be entered comma-separated

  • Save your changes

  • (title attribute of the video iframe)
  • twt.detail.productVideos.iframe.positionSuffix (position suffix in the iframe title)

  • Content

    Note: You can find more information about the corresponding custom field in the articles and .

    Text: Headline

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom fields

    Further information

    Videos
    YouTube video(s)
    Vimeo video(s)
    Video 1-3
    Videos tab
    Embedding product videos (YouTube & Vimeo)
    Shopware 6 product managment
    Video 1-3 – Title
    Product videos (Text)
    YouTube video(s)
    Vimeo video(s)
    Texts: Editing and translation
    Clearing / warming up the Shopware cache
    Configuring the Shopping Experiences Header | ThemeWare® Knowledge Baseknowledge.themeware.design
    ThemeWare® Knowledge Base => Configuring the Shopping Experiences Header
    Logo

    Rating on product pages

    The product rating shows the average rating of a product in the buy box – the stars plus the number of reviews, linking to the review tab.

    Looking for the rating in the product box? For listing pages it is described in the article .

    Note: Product reviews are a core function of Shopware. ThemeWare® merely extends how they are displayed in the buy box – above all with the "always show product rating" option.

    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 "Product pages" tab

    2. Expand the "Product rating (in the buy box or at the product name)" block

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

    4. Under "Placement" define where the rating appears

    5. Under "Arrangement" define whether the stars and the link sit next to or below each other

    6. Save your changes after editing

    • Edit the invitation shown for products without reviews using the snippet twt.detail.reviews.linkTextNoReviews

    • The stars and the number of reviews are added automatically


    • Show product rating

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

      • "show (default)": The rating appears as soon as the product has been rated – this is how Shopware behaves out of the box.

    • Placement

      • "below the price (default)": The rating stays at its Shopware position in the buy box.

      • "above the product name": The rating moves above the heading.


    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 in the product box and in the testimonials as well. The same is true for the "Star" and "Star (blank)" colours.

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


    • Tab "Product pages" => Block "Product rating (in the buy box or at the product name)" => Show product rating

    • Tab "Product pages" => Block "Product rating (in the buy box or at the product name)" => Section "Basic configuration" => Placement

    • Tab "Product pages" => Block "Product rating (in the buy box or at the product name)" => Section "Basic configuration" => Arrangement

    • twt.detail.reviews.linkTextNoReviews

    "always show product rating": The rating also appears for products that have not been rated yet. Instead of the review count, an invitation to write the first review is shown, which also leads to the review tab.
    "below the product name": The rating moves below the heading.
  • Arrangement

    • "below each other (default)": The stars sit above the link to the reviews – this is how Shopware behaves out of the box.

    • "next to each other": Stars and link sit in one line.

  • 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)

  • Content

    Note: For information on how to edit snippets, see the following instructions:

    Options

    Tip: "always show product rating" has two benefits: the buy box keeps its height and does not jump as soon as the first rating comes in – and you actively invite your customers to write that first review.

    Note: This configuration only refers to the display in the buy box. The "Reviews" tab on the product page is not affected – it remains available even with "don't show", including the review form.

    Note: The placements at the product name also apply to the ThemeWare® image gallery blocks with product name.

    In the "next to each other" arrangement the link automatically moves below the stars when there is not enough room – for example in a narrow buy box or on a smartphone.

    Appearance of the stars

    Summary

    Theme configuration

    Snippet

    Rating
    Reviews
    below each other | next to each other
    Texts: Editing and translation

    Manufacturer on product pages

    With Manufacturer information on product pages you display the details of a product's manufacturer – description, logo and link – on the product page. The information can be shown in the description or in a separate tab.

    The data comes from the respective manufacturer in Shopware (Catalogues ⇒ Manufacturers):

    • Name of the manufacturer

    • Description of the manufacturer

    • Logo of the manufacturer

    • Website (link) of the manufacturer


    1. Go to the "Product pages" tab

    2. Expand the "Manufacturer (in tabs)" block

    3. Select the desired placement for the "Show manufacturer" configuration: "show in the description" or "show in a separate tab"

    You maintain the displayed data directly on the manufacturer in Shopware:

    1. Switch via the main navigation to the "Manufacturers" management ("Catalogues" => "Manufacturers")

    2. Choose the manufacturer you want to edit (or create a new one via "Add manufacturer")

    3. In the "Manufacturer information" card, maintain the desired details:


    • Show manufacturer

      • Controls the placement of the manufacturer details: "don't show", "show in the description" or "show in a separate tab".

    • Show manufacturer logo (section "Basic configuration")


    The following texts apply regardless of whether the manufacturer is displayed in the description or in its own tab:

    • Subheadline "Related links": twt.detail.tabManufacturer.moreInformation

    • "Further products" link: twt.detail.tabManufacturer.linkProducts.label

    • "Manufacturer website" link: twt.detail.tabManufacturer.linkWebsite.label

    In the "Further products" link label the placeholder %manufacturer% is replaced by the manufacturer name.

    If the manufacturer is displayed in the description, the manufacturer box there uses the headline twt.detail.manufacturer.title (%manufacturer% is replaced by the manufacturer name).


    • Tab "Product pages" => Block "Manufacturer (in tabs)" => Show manufacturer

    • Tab "Product pages" => Block "Manufacturer (in tabs)" => Section "Basic configuration" => Show manufacturer logo

    • Tab "Product pages" => Block "Manufacturer (in tabs)" => Section "Related manufacturer links" => Show subheadline / Show "Further products" link / Show "Manufacturer website" link

    • twt.detail.tabManufacturer.moreInformation

    • twt.detail.tabManufacturer.linkProducts.label

      • %manufacturer% is replaced by the manufacturer name.


    You can find details on displaying it in its own tab here:

    The product safety information under the GPSR can also be displayed in the manufacturer tab:

    Optional: Adjust the further options in the "Basic configuration" and "Related manufacturer links" sections (see below)
  • Save your changes after editing

  • Name

  • Description

  • Website

  • Logo (add media and set it via "Use as Logo")

  • Save your changes

  • Shows or hides the manufacturer logo.

  • Show subheadline (section "Related manufacturer links")

    • Shows or hides the subheadline above the manufacturer links.

  • Show "Further products" link (section "Related manufacturer links")

    • Shows or hides a link to further products of the manufacturer.

  • Show "Manufacturer website" link (section "Related manufacturer links")

    • Shows or hides a link to the manufacturer website.

  • twt.detail.tabManufacturer.linkWebsite.label

  • twt.detail.manufacturer.title

    • %manufacturer% is replaced by the manufacturer name.

  • Note: The manufacturer information is displayed when the feature is activated in the theme configuration and a manufacturer is assigned to the product.

    Configuration

    Theme configuration

    Manufacturer details (Shopware)

    Options

    Snippets

    Summary

    Theme configuration

    Snippets

    Further information

    Manufacturer tab
    GPSR information on product pages
    Manufacturer information in the description
    Manufacturer information in a separate tab

    Product specifications

    ThemeWare® provides the functionality to display many additional product specifications (e.g. manufacturer, dimensions, weight, availability, etc.) in the buybox on product pages, in addition to the product number.

    Three custom fields can be used to individually supplement the existing specifications.

    Two styles are available for the display: "Standard" (list) and "Compact" (a space-saving grid with the label above the respective value).

    ThemeWare® "Product specifications"
    ThemeWare® "Product specifications" in the "Compact" style

    Note: Each specification is enabled individually in the theme configuration and is only shown if the respective field has a value on the product (e.g. the manufacturer row only if a manufacturer is assigned). The three custom fields likewise only appear if they are filled.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the block "Product specifications (in the buy box)"

    3. In the section "Basic configuration", select the desired display via the "Style" configuration ("Standard" or "Compact")

    4. Activate the specifications to be displayed

    5. Save your changes after editing

    1. Switch via the main navigation to the "Product managment" (1) (2) ("Catalogues" => "Products")

    2. Choose the product you want to edit (3)

    3. In the tabs "General" and "Specifications" you will find all Shopware product specifications

    1. Switch via the main navigation to the "Product managment" (1) (2) ("Catalogues" => "Products")

    2. Choose the product you want to edit (3)

    3. Switch to the tab "Specifications"

    You can edit and/or translate the labels of the custom fields with the "Snippet management" using the following snippets:

    • Available stock: twt.detail.availableStockLabel

    • Custom field 1: twt.detail.customFields.customField1.label

    • Custom field 2: twt.detail.customFields.customField2.label



    • Tab "Product pages" => Block "Product specifications (in the buy box)"

    • twt.detail.availableStockLabel

    • twt.detail.customFields.customField1.label

    • twt.detail.customFields.customField2.label


    You can find out how to edit snippets in the following instructions:

    Save your changes

    Scroll to the section "Custom fields"

  • Select the custom field set of your theme

  • Enter the desired text in the custom field "Custom field 1", "Custom field 2" and/or "Custom field 3"

  • Save your changes

  • Custom field 3: twt.detail.customFields.customField3.label

  • Delivery time: twt.detail.deliveryTimeLabel

  • EAN: twt.detail.eanLabel

  • Height: twt.detail.heightLabel

  • Length: twt.detail.lengthLabel

  • Max. order quantity: twt.detail.maxpurchaseLabel

  • Min. order quantity: twt.detail.minpurchaseLabel

  • Manufacturer: twt.detail.manufacturerLabel

  • Manufacturer product number: twt.detail.manufacturernumberLabel

  • Weight: twt.detail.weightLabel

  • Width: twt.detail.widthLabel

  • twt.detail.customFields.customField3.label

  • twt.detail.deliveryTimeLabel

  • twt.detail.eanLabel

  • twt.detail.heightLabel

  • twt.detail.lengthLabel

  • twt.detail.maxpurchaseLabel

  • twt.detail.minpurchaseLabel

  • twt.detail.manufacturerLabel

  • twt.detail.manufacturernumberLabel

  • twt.detail.weightLabel

  • twt.detail.widthLabel

  • Note: The "Spacing (Sections)" configuration only applies to the "Standard" style. In the "Compact" style, all specifications are displayed in one shared grid.

    Product specifications

    ThemeWare® custom field 1-3

    Text: Labels

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom fields

    Further information

    Custom field 1
    Custom field 2
    Custom field 3
    Custom field 1
    Custom field 2
    Custom field 3
    Shopware 6 product managment
    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Checkout steps

    With ThemeWare®, you can use the sales-promoting "Checkout steps" of our Shopware 5 themes in your Shopware 6 shop as well.

    Note: The checkout steps are shown in the checkout if the "Show checkout steps" configuration is enabled. You can additionally display them in the shopping cart via "Show checkout steps in shopping cart".


    Configuration

    Theme configuration

    1. Go to the tab "Extensions"

    2. Expand the block "Checkout steps"

    3. Enable the configuration "Show checkout steps" (display in the checkout)

    4. Optional: Enable "Show checkout steps in shopping cart" to additionally display them in the shopping cart

    5. Save your changes after editing

    • Edit the checkout step texts using the following snippets:

      • twt.extension.checkoutSteps.step1

      • twt.extension.checkoutSteps.step2


    • Layout type

      • "Continuous lines", "Lines between steps", "Continuous bars between steps" or "Bars between steps".

    • Icon style (Steps)


    • Tab "Extensions" => Block "Checkout steps" => Show checkout steps / Show checkout steps in shopping cart

    • Tab "Extensions" => Block "Checkout steps" => Section "Basic configuration" => Layout type / Icon style (Steps) / Show text from...

    • Text

      • twt.extension.checkoutSteps.step1

      • twt.extension.checkoutSteps.step2

    twt.extension.checkoutSteps.step3

    "Steps with numbers", "Steps with icons" or "Small steps".

  • Show text from...

    • Defines from which breakpoint the text below the steps appears (or "don't show").

  • twt.extension.checkoutSteps.step3

    Content

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippets

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    GPSR tab

    The GPSR tab displays the product safety information under the GPSR – the manufacturer information and the responsible person – in a separate tab on the product page.

    GPSR information in a separate tab

    The basics, the custom fields and the other placements (in the description or in the manufacturer tab) are described in the general extension:

    GPSR information on product pages

    Note: The tab is displayed if the "Show product safety (GPSR)" configuration is set to "show in a separate tab" and the corresponding custom fields on the manufacturer or product are filled.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "GPSR – Product safety (in tabs)" block

    3. Select the option "show in a separate tab" for the "Show product safety (GPSR)" configuration

    4. Save your changes after editing

    The tab shows the GPSR information of the respective manufacturer or product. The content itself (manufacturer information, responsible person) and the custom fields are described in the general extension (see above). The following texts are specific to the tab:

    The label of the tab is based on the snippet twt.detail.tabGpsr.title.

    A separate headline is displayed within the tab. You edit the text using the snippet twt.detail.tabGpsr.headline (%manufacturer% is replaced by the manufacturer name, %product% by the product name).


    This option is specific to the tab:

    • Show headline (block "Tab "GPSR"" => section "Basic configuration")

      • Shows or hides the headline within the GPSR tab ("show" / "don't show").

    Which information is displayed and how you maintain the custom fields is described in the general extension (see above).


    • Tab "Product pages" => Block "GPSR – Product safety (in tabs)" => Show product safety (GPSR)

    • Tab "Product pages" => Block "Tab "GPSR"" => Section "Basic configuration" => Show headline

    • Title

      • twt.detail.tabGpsr.title

    • Headline

    twt.detail.tabGpsr.headline

    • %manufacturer% is replaced by the manufacturer name.

    Content

    Title

    Headline

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippets

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Floating widget

    With ThemeWare® you can use the "Floating widget" of our Shopware 5 themes in your Shopware 6 shop as well, for example to display contact information prominently.

    ThemeWare® "Floating widget"

    Note: The floating widget is shown if the "Show floating widget" configuration is enabled. The content is maintained via snippets.


    Configuration

    Theme configuration

    1. Go to the tab "Extensions"

    2. Expand the block "Floating widget"

    3. Enable the floating widget with the configuration "Show floating widget"

    4. Save your changes after editing

    • Edit the title and text of the floating widget using the following snippets:

      • twt.extension.floatingWidget.title

      • twt.extension.floatingWidget.body


    • Show floating widget @Phone (<768px)

      • Controls whether the widget appears on smartphones (<768px).

    • Position

    In addition, the size, padding, alignment and the distance to the page edge as well as colors, font and a background image can be adjusted.


    • Tab "Extensions" => Block "Floating widget" => Show floating widget / Show floating widget @Phone (<768px)

    • Tab "Extensions" => Block "Floating widget" => Section "Basic configuration" => Position / Hover effect / Show overlay / Show opened / Animate / Link widget

    • Title

      • twt.extension.floatingWidget.title

    • Text

    Optional: Edit the link URL using the snippet twt.extension.floatingWidget.link (only used if the "Link widget" configuration is enabled)

    Places the widget "left" or "right".
  • Hover effect

    • "no effect", "pull out" or "reduce opacity".

  • Show overlay (if opended)

    • Places a dimming overlay over the page while the widget is open.

  • Show opened (when the page has been loaded)

    • Opens the widget automatically when the page loads.

  • Animate (when the page has been loaded)

    • "no animation" or "Wobble (3x)".

  • Link widget

    • Makes the widget clickable: "no", "yes" or "yes (open in new tab)". You set the target URL via the snippet twt.extension.floatingWidget.link.

  • twt.extension.floatingWidget.body

  • Link

    • twt.extension.floatingWidget.link

  • Alt text (image)

    • twt.extension.floatingWidget.altText

  • Aria label (Widget)

    • twt.extension.floatingWidget.ariaLabel

  • Aria label (Button)

    • twt.extension.floatingWidget.closeAriaLabel

    • twt.extension.floatingWidget.openAriaLabel

  • Aria label (Link)

    • twt.extension.floatingWidget.linkAriaLabel

  • Content

    Note: For information on how to edit snippets, see the following instructions: Texts: Editing and translation

    Tip: If a change does not affect the storefront, just clear the Shopware cache: Clearing / warming up the Shopware cache

    Options

    Summary

    Theme configuration

    Snippets

    Pre-order label

    The pre-order note points out pre-orderable products in the buybox that have a release date in the future.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Delivery information (in the buy box)" block

    3. Scroll to the section "Pre-order"

    4. Enable the configuration "Show 'Pre-order'"

    5. Save your changes after editing


    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Pre-order" => Show 'Pre-order'

    • general.deliveryShipping

    Note: The note is displayed if the product has a release date in the future – provided the "Show 'Pre-order'" configuration is enabled. Its appearance follows the "Layout type" in the "Basic configuration" section.

    Summary

    Theme configuration

    Snippet

    Free shipping label

    The free shipping note marks products with free shipping in the buybox.

    Free shipping

    The status "Free shipping" is fulfilled in Shopware if a product is configured as "Free shipping”. You can find more information in the Shopware documentation.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Delivery information (in the buy box)" block

    3. Scroll to the section "Free shipping"

    4. Enable the configuration "Show 'Free shipping'"

    5. Save your changes after editing


    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Free shipping" => Show 'Free shipping'

    • twt.detail.shippingFreeLabel

    Note: The note is displayed if the product is configured as "Free shipping" – provided the "Show 'Free shipping'" configuration is enabled. Its appearance follows the "Layout type" in the "Basic configuration" section.

    Summary

    Theme configuration

    Snippet

    Manufacturer in listings

    With the extension "Manufacturer in listings" the manufacturer can be added to the product boxes in your category listings – optionally with a label in front of it.

    ThemeWare® "Manufacturer in listings"

    Note: The manufacturer is only shown in the product box if the "Show manufacturer" configuration is enabled and a manufacturer is assigned to the product.


    Configuration

    Theme configuration

    1. Go to the "Listing pages" tab

    2. Expand the "Product box" block

    3. Scroll to the "Content" section

    4. Set the configuration "Show manufacturer" to "show"

    5. Save your changes after editing

    If you choose the "per layout type" option under "Show manufacturer", you decide separately for each layout type instead:

    1. Go to the "Listing pages" tab

    2. Expand the "Product box (Layout type 'Standard')", "Product box (Layout type 'Big image')" or "Product box (Layout type 'Minimal content')" block

    3. Scroll to the "Content" section

    • Edit the label prefixing the manufacturer name using the snippet twt.listing.manufacturerLabel

    • The name of the manufacturer is automatically added


    • Show manufacturer

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

      • "show": The manufacturer appears in all layout types.


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

    • 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 manufacturer

    • twt.listing.manufacturerLabel

    Set the configuration "Show manufacturer" to "show"

  • Save your changes after editing

  • "per layout type": The decision is made per layout type in the "Product box (Layout type ...)" blocks.
    Tab "Listing pages" => Block "Product box (Layout type 'Minimal content')" => Section "Content" => Show manufacturer

    Per layout type

    Note: The configurations in the layout type blocks only take effect if the "per layout type" option is selected under "Show manufacturer" in the "Product box" block.

    Content

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippet

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Payment methods on product pages

    ThemeWare® provides the functionality to display logos of the available payment methods in the Buybox on product pages.

    We try to keep as many elements of ThemeWare® modular as possible, which is particularly evident in the approach of the widgets. You probably know these from the footer. The "Payment methods on product pages" are an example of this modularity, because technically speaking, this is the "Payment methods" widget.

    ThemeWare® "Payment methods on product pages"

    Note: The payment logos are displayed if the "Show payment logos" configuration is enabled. The payment methods available in the shop are shown; the position setting controls whether they appear above or below the product specifications.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the block "Payment logos (in the buybox)"

    3. Enable the configuration "Show payment logos"

    4. Save your changes after editing

    • You can manage the payment methods in the Shopware settings: "Settings" => "Shop" => "Payment methods"

    • Edit the headline with the following snippet:

      • twt.detail.paymentLogos.headline


    • Tab "Product pages" => Block "Payment logos (in the buy box)"

    • twt.detail.paymentLogos.headline


    You can find more information on how to create and manage payment methods with Shopware 6 in the Shopware documentation:

    Payment methods

    Text: Headline

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Summary

    Theme configuration

    Snippet

    Additional information

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Product slider with overflow

    By default, the product slider ends at the edge of its container. With this extension, the neighbouring products are partially visible on the left and right. This signals that there is more to see and encourages users to click through.

    The setting applies globally to all product sliders. Individual CMS blocks can deviate from it using a CSS class.

    Note: The extension applies to all product sliders, including the cross-selling on product pages.


    Layout types

    Four layout types are available:

    Layout type
    Effect

    1. Go to the tab "Shopping Experiences"

    2. Expand the block "Product slider (Category 'Commerce')"

    3. Select the desired "Layout type" in the section "Design"

    The configuration "Cropped products" controls how the cropped neighbouring products are displayed.

    Value
    Effect

    The width of the visible part of the neighbouring products can be set separately for desktop and mobile devices:

    • "Crop width @Desktop (>=992px)" – default: 30 (pixels)

    • "Crop width @Mobile (<992px)" – default: 20 (pixels)

    Both configurations only apply to layout types with peek.


    You can keep the global setting and let individual CMS blocks deviate from it. To do so, add a CSS class to the respective block in the CMS editor.

    CSS class
    Layout type

    The overflow is suppressed automatically in two cases, because it would collide with neighbouring content there. The peek remains in both cases.

    • The slider is placed in a multi-column CMS block – the neighbouring products would otherwise extend into the other column

    • The slider is placed in a sidebar section


    • Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Design" => Layout type

    • Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration" => Cropped products

    • Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration" => Crop width @Desktop (>=992px)

    • twt-cms-product-slider-reset

    • twt-cms-product-slider-peek

    • twt-cms-product-slider-overflow-visible

    Adjust the further configurations in the section "Basic configuration" if required
  • Save your changes after editing

  • Tab "Shopping Experiences" => Block "Product slider (Category 'Commerce')" => Section "Basic configuration" => Crop width @Mobile (<992px)

    twt-cms-product-slider

    Off (default)

    Shopware standard, the products end at the container edge

    Peek

    The neighbouring products are partially visible inside the container

    Overflow

    The neighbouring products extend beyond the container

    Peek and overflow

    Both combined

    Normal

    The neighbouring products are displayed unchanged

    Dimmed

    The neighbouring products are shown with reduced opacity and are not clickable

    twt-cms-product-slider-reset

    Off

    twt-cms-product-slider-peek

    Peek

    twt-cms-product-slider-overflow-visible

    Overflow

    Configuration

    Theme configuration

    Cropped products

    Note: As soon as a product is fully visible, it becomes clickable again. Keyboard navigation automatically moves the focused product into view, making it operable.

    Crop width

    Individual layout per CMS block

    Tip: The class twt-cms-product-slider-reset fully resets the global setting for this block. This lets you keep individual sliders at the Shopware standard even when a layout type is active globally.

    When the overflow does not apply

    Summary

    Theme configuration

    CSS classes

    twt-cms-product-slider

    Peek and overflow

    Properties tab

    The properties tab shows the properties of a product in a separate tab on the product page.

    ThemeWare® "Properties tab"

    Note: The tab is displayed if the "Show properties table in a seperate tab" configuration is set to "show in a seperate tab" and the product has at least one property.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Tab "Properties"" block

    3. Set the configuration "Show properties table in a seperate tab" to "show in a seperate tab"

    4. Save your changes after editing

    The "Properties tab" integrates the properties table (Shopware standard) from the "Description" tab.

    The tab name is based on the snippet twt.detail.tabProperties.title.

    A headline is displayed within the tab. You edit the text using the snippet twt.detail.tabProperties.headline (%product% is replaced by the product name).

    An info text can optionally be displayed below the properties table. You edit the text using the snippet twt.detail.infoProperties.


    • Show headline

      • Controls the headline within the tab: "show", "don't show", "show product name only" or "show snippet only".

    • Show info text below properties table


    • Tab "Product pages" => Block "Tab "Properties"" => Show properties table in a seperate tab

    • Tab "Product pages" => Block "Tab "Properties"" => Section "Basic configuration" => Show headline / Show info text below properties table

    • Title

      • twt.detail.tabProperties.title

    • Headline

    Optionally displays an info text below the table ("show" / "don't show").

    twt.detail.tabProperties.headline

  • Info text

    • twt.detail.infoProperties

  • Content

    Title

    Headline

    Info text

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippets

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Further links

    With further links you can add up to three further links (e.g. to manufacturer or information pages) in the description tab of a product. You maintain these via custom fields in the corresponding product.

    Note: The further links are displayed in the "Description" tab if the "Show further links" configuration is enabled and at least one link has been added via a custom field (Link 1–3).


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Tab "Description"" block

    3. Scroll to the section "Further product links"

    4. Enable the configuration "Show further links"

    5. Optional: Use "Open links in a new tab" to define whether the links open in a new tab

    6. Save your changes after editing

    1. Switch via the main navigation to the "Product managment" ("Catalogues" => "Products")

    2. Choose the product you want to edit

    3. Switch to the tab "Specifications"

    • Edit the headline with the following snippet:

      • twt.detail.furtherLinks.title



    • Tab "Product pages" => Block "Tab "Description"" => Section "Further product links" => Show further links

    • Tab "Product pages" => Block "Tab "Description"" => Section "Further product links" => Open links in a new tab

    • twt.detail.furtherLinks.title

      • %product% is replaced by the product name.

    • twt.detail.furtherLinks.fallback

    Scroll to the section "Custom fields"
  • Enter the desired URL in the custom field "→ Further link 1-3"

  • Enter the desired link text in the custom field "Further link 1-3 – Title"

  • Save your changes

  • Further links (Custom fields)

    Text: Headline

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Custom fields

    Summary

    Theme configuration

    Snippets

    Custom fields

    Further links
    Further link 1-3
    Further link 1-3 – Title
    Further link 1-3 – Open link in a new tab
    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Hero section

    You can configure the theme extension "Hero section" via the theme configuration. The "Hero section" can be displayed on CMS listing and/or shop pages.

    ThemeWare® "Hero section"

    You can also customise the display for each category using a corresponding custom field if you like.

    If you want, you can also integrate the breadcrumb into the "Hero section".

    The texts and images shown are taken from the category management ("Catalogues" => "Categories") of Shopware. The "Name" and the "Image" (= Display image) of the corresponding categories are displayed. As an alternative to the original category image, you can also use a custom image via a corresponding custom field.

    But let's start with the theme configuration.

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki:


    Configuration

    Theme configuration

    1. Go to the tab "Extensions"

    2. Expand the block "Hero section (on listing pages)"

    3. Enable the configuration "Show 'Hero section' (CMS listing pages)"

    4. Optional: Adjust the further options (see the "Options" section) – e.g. integrating the breadcrumb

    5. Save your changes after editing

    1. Switch via the main navigation to the "Category managment" (1) (2) ("Catalogues" => "Categories")

    2. Choose the category you want to edit (3)

    3. To the right of the category list, the corresponding category now opens in the category editor (4)


    Here you have the following options for listing and shop pages:

    • don't show

    • show

    • show (via custom field)

    This is the default setting. In this case, the "Hero section" will not be displayed on the corresponding page type.

    If you select the option show, the "Hero section" will be displayed on all pages of the corresponding page type.

    If you select show (via custom field), the "Hero section" will only be displayed on the corresponding page type if you have configured the custom field to yes in the corresponding category.


    In the same block you adjust the appearance of the "Hero section":

    • Pull up next element

      • Pulls the next element a bit over the Hero section: "no", "yes" or "yes (via custom field)". (Beta)

    • Text colour

    Colours, fonts and further details are also adjusted in the theme configuration.


    As you probably already know, the theme configuration is always global, i.e. it applies to all pages across your shop. This also applies to the configuration of the "Hero section" However, you can "overwrite" the theme configuration with a selection of custom fields in any categories and, for example, use a different colour for the "Hero section" in a particular category.

    For more information on custom fields, see the following article:


    • Tab "Extensions" => Block "Hero section (on listing pages)" => Show 'Hero section' (CMS listing pages)

    • Tab "Extensions" => Block "Hero section (on listing pages)" => Show 'Hero section' (CMS shop pages)

    You are in the tab "General"
  • In the block "General" you can edit the category name (Name).

  • Scroll to the block "Menu settings"

  • Here you can edit the category image (Display image)

  • Save your changes

  • "white", "light", "dark" or "black text".

  • Text alignment

    • "align left", "align center" or "align right".

  • Sizing mode

    • "Container-Max-Width (Full-width Boxed)" or "100% (Full-width)".

  • Content width

    • Maximum width of the content in pixels (e.g. 1200px) or 100%.

  • Padding top

    • Top spacing – only applies to pages with a "Shopping Experiences Header".

  • Overlay (background colour & opacity)

    • Colour overlay over the background image incl. opacity.

  • Attachment (background image)

    • "Background image scrolls with the page (scroll)" or "Background image stays fixed (fixed)".

  • Parallax effect (background image)

    • "no" or "yes" – only with a fixed background image; the effect is controlled via JavaScript.

  • Show breadcrumb

    • Adds a breadcrumb to the Hero section ("no" / "yes").

  • Breadcrumb – Position

    • "align top" or "align bottom".

  • Breadcrumb – Content alignment

    • "align left", "align center" or "align right".

  • Content

    Display options

    don't show

    show

    Tip: You can use the custom field to prevent the "Hero section" from being displayed in a category, allowing you to customise selected categories individually.

    show (via custom field)

    Options

    Custom fields

    Summary

    Theme configuration

    Custom field

    Hero section
    Hero section
    Setting up a category hero section
    Shopware 6 "Category managment"

    Highlight category

    With the extension "Highlight category" you can, as the name says, highlight a category in the top navigation.

    To do this, you activate the highlighting via a custom field in the corresponding category.

    Highlighted category in top navigation

    Note: A category is only highlighted in the top navigation if the "Highlight category" custom field is set to "yes" for it. The theme configuration only controls the appearance of the highlighting.

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki:


    Configuration

    Theme configuration

    1. Go to the "Header" tab

    2. Expand the "Top navigation" block

    3. Scroll to the section "Link (highlighted)"

    4. Now configure the highlighting as you like

    5. Save your changes after editing

    1. Switch via the main navigation to the "Category managment" (1) (2) ("Catalogues" => "Categories")

    2. Choose the category you want to edit (3)

    3. To the right of the category list, the corresponding category now opens in the category editor (4)



    • Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

    You are in the tab "General"
  • Scroll to the block "Custom fields"

  • Activate the highlighting with the custom field "Highlight category" and the option "yes"

  • Save your changes

  • Highlight category (custom field)

    Custom fields

    Summary

    Theme configuration

    Custom field

    Highlight category
    Highlight category
    Highlighting a category in the navigation
    Shopware 6 "Category managment"

    Manufacturer tab

    The manufacturer tab shows the manufacturer details of a product in a separate tab on the product page.

    Manufacturer information in a separate tab

    Which details are displayed (description, logo, related links) and which you can show or hide is described in the general extension:

    Manufacturer on product pages

    Note: The tab is displayed if the "Show manufacturer" configuration is set to "show in a separate tab" and a manufacturer is assigned to the product.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Manufacturer (in tabs)" block

    3. Select the option "show in a separate tab" for the "Show manufacturer" configuration

    4. Save your changes after editing

    The tab shows the manufacturer details of the respective product. The content itself (description, logo, related links) is described in the general extension (see above). The following texts are specific to the tab:

    The tab name is based on the snippet twt.detail.tabManufacturer.title.

    A separate headline is displayed within the tab. You edit the text using the snippet twt.detail.tabManufacturer.headline (%manufacturer% is replaced by the manufacturer name, %product% by the product name).


    This option is specific to the tab:

    • Show headline (block "Tab "Manufacturer"" => section "Basic configuration")

      • Controls the headline within the tab: "show", "don't show", "show manufacturer name only" or "show snippet only".

    The manufacturer logo and the related links apply in the description and in the tab alike – you can find their options in the general extension (see above).


    • Tab "Product pages" => Block "Manufacturer (in tabs)" => Show manufacturer

    • Tab "Product pages" => Block "Tab "Manufacturer"" => Section "Basic configuration" => Show headline

    • Title

      • twt.detail.tabManufacturer.title

    • Headline

    twt.detail.tabManufacturer.headline

    • %manufacturer% is replaced by the manufacturer name.

    Content

    Title

    Headline

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippets

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Shipping link

    The shipping link shows a short note about your shipping costs below the buy button – for example "Free shipping from 50 €". A click opens the shipping and payment information page configured in your shop as an overlay, so your customer stays on the product page.

    Note: Which page opens is defined in the Shopware settings ("Settings" > "Shop" > "Basic information" > "Shop pages" > "Shipping/payment information"). It is the same page that Shopware's tax note ("plus shipping costs") opens.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Buy box" block

    3. Scroll to the section "Shipping link"

    4. Choose the option "show" under "Show shipping link"

    5. Save your changes after editing

    • Write the text via the snippet twt.detail.shippingLink

    • The preset is "Free shipping from 50 €"


    If you deliver under different conditions, phrase the text neutrally – for example "Shipping costs & delivery times". The details are then on the linked page, which you maintain anyway. That way the link works for every shop, no matter which countries it delivers to.


    The link does not appear in two cases:

    • The product is flagged as free of shipping costs. A threshold "from X €" would be misleading there – and the "Free shipping" label already shows the information at that spot.

    • No shipping and payment information page is configured in the shop. The text is then shown without a link instead of offering a click that leads nowhere.


    • Tab "Product pages" => Block "Buy box" => Section "Shipping link" => Show shipping link

    • twt.detail.shippingLink

    • "Settings" > "Shop" > "Basic information" > "Shop pages" > "Shipping/payment information"

    Content

    Note: For information on how to edit snippets, see the following instructions:

    The text is your statement

    Important: If you state a threshold in the snippet ("Free shipping from 50 €"), it has to apply to all delivery countries of your shop.

    Shopware manages shipping costs per shipping method, currency and rule – a snippet cannot tell those apart, because snippets belong to the language, not to the delivery country. A shop delivering to Germany and Austria uses the same German text source for both.

    Automatic exceptions

    Summary

    Theme configuration

    Snippet

    Shopware setting

    Texts: Editing and translation

    Social proofing

    According to Wikipedia, "Social Proof" is a psychological and social phenomenon in which people rely on other people's evaluations and actions to judge right and wrong behaviour in a given situation.

    All positive statements about you, your company, your product or your shop are testimonials to your "Social Proof".

    ThemeWare® offers a new way of improving your "Social Proof" with the "Social Proofing" extension since version 2.0.5.

    The on the product page confirms that previous buyers were very satisfied.

    Sales infotext
    ThemeWare® "Social proofing" (Buybox)

    Product number in listings

    With the extension "Product number in listings" the product number can be added to the product boxes in your category listings.

    ThemeWare® "Product number in listings"

    Note: The product number is shown in the product box if the "Show product number" configuration is enabled and the product has a product number.


    Configuration

    Theme configuration

    1. Go to the "Listing pages" tab

    2. Expand the "Product box" block

    3. Scroll to the "Content" section

    4. Enable the configuration "Show product number"

    5. Save your changes after editing

    • Edit the label prefixing the product number using the following snippet:

      • twt.listing.ordernumberLabel

    • The product number is automatically added


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

    • twt.listing.ordernumberLabel

    Content

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Summary

    Theme configuration

    Snippet

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    Sales infotext

    The "Sales infotext" on the product page signals that a product has already been purchased frequently and thereby confirms that previous buyers were very satisfied.

    You can use the threshold configuration to define from which quantity of sales the infotext is displayed. From this threshold onwards, the actual number of sales is output rounded down; below the threshold, the infotext is not displayed.

    ThemeWare® "Sales infotext" (Buybox)

    Note: The infotext is displayed if the "Show sales infotext" configuration is enabled and the number of sales reaches the defined threshold.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Social proofing (in the buybox)" block

    3. Set the configuration "Show sales infotext" to "show"

    4. Save your changes after editing

    • Edit the infotext using the snippet twt.extension.socialProofing.infotext

      • The placeholder %sales% is replaced by the (rounded down) number of sales

    • Edit the icon using the snippet twt.extension.socialProofing.icon


    • Threshold

      • Specify from which quantity of sales the infotext is displayed (default: 1000).

    • Limit visibility


    • Tab "Product pages" => Block "Social proofing (in the buy box)" => Show sales infotext

    • Tab "Product pages" => Block "Social proofing (in the buy box)" => Section "Basic configuration" => Threshold / Limit visibility / Position / Show icon

    • twt.extension.socialProofing.infotext

    • twt.extension.socialProofing.icon

    Select whether the infotext is displayed for "all products" or only for "Topseller".

  • Position

    • Select whether the infotext is displayed above or below the cart button.

  • Show icon

    • Optionally display an icon in front of the infotext.

  • Content

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Note: The quantity of sales of a product is an absolute value in Shopware 6. A limitation to a certain period is not possible at the moment.

    Summary

    Theme configuration

    Snippets

    Texts: Editing and translation
    Clearing / warming up the Shopware cache

    USP bar

    The USP bar shows key selling points (USPs) as a compact bar – optionally in the header and/or the footer.

    ThemeWare® "USP bar"

    Note: The USP bar is shown in the header and/or footer, depending on which of the two configurations ("Show USP bar in header" / "Show USP bar in footer") is enabled. The content of the individual USPs is maintained via snippets.


    Configuration

    Theme configuration

    1. Go to the "Extensions" tab

    2. Expand the "USP bar" block

    3. Enable "Show USP bar in header" and/or "Show USP bar in footer"

    4. Save your changes after editing

    • For each USP (1–6) you maintain the icon, title, subtitle and tooltip via a dedicated snippet – shown here for USP 1 as an example:

      • twt.extension.uspBar.usp1.icon

      • twt.extension.uspBar.usp1.title


    • Position (Header)

      • Places the bar "above the header", "above the navigation" or "below the header". (The full-width sticky header and the shopping experience header only support "above the header".)

    • Position (Footer)


    • Tab "Extensions" => Block "USP bar" => Show USP bar in header / Show USP bar in footer

    • Tab "Extensions" => Block "USP bar" => Section "Basic configuration" => Position (Header/Footer) / Layout type (Header/Footer) / Show subtitle (Large icons) / Content (Widget) / Sizing mode (Header/Footer)

    • Tab "Extensions" => Block "USP bar" => Section "USPs" => Show benefit #1–6 from ...

    • Icons

      • twt.extension.uspBar.usp1.icon

      • twt.extension.uspBar.usp2.icon

    twt.extension.uspBar.usp1.subtitle

  • twt.extension.uspBar.usp1.tooltip

  • Places the bar "above the footer".

  • Layout type (Header)

    • "Small icons", "Small icons + Top bar" (moves the top bar into the USP bar) or "Small icons + Widget" (places a widget on the right, see "Content (Widget)").

  • Layout type (Footer)

    • "Small icons", "Large icons, text below" or "Large icons, text beside".

  • Show subtitle (Large icons)

    • Shows the subtitle below the title – only for layout types with large icons.

  • Content (Widget)

    • Selects the widget for the "Small icons + Widget" layout type: "don't show" or "Communities or social media" (configured in the "Widgets" tab).

  • Sizing mode (Header) / Sizing mode (Footer)

    • Width of the bar: "Container-Max-Width (Full-width Boxed)" or "100% (Full-width)".

  • Show benefit #1–6 from ... (section "USPs")

    • Controls, per USP, from which breakpoint it appears (e.g. "Phone (portrait) (<576px)", "Tablet (portrait) (≥768px)", "Desktop (≥1200px)") or "don't show".

  • twt.extension.uspBar.usp3.icon

  • twt.extension.uspBar.usp4.icon

  • twt.extension.uspBar.usp5.icon

  • twt.extension.uspBar.usp6.icon

  • Titles

    • twt.extension.uspBar.usp1.title

    • twt.extension.uspBar.usp2.title

    • twt.extension.uspBar.usp3.title

    • twt.extension.uspBar.usp4.title

    • twt.extension.uspBar.usp5.title

    • twt.extension.uspBar.usp6.title

  • Subtitles

    • twt.extension.uspBar.usp1.subtitle

    • twt.extension.uspBar.usp2.subtitle

    • twt.extension.uspBar.usp3.subtitle

    • twt.extension.uspBar.usp4.subtitle

    • twt.extension.uspBar.usp5.subtitle

    • twt.extension.uspBar.usp6.subtitle

  • Tooltips

    • twt.extension.uspBar.usp1.tooltip

    • twt.extension.uspBar.usp2.tooltip

    • twt.extension.uspBar.usp3.tooltip

    • twt.extension.uspBar.usp4.tooltip

    • twt.extension.uspBar.usp5.tooltip

    • twt.extension.uspBar.usp6.tooltip

  • Aria label

    • twt.extension.uspBar.ariaLabel.header

    • twt.extension.uspBar.ariaLabel.footer

  • Content

    Note: For information on how to edit snippets, see the following instructions: Texts: Editing and translation

    Tip: If a change does not affect the storefront, just clear the Shopware cache: Clearing / warming up the Shopware cache

    Options

    Summary

    Theme configuration

    Snippets

    Tabs on product pages

    With the tabs on product pages you organise additional product information into separate tabs – e.g. properties, datasheets, product videos, manufacturer or a custom tab.

    ThemeWare® "Tabs on product pages"

    Note: Each tab is only displayed if it is enabled in the theme configuration and the product has the corresponding content (e.g. a filled custom field, a property or a manufacturer). Tabs without content are hidden automatically. See the respective subpages for details.


    Configuration

    You can find the configuration in the tab "Product pages":

    Tab "Product pages" => Block "Tabs"

    Available tabs

    • Custom tab


    • Tab "Product pages" => Block "Tabs"

    Summary

    Theme configuration

    Datasheets tab
    Manufacturer tab
    Properties tab
    Videos tab

    Extensions

    Extensions in ThemeWare® are integrated sales-promoting additional features that go beyond the visual adaptation of the existing Storefront of Shopware 6 and extend it instead. ThemeWare® extensions are therefore not separate plugins or apps from the Shopware Store, they are an integral part of your ThemeWare® theme.

    ThemeWare® extensions are often "global", meaning they are independent of page types or specific layout sections into which the ThemeWare® configuration is usually structured. You can find such extensions in the "Extensions" tab. This would be, for example, the "Announcement Banner" or the "USP Bar".

    However, there are also extensions that are linked to certain page types or layout areas. These would be, for example, the " Sharing links" for product pages in the tab "Product pages".

    Theme Extensions

    Announcement banner

    Benefits on product pages

    Checkout steps

    Custom announcement

    Floating widget

    Further links

    GPSR information on product pages

    Hero section

    Highlight category

    Labels on product pages

    Listing subcategories

    Manufacturer in listings

    Manufacturer on product pages

    Payment methods on product pages

    Product badges

    Product datasheets

    Product downloads

    Product number in listings

    Product short description

    Product specifications

    Product symbols

    Product videos

    Quickview

    Sharing links

    Shopping Experiences Header

    Slideout communities

    Social media links (icons)

    Social proofing

    Tabs on product pages

    USP bar

    Slideout communities

    The ThemeWare® "Slideout communities" are based on the ThemeWare® "Communities (Social Media)" widget and offer an alternative, prominent position beside the widget in the footer. As they are based on the widget, both use the same snippets.

    ThemeWare® "Slideout communities"

    Note: The slideout communities are shown if the "Show slideout communities" configuration is enabled. The displayed channels and texts come from the "Communities (Social Media)" widget.


    Configuration

    Theme configuration

    1. Go to the "Extensions" tab

    2. Expand the "Slideout communities" block

    3. Enable the configuration "Show slideout communities"

    4. Save your changes after editing


    Via the "Layout type" you choose between "unicoloured" (link in icon colour) and "multicoloured" (individual background colour per channel).


    • Tab "Extensions" => Block "Slideout communities" => Show slideout communities

    • Tab "Extensions" => Block "Slideout communities" => Layout type


    You can find more information about the snippets in our article about the ThemeWare® "Communities (Social Media)" widget:

    Options

    Summary

    Theme configuration

    Further information

    Communities or social media

    Delivery information on product pages

    The ThemeWare® delivery information styles the standard Shopware 6 notes in the buy box and adds the stock note. Using it is, of course, optional; you can also stick with the Shopware default.

    ThemeWare® "Delivery information on product pages"

    Note: The availability notes ("Not available", "Pre-order", "Delivery time", "Sold out" and "Ready for shipping in …") are mutually exclusive – depending on the product status, only one of them is shown per product. The "Free shipping" and "Stock" notes are independent and can be displayed in addition.


    Layout type

    All notes share one appearance. The "Layout type" configuration lets you choose between:

    • 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 grows the circle behind the text into a pill.

    "Arrangement" determines whether the notes sit next to or below each other, "Position" whether they appear above or below the price.


    You can find the configuration in the tab "Product pages":

    Tab "Product pages" => Block "Delivery information (in the buy box)"


    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Basic configuration" => Layout type

    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Basic configuration" => Arrangement

    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Basic configuration" => Position

  • Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Product page" => Delivery information (in the buy box)

    Note: With the compatibility option "Delivery information (in the buy box)" set to "default", Shopware renders its text lines in their usual place – the layout type then only applies to the stock note.

    Configuration

    Available notes

    Summary

    Theme configuration

    Delivery time label
    Free shipping label
    Not available label
    Pre-order label
    Sold label
    Stock label
    Texts: Edit and translate | ThemeWare® Knowledge Baseknowledge.themeware.design
    ThemeWare® Knowledge Base => Texts: Editing and translation
    Logo

    Videos tab

    The videos tab shows the product videos of a product in a separate tab on the product page.

    ThemeWare® "Videos tab"

    Note: The tab is displayed if the "Show product videos tab" configuration is enabled and at least one video has been added to the product via a custom field (YouTube, Vimeo or Video 1–3).


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Tab "Product videos"" block

    3. Enable the configuration "Show product videos tab"

    4. Save your changes after editing

    The "Videos tab" can be filled via custom fields in the corresponding product. As with all custom fields, make sure to fill them in for each variant.

    The tab name is based on the snippet twt.detail.tabVideos.title.

    A headline is displayed within the tab. You edit the text using the snippet twt.detail.tabVideos.headline (%product% is replaced by the product name).

    The alt text of the videos (for accessibility) is based on the snippet twt.detail.tabVideos.alt.


    • Show headline

      • Specify whether the headline is displayed within the tab ("show" / "don't show").


    • Tab "Product pages" => Block "Tab "Product videos"" => Show product videos tab

    • Tab "Product pages" => Block "Tab "Product videos"" => Section "Basic configuration" => Show headline

    • Title

      • twt.detail.tabVideos.title

    • Headline


    twt.detail.tabVideos.headline

  • Alt text

    • twt.detail.tabVideos.alt

  • Content

    Title

    Headline

    Alt text

    Note: For information on how to edit snippets, see the following instructions:

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Options

    Summary

    Theme configuration

    Snippets

    Further information

    Product videos
    Texts: Editing and translation
    Clearing / warming up the Shopware cache
    Shopware 6 - Settings - Payment methodsdocs.shopware.com
    Shopware documentation => Payment methods
    Logo

    Social media links (icons)

    You can use the "Communities" widget in ThemeWare® to integrate social media links or icons in your footer.

    You can find more information in the following article:


    [Tags: social media icons]

    Communities or social media

    Product short description

    The product short description is managed via a custom field in the corresponding product.

    You can choose via the theme configuration whether the content should be displayed on category and/or product pages.

    ThemeWare® "Product short description" (Categories)
    ThemeWare® "Product short description" (Product pages / Buybox)

    Note: A description in categories is only available in listing CMS elements with the "Standard" layout type! This also applies to the ThemeWare® short description.

    Note: The short description is displayed if it is enabled in the theme configuration (separately for the product box on listing pages and the buybox on product pages) and the "Short description" custom field is filled on the product.


    Configuration

    Theme configuration

    Categories

    1. Go to the tab "Listing pages"

    2. Expand the block "Product box"

    3. Scroll to the section "Content"

    4. Set the configuration "Use short description" to "use"

    5. Save your changes after editing

    1. Go to the tab "Product pages"

    2. Expand the block "Buybox"

    3. Scroll to the section "Basic configuration"

    1. Switch via the main navigation to the "Product managment" (1) (2) ("Catalogues" => "Products")

    2. Choose the product you want to edit (3)

    3. Switch to the tab "Specifications"



    • Tab "Listing pages" => Block "Product box" => Section "Content" => Use short description

    • Tab "Product pages" => Block "Buy box" => Section "Basic configuration" => Show short description

    Enable the configuration "Show short description"

  • Save your changes after editing

  • Scroll to the section "Custom fields" (4)

  • Select the custom field set of your theme (5)

  • Enter the desired text in the custom field "Short description" (6)

  • Save your changes (7)

  • Product pages

    Content

    Note: You can find more information about the corresponding custom field in the article .

    Tip: If a change does not affect the storefront, just clear the Shopware cache:

    Custom fields

    Summary

    Theme configuration

    Custom field

    Short description
    Short description
    Shopware 6 product managment
    Short description
    Clearing / warming up the Shopware cache

    GPSR information on product pages

    With GPSR information on product pages you display the product safety information under the GPSR – the manufacturer information and the responsible person – on your product pages. The information can be shown in the description, in the manufacturer tab or in a separate tab.

    Note: The GPSR information is displayed when the feature is activated in the theme configuration and the corresponding custom fields on the manufacturer or product are filled.

    Guide: You can find a step-by-step guide in the ThemeWare® Wiki:

    GPSR information in the description
    GPSR information in the "Manufacturer tab"
    GPSR information in a separate tab

    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "GPSR – Product safety (in tabs)" block

    3. Select the desired placement for the "Show product safety (GPSR)" configuration: "show in the description", "show in the manufacturer tab" or "show in a separate tab"

    4. In the "Basic configuration" section, use "Show manufacturer information (GPSR)" and "Show responsible person (GPSR)" to define which information is displayed

    5. Save your changes after editing

    You maintain the GPSR information via custom fields on the manufacturer:

    1. Switch via the main navigation to the "Manufacturers" management ("Catalogues" => "Manufacturers")

    2. Choose the manufacturer you want to edit

    3. Scroll to the "Custom fields" block


    • Show product safety (GPSR)

      • Controls the placement of the GPSR information: "don't show", "show in the description", "show in the manufacturer tab" or "show in a separate tab".

    • Show manufacturer information (GPSR) (section "Basic configuration")



    The subheadlines apply in the description just as in the tab:

    • Manufacturer information: twt.detail.gpsr.manufacturerInformation.title

    • Responsible person: twt.detail.gpsr.responsiblePerson.title

    In both subheadlines the placeholder %manufacturer% is replaced by the manufacturer name.

    If the product safety is displayed in the manufacturer tab, the GPSR box there uses the headline twt.detail.gpsr.title.


    • Tab "Product pages" => Block "GPSR – Product safety (in tabs)" => Show product safety (GPSR)

    • Tab "Product pages" => Block "GPSR – Product safety (in tabs)" => Section "Basic configuration" => Show manufacturer information (GPSR) / Show responsible person (GPSR)

    • twt.detail.gpsr.manufacturerInformation.title

      • %manufacturer% is replaced by the manufacturer name.

    • twt.detail.gpsr.responsiblePerson.title


    You can find details on displaying it in its own tab here:

    The information can also appear in the manufacturer tab:

    Select the tab (=set) for your theme (e.g. "Manufacturers (ThemeWare® Modern Pro)")
  • Fill in the "Manufacturer information" and/or "Responsible person" fields

  • Save your changes

  • Shows or hides the manufacturer information ("show" / "don't show").

  • Show responsible person (GPSR) (section "Basic configuration")

    • Shows or hides the responsible person information ("show" / "don't show").

    • %manufacturer% is replaced by the manufacturer name.

  • twt.detail.gpsr.title

  • Note: "Show in the manufacturer tab" only takes effect if the manufacturer is displayed as its own tab.

    GPSR information (custom field)

    Note: You can alternatively maintain the GPSR information directly on the product (Specifications ⇒ Custom fields). Information maintained on the product overwrites that of the manufacturer.

    Options

    Custom fields

    Snippets

    Summary

    Theme configuration

    Snippets

    Custom fields

    Further information

    Manufacturer information (GPSR)
    Responsible person (GPSR)
    Manufacturer information (GPSR)
    Responsible person (GPSR)
    GPSR tab
    Manufacturer on product pages
    Showing GPSR information on product pages

    Sold label

    The sold out note marks sold-out products in the buybox.

    Sold out

    The status "Sold out" is fulfilled in Shopware if a product is in on "Clearance sale" and the "Available stock" is less than the "Min. order quantity". You can find more information in the Shopware documentation.


    Configuration

    Theme configuration

    1. Go to the "Product pages" tab

    2. Expand the "Delivery information (in the buy box)" block

    3. Scroll to the section "Sold out"

    4. Enable the configuration "Show 'Sold out'"

    5. Save your changes after editing


    • Tab "Product pages" => Block "Delivery information (in the buy box)" => Section "Sold out" => Show 'Sold out'

    • twt.detail.stockLabel.noStock

    Note: The note is displayed if the product is on "Clearance sale" and the stock is below the "Min. order quantity" – provided the "Show 'Sold out'" configuration is enabled. Its appearance follows the "Layout type" in the "Basic configuration" section.

    Note: Variant products are only marked as "Sold out" when they are "expanded" by properties in the listing.

    Summary

    Theme configuration

    Snippet