Ein Erstbesucher entscheidet innerhalb weniger Sekunden, ob er Ihrem Shop seine Zahlungsdaten anvertraut. Er kennt Ihre Marke nicht, er kennt Ihre Retourenquote nicht und er hat keine Bestellhistorie bei Ihnen. Was ihm bleibt, sind Signale. Ein Prüfsiegel im Header ist eines der wenigen Signale, das auf jeder einzelnen Seite sichtbar ist, unabhängig davon, ob der Besucher über die Startseite, eine Kategorie oder eine Produktdetailseite einsteigt.
Diese Anleitung zeigt Ihnen, wie Sie ein Siegel, etwa ein Trusted Shops Zertifikat, im Header Ihrer Shopware 6 Storefront platzieren. Sie benötigen dafür die beiden Standard-Plugins "Custom Template" und "Custom CSS".
Warum sich ein Siegel im Header lohnt
Der Header liegt auf jeder Seite Ihres Shops. Ein Siegel an dieser Stelle erreicht damit auch Besucher, die über eine Anzeige direkt auf einer Produktseite landen und Ihre Startseite nie sehen. Genau diese Gruppe hat den geringsten Vertrauensvorschuss.
In der Praxis zeigt sich das vor allem bei Shops, die einen großen Teil ihres Traffics über bezahlte Kanäle einkaufen. Dort trifft teuer eingekaufter Besucher auf eine unbekannte Marke. Wer das Siegel direkt neben dem Logo platziert, verbindet beide Informationen in einem Blick: Wer verkauft hier, und wurde dieser Verkäufer geprüft.
So binden Sie das Siegel korrekt ein
Für diese Aufgabe gibt es kein eigenes Plugin, und Sie brauchen auch keines. Zwei Bordmittel reichen: "Custom Template" liefert den Twig-Code, "Custom CSS" das Styling. Beide arbeiten außerhalb Ihres Themes, was die Anpassung update-sicher und jederzeit rückbaubar macht.
Schritt 1: Siegel über das Custom Template Plugin einfügen
Öffnen Sie das Plugin „Custom Template“ in Ihrem Shopware-Backend und bearbeiten Sie dort die Datei mit folgendem Pfad:
storefront/layout/header/header.html.twig
Fügen Sie dort diesen Twig-Code ein:
{% block layout_header_navigation %}
<div class="nav-header">
<div class="container">
<div class="row align-items-center header-row">
{% block layout_header_logo %}
<div class="col-12 col-lg-auto header-logo-col">
{% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
</div>
{% endblock %}
<div class="col-12 col-lg-auto header-siegel-col">
<img class="img-fluid" loading="lazy" src="TRAG HIER DEN LINK ZU DEINEM SIEGEL EIN" alt="BILDBESCHREIBUNG EINFÜGEN" />
</div>
{% block layout_header_search %}
<div class="col-12 order-2 col-sm order-sm-1 header-search-col">
<div class="row">
<div class="col-sm-auto d-none d-sm-block d-lg-none">
{% block layout_header_navigation_toggle_tablet %}
<div class="nav-main-toggle">
{% block layout_header_navigation_toggle_tablet_button %}
<button
class="btn nav-main-toggle-btn header-actions-btn"
type="button"
{# @deprecated tag:v6.6.0 - Registering plugin on selector "data-offcanvas-menu" is deprecated. Use "data-off-canvas-menu" instead #}
{% if feature('v6.6.0.0') %}
data-off-canvas-menu="true"
{% else %}
data-offcanvas-menu="true"
{% endif %}
aria-label="{{ "general.menuLink"|trans|striptags }}"
>
{% block layout_header_navigation_toggle_tablet_button_icon %}
{% sw_icon 'stack' %}
{% endblock %}
</button>
{% endblock %}
</div>
{% endblock %}
</div>
<div class="col">
{% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
</div>
</div>
</div>
{% endblock %}
{% block layout_header_actions %}
<div class="col-12 order-1 col-sm-auto order-sm-2 header-actions-col">
<div class="row g-0">
{% block layout_header_navigation_toggle %}
<div class="col d-sm-none">
<div class="menu-button">
{% block layout_header_navigation_toggle_button %}
<button
class="btn nav-main-toggle-btn header-actions-btn"
type="button"
{# @deprecated tag:v6.6.0 - Registering plugin on selector "data-offcanvas-menu" is deprecated. Use "data-off-canvas-menu" instead #}
{% if feature('v6.6.0.0') %}
data-off-canvas-menu="true"
{% else %}
data-offcanvas-menu="true"
{% endif %}
aria-label="{{ "general.menuLink"|trans|striptags }}"
>
{% block layout_header_navigation_toggle_button_icon %}
{% sw_icon 'stack' %}
{% endblock %}
</button>
{% endblock %}
</div>
</div>
{% endblock %}
{% block layout_header_search_toggle %}
<div class="col-auto d-sm-none">
<div class="search-toggle">
<button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#searchCollapse"
aria-expanded="false"
aria-controls="searchCollapse"
aria-label="{{ "header.searchButton"|trans|striptags }}">
{% sw_icon 'search' %}
</button>
</div>
</div>
{% endblock %}
{% if config('core.cart.wishlistEnabled') %}
{% block layout_header_actions_wishlist %}
<div class="col-auto">
<div class="header-wishlist">
<a class="btn header-wishlist-btn header-actions-btn"
href="{{ path('frontend.wishlist.page') }}"
title="{{ 'header.wishlist'|trans|striptags }}"
aria-label="{{ 'header.wishlist'|trans|striptags }}">
{% sw_include '@Storefront/storefront/layout/header/actions/wishlist-widget.html.twig' %}
</a>
</div>
</div>
{% endblock %}
{% endif %}
{% block layout_header_actions_account %}
<div class="col-auto">
<div class="account-menu">
{% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
</div>
</div>
{% endblock %}
{% block layout_header_actions_cart %}
<div class="col-auto">
<div
class="header-cart"
{# @deprecated tag:v6.6.0 - Registering plugin on selector "data-offcanvas-cart" is deprecated. Use "data-off-canvas-cart" instead #}
{% if feature('v6.6.0.0') %}
data-off-canvas-cart="true"
{% else %}
data-offcanvas-cart="true"
{% endif %}
>
<a class="btn header-cart-btn header-actions-btn"
href="{{ path('frontend.checkout.cart.page') }}"
data-cart-widget="true"
title="{{ 'checkout.cartTitle'|trans|striptags }}"
aria-label="{{ 'checkout.cartTitle'|trans|striptags }}">
{% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
</a>
</div>
</div>
{% endblock %}
</div>
</div>
{% endblock %}
</div>
</div>
</div>
{% endblock %}Ein Hinweis zur Sorgfalt: Sie überschreiben hier den kompletten Header-Block. Wenn Shopware das Original-Template in einer künftigen Version anpasst, greift Ihre Version weiter und die Änderung fehlt Ihnen im Frontend. Prüfen Sie diesen Override nach größeren Updates einmal gegen das aktuelle Standard-Template.
Schritt 2: CSS im Plugin „Custom CSS“ hinterlegen
Öffnen Sie jetzt das Plugin „Custom CSS“ und legen Sie dort einen neuen Container an. Fügen Sie diesen 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;
}
}Das CSS blendet das Siegel unterhalb von 992 Pixeln Breite aus. Auf dem Smartphone bleibt der Header damit kompakt, und Suche, Warenkorb und Menü behalten ihren Platz. Da das Siegel auf maximal 75 Pixel skaliert, sollten Sie eine Grafik mit sauberer Kantenschärfe verwenden. Ein hochauflösendes PNG oder eine SVG-Datei liefert hier das bessere Ergebnis als ein kleines, bereits komprimiertes Bild.
So prüfen Sie Ihre Anpassung
Speichern Sie beide Plugins, leeren Sie anschließend den Cache und kompilieren Sie das Theme neu. Rufen Sie danach das Frontend auf und kontrollieren Sie, ob das Siegel neben dem Logo sitzt. Verkleinern Sie das Browserfenster zusätzlich unter 992 Pixel, um die mobile Ansicht gegenzuprüfen.
Möchten Sie ein anderes Bild verwenden, tauschen Sie den Link im src-Attribut des <img>-Tags aus. Alles Weitere bleibt unverändert.
Fazit
Zwei Plugins, ein Twig-Block und neun Zeilen CSS. Mehr braucht ein Vertrauenssiegel im Header nicht. Sie behalten dabei die Kontrolle über Inhalt und Darstellung, ohne ein weiteres Fremdplugin in Ihren Shop zu holen, das Sie bei jedem Update mitpflegen müssen.
Wenn Ihr Header stärker vom Standard abweicht, etwa durch ein individuelles Theme oder ein bereits bestehendes Override, lohnt sich vorher ein Blick auf die vorhandene Struktur. Bei solchen Konstellationen unterstütze ich Sie gern.
Noch keine Kommentare vorhanden
Schreibe einen Kommentar