So integrierst du vertrauensbildende Elemente in den Header

Ein professioneller erster Eindruck ist im E-Commerce besonders wichtig. Gerade im oberen Bereich deines Shops, also im sogenannten Header, kannst du gezielt Vertrauen bei deinen Besuchern aufbauen. Eine einfache und sehr wirkungsvolle Möglichkeit dafür ist ein Sicherheits- oder Qualitätssiegel. Es zeigt deinen Kunden sofort, dass sie in einem geprüften und seriösen Onlineshop einkaufen.

In diesem Tutorial siehst du, wie du ein solches Siegel, zum Beispiel ein Trusted Shops Zertifikat oder ein anderes Vertrauenssymbol, in den Header deiner Shopware 6 Storefront einbaust. Du brauchst dafür nur die zwei Standard-Plugins "Custom Template" und "Custom CSS".

Warum sich ein Siegel im Header lohnt

Ein Vertrauenssiegel im Header hat gleich mehrere Vorteile. Es signalisiert deinen Kunden, dass dein Shop geprüft ist und eine hohe Qualität bietet. Es ist auf jeder Seite sichtbar, sodass deine Besucher unabhängig vom Seiteninhalt sofort erkennen, dass sie in einem sicheren Umfeld einkaufen. Vor allem neue Besucher fassen schneller Vertrauen und sind eher bereit, einen Kauf abzuschließen.

Wenn du das Siegel direkt neben deinem Logo platzierst, stärkst du die Wirkung zusätzlich. Dein Markenauftritt wird mit einer vertrauensbildenden Aussage kombiniert. Das kann helfen, Zweifel beim Kunden direkt zu verringern.

So bindest du das Siegel korrekt ein

Die Integration erfolgt über zwei zentrale Schritte. Du nutzt dazu das Plugin „Custom Template“ für den HTML/Twig-Code und das Plugin „Custom CSS“ für das Styling.

Schritt 1: Siegel über das Custom Template Plugin einfügen

Öffne das Plugin „Custom Template“ in deinem Shopware-Backend und bearbeite dort die Datei mit folgendem Pfad:

storefront/layout/header/header.html.twig

Füge dort diesen Twig-Code ein:

{% block layout_header_navigation %}
    

        

            

                {% block layout_header_logo %}
                    

                        {% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
                    
                {% endblock %}
                

                    
                
                
                {% block layout_header_search %}
                    

                        

                            

                                {% block layout_header_navigation_toggle_tablet %}
                                    

                                        {% block layout_header_navigation_toggle_tablet_button %}
                                            
                                                {% block layout_header_navigation_toggle_tablet_button_icon %}
                                                    {% sw_icon 'stack' %}
                                                {% endblock %}
                                            
                                        {% endblock %}
                                    
                                {% endblock %}
                            
                            

                                {% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
                            
                        
                    
                {% endblock %}
                {% block layout_header_actions %}
                    

                        

                            {% block layout_header_navigation_toggle %}
                                

                                    

                                        {% block layout_header_navigation_toggle_button %}
                                            
                                                {% block layout_header_navigation_toggle_button_icon %}
                                                    {% sw_icon 'stack' %}
                                                {% endblock %}
                                            
                                        {% endblock %}
                                    
                                
                            {% endblock %}
                            {% block layout_header_search_toggle %}
                                

                                    

                                        
                                            {% sw_icon 'search' %}
                                        
                                    
                                
                            {% endblock %}
                            {% if config('core.cart.wishlistEnabled') %}
                                {% block layout_header_actions_wishlist %}
                                    

                                        

                                            
                                                {% sw_include '@Storefront/storefront/layout/header/actions/wishlist-widget.html.twig' %}
                                            
                                        
                                    
                                {% endblock %}
                            {% endif %}
                            {% block layout_header_actions_account %}
                                

                                    

                                        {% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
                                    
                                
                            {% endblock %}
                            {% block layout_header_actions_cart %}
                                

                                    

                                        
                                            {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
                                        
                                    
                                
                            {% endblock %}
                        
                    
                {% endblock %}
            
        
    
{% endblock %}

Schritt 2: CSS im Plugin „Custom CSS“ hinterlegen

Öffne jetzt das Plugin „Custom CSS“ und lege dort einen neuen Container an. Füge dort den folgenden Code ein:

.header-siegel-col {
    display: none;
}

@media(min-width: 992px) {
    .header-siegel-col {
        display: block;
    }

    .header-siegel-col img {
        transition: 0.3s all ease;
        max-width: 75px;
        max-height: 75px;
    }
}

Dieses CSS sorgt dafür, dass das Siegel nur auf größeren Bildschirmen (ab 992 Pixel Breite) angezeigt wird. Auf Smartphones bleibt der Header kompakt, weil das Siegel dort automatisch ausgeblendet wird.

So prüfst du deine Anpassung

Nach dem Speichern beider Plugins solltest du den Cache im Shop leeren und das Theme neu kompilieren. Rufe danach deinen Shop im Frontend auf und überprüfe, ob das Siegel korrekt neben deinem Logo erscheint.

Wenn du ein anderes Bild verwenden möchtest, tauschst du einfach den Link im src-Attribut des -Tags aus.

Fazit

Mit wenigen Handgriffen kannst du deinem Shop ein vertrauensbildendes Element im Header hinzufügen – ganz ohne zusätzliches Plugin oder technische Vorkenntnisse. Durch die Platzierung neben dem Logo kombinierst du deine Marke mit einem klaren Qualitätsversprechen. Das schafft Sicherheit und fördert die Kaufentscheidung.

Die Kombination aus Custom Template und Custom CSS bietet dir dabei volle Kontrolle über Inhalt und Gestaltung - und das direkt im Shopware-Backend.