TrustedShops-Siegel hinter dem Offcanvas-Warenkorb platzieren

Das TrustedShops-Siegel ist ein wichtiges Vertrauensmerkmal für Deinen Onlineshop. Im Standard bleibt das Siegel jedoch über dem Offcanvas-Warenkorb sichtbar. Dies kann die Benutzerfreundlichkeit beeinträchtigen, da das Siegel wichtige Bedienelemente wie Buttons verdeckt und so den Kaufabschluss erschwert. In dieser Anleitung siehst du Schritt für Schritt, wie Du das TrustedShops-Siegel hinter den Offcanvas-Warenkorb platzieren kannst, um die Bedienung deines Onlineshops zu optimieren.

Wo liegt das Problem?

Das Trusted Shops Siegel wird mit einer sehr hohen z-index-Priorität geladen und legt sich so über andere Elemente – darunter auch den Warenkorb oder die Kauf-Buttons. Das sieht nicht nur unschön aus, sondern kann Kunden auch daran hindern, den Kauf abzuschließen.

Die Lösung: CSS-Anpassung über Custom CSS / JS

Zum Glück lässt sich das Problem ganz ohne technisches Spezialwissen lösen. Mit einer kleinen CSS-Anpassung im Plugin Custom CSS / JS kannst Du die Anzeige-Ebene (z-index) des Siegels so ändern, dass es hinter dem Off-Canvas-Warenkorb verschwindet.

1. Logge Dich in Deinen Shopware 6 Adminbereich ein.
2. Navigiere zu:
   Erweiterungen → Custom CSS / JS
3. Erstelle einen neuen Container:
   Klicke auf „Container hinzufügen“, gib dem Container einen Namen wie z. B. Trusted Shops Fix.
4. Verkaufskanal auswählen:
   Du kannst entscheiden, ob die Änderung für alle Verkaufskanäle oder nur für einen bestimmten gelten soll.
5. Container aktivieren:
   Setze den Haken bei Aktiv, damit der Code später auch wirklich angewendet wird.
6. CSS-Code einfügen:
   Kopiere den folgenden Code in das CSS-Feld des Containers:

// put trustbadge behind basket
div[id^="trustbadge-container-"] {
    z-index: 1040 !important;
}

Dieser kleine Schnipsel sorgt dafür, dass das Siegel eine niedrigere z-index bekommt und somit automatisch hinter dem Warenkorb liegt.

7. Speichern und kompilieren nicht vergessen!

Fazit: Wenig Code mit großer Wirkung

Mit dieser kleinen Anpassung verbesserst Du das Einkaufserlebnis in Deinem Shop spürbar – ganz ohne externe Hilfe oder tiefes technisches Wissen. Gerade bei mobilen Nutzern oder kleineren Bildschirmen kann dieser Schritt den entscheidenden Unterschied machen, ob ein Kauf erfolgreich abgeschlossen wird oder nicht.