So fügst du eigene CSS-Regeln im JTL-Shop ein

Schritt für Schritt

1. Plain Drop anlegen, z.B. "Custom CSS: Kategorieaktion".
2. CSS-Code in einen <style type="text/css">...</style> Block in Inhaltsbereich des Plain Drops schreiben.
3. Drop an einer passenden Position einfügen, z.B. über den CSS-Selektor head.
4. Optional Darstellungsfilter setzen, damit die Regeln nur auf bestimmten Shopseiten ausgegeben werden.
5. Ergebnis im Frontend prüfen.

Ein einfacher Inhalt eines Plain Drops könnte dann so aussehen:

<style type="text/css">
    header {
        background: black;
    }

    header a,
    header .nav-link {
        color: white;
    }
</style>

Wissenswert

Diese Methode eignet sich für kleine, gezielte CSS-Regeln, die nicht dauerhaft ins Theme gehören oder nicht im ganzen Shop gelten sollen. Für umfangreiches Theme-Styling bleibt eine saubere CSS-Datei im Template oder Child-Template oft die bessere Lösung. Ein Plain Drop ist dagegen stark, wenn du schnell testen, temporär anpassen oder CSS bewusst nur in einem bestimmten Kontext ausgeben möchtest. Bewährt sich die Anpassung, kannst du sie später immer noch in dein Theme übernehmen.

Das Plain Drop ist bereits in Dropper Bronze enthalten - unserem günstigsten Plan. Du brauchst dafür also kein großes Drop-Setup, sondern kannst mit einer schlanken Dropper-Konfiguration starten.

Der naheliegende Einfügeort für CSS ist meist der head-Bereich. Auch dort kannst du Drops platzieren, denn head ist ein valider CSS-Selektor für die Einfügemethode per Selektor. Der CSS-Code muss also nicht direkt neben dem Element stehen, das er stylt. Wichtig ist, dass er auf der richtigen Seite geladen wird.

Besonders spannend wird die Kombination aus CSS-Regel und Darstellungsfilter. So kann ein Shop für bestimmte Kundengruppen leicht anders aussehen, z.B. mit einem hervorgehobenen Hinweis für B2B-Kunden, einer angepassten Landingpage für eingeloggte Kunden oder einem speziellen Kampagnenbereich nur für ausgewählte Zielgruppen.

Auch zeitgesteuertes Styling lässt sich so sauber abbilden: saisonale Farben, ein Feiertags-Look oder eine Black-Friday-Farbvariante können per Plain Drop eingebunden und über Darstellungsfilter zeitlich begrenzt werden. In der Demo überschreibt ein zusätzliches Drop das Header-Styling nur am Wochenende.

Wenn du Drops stylen möchtest, kannst du mit vielen Selektoren ansetzen. Drop-Instanzen kapseln ihre Ausgaben meist in einem Container wie <div class="kk-usp kk-usp-f845b399-3510-4db9-9fda-9ea3d23081d8">...</div>, wobei die letzte Klasse die eindeutige ID der Drop-Instanz enthält. Zusätzlich bringen Drops oft eine Einstellung wie "CSS Klassen" mit. Und wo diese fehlt, kannst du den Drop-Container nutzen, um einen DIV-Container mit deinen Wunsch-Klassen um das Drop zu spannen.

Wenn du nicht nur CSS-Regeln ausgeben, sondern zusätzliche Inhalte einfügen möchtest, bist du schnell bei einem zentralen Dropper-Use-Case: Dann platzierst du z.B. Banner, Hinweise, Produktlisten, Formulare oder ganze Grids an der passenden Stelle im Shop. Genau diesen Ansatz beschreibt Toolbox #009 - JTL-Shop ohne Child-Template anpassen.

Ressourcen