Top bar or service navigation missing after an update

After an update, the top bar in the header may be missing, or the service navigation may have disappeared from it. What exactly you see depends on your shop:

• If your shop runs several languages or currencies, the language and currency switchers remain visible. The service navigation and the hotline are missing.
• If your shop runs only one language and one currency, nothing remains at all. The bar collapses and appears to have vanished.
• If you have moved the contents of the top bar into the USP bar, the switchers appear twice in the header, once in the USP bar and once at the regular position.

---

What has changed

In version 7.13, Shopware Commercial ships its own version of the file storefront/layout/header/top-bar.html.twig. In it, the template block layout_header_top_bar_inner is replaced entirely, without bringing back the original content via {{ parent() }}:

SwagCommercial: top-bar.html.twig

{% block layout_header_top_bar_inner %}
    ...
    {% if header.languages.count > 1 or header.currencies.count > 1 or b2bHasSwitcher %}
        <nav class="top-bar-nav d-flex justify-content-end align-items-center gap-3" ...>
            ...
        </nav>
    {% endif %}
{% endblock %}

Everything a theme adds at this position is dropped without replacement. In the case of ThemeWare®, that means the service navigation, the hotline and the styling of the bar. In version 7.11 this file did not yet exist, which is why the effect only appears after the update.

By the way, this does not only affect ThemeWare®, but every extension that extends the top bar at this position.

How to check whether you are affected

Open the page source of your storefront (Ctrl + U) and search for top-bar-nav. The two versions differ in their class list:

Source	Markup
ThemeWare®	<nav class="top-bar-nav d-flex justify-content-end gap-3">, containing a <div class="... twt-top-bar">
Shopware Commercial	<nav class="top-bar-nav d-flex justify-content-end align-items-center gap-3">, containing only the switchers

If you find align-items-center and no twt-top-bar, you are looking at the case described above.

---

The solution: ThemeWare® 5.2.0

Since ThemeWare® 5.2.0 there is a dedicated compatibility mode for this case. It stays off until you switch it on - shops without Shopware Commercial are not affected.

1. Update ThemeWare® to version 5.2.0 or higher
2. Open the theme configuration and set the following configuration to ThemeWare® (plugin compatible):

Tab "Others" => Block "Compatibility (HC-Architecture®)" => Section "Header" => "Top bar"

3. Save the theme configuration and clear your browser cache (Ctrl + F5)

Hotline, service menu, colors and alignment of ThemeWare® are back. The content of Shopware Commercial - the B2B context switcher for organization units - stays visible and is embedded where the language and currency switchers sit.

---

Workaround if you cannot update yet

If you cannot install the update yet, the top bar can be restored with your own template file in the "ThemeWare® Customizing Plugin".

1. Raise the priority of the extension

For your template file to take effect after the file from Shopware Commercial, the extension needs a higher priority. Add the following method to TcinnCustomizing.php:

TcinnCustomizing.php

public function getTemplatePriority(): int
{
    return 100; // high priority
}

2. Create the template file

Create the following file in the Customizing Plugin:

src/Resources/views/storefront/layout/header/top-bar.html.twig

top-bar.html.twig

{% sw_extends '@Storefront/storefront/layout/header/top-bar.html.twig' %}

{% block layout_header_top_bar_inner %}
    <nav class="top-bar-nav d-flex justify-content-end gap-3"
         aria-label="{{ 'header.topBarAriaLabel'|trans|striptags }}"
    >
        <div class="row align-items-center twt-top-bar">
            {% if theme_config('twt-header-top-bar-hotline-show') == 2 %}
                <div class="col-auto">
                    <div class="twt-top-bar-hotline">
                        <div class="top-bar-hotline">
                            <span class="twt-top-bar-hotline-label">{{ 'twt.header.serviceHotline'|trans|sw_sanitize }}</span>
                            {{ 'twt.header.serviceHotlineText'|trans|sw_sanitize }}
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="col-auto{% if theme_config('twt-header-top-bar-hotline-show') == 2 %} ps-0{% endif %}">
                <div class="twt-top-bar-dropdowns d-flex justify-content-end gap-3">
                    {% if theme_config('twt-header-top-bar-languages-menu-show') == 2 and header.languages.count > 1 %}
                        {% sw_include '@Storefront/storefront/layout/header/actions/language-widget.html.twig' %}
                    {% endif %}

                    {% if theme_config('twt-header-top-bar-currencies-menu-show') == 2 and header.currencies.count > 1 %}
                        {% sw_include '@Storefront/storefront/layout/header/actions/currency-widget.html.twig' %}
                    {% endif %}

                    {% sw_include '@Storefront/storefront/themeware/twt-service-menu.html.twig' ignore missing %}
                </div>
            </div>
        </div>
    </nav>
{% endblock %}

3. Update the extension and clear the cache

1. Zip the folder TcinnCustomizing and upload it to your shop
2. Clear the Shopware cache ("Settings" => "System" => "Caches & indexes" => "Clear caches")
3. Clear your browser cache (Ctrl + F5)

---