#2148 Individuelle Anpassungen mittels CSS
Du hast mit ThemeWare® verschiedene Möglichkeiten, um eigenes CSS-Styling zu deinem Shop hinzuzufügen. Je nachdem, was du ändern möchtest und wie umfangreich die Änderungen sind, wählst du die für dich passende Methode.
Damit du dich möglichst leicht für einen Weg entscheiden kannst, haben wir dir jeweils die Vor- und Nachteile aufgelistet:
1) Individuellen CSS-Code mit der ThemeWare®-Konfiguration integrieren
Über die ThemeWare®-Konfiguration ist es möglich schnell und unkompliziert kleine CSS-Anpassungen zu hinterlegen. Dieser Code wird zwar nicht komprimiert und es ist lediglich CSS-Syntax möglich, dennoch ist dies der einfachste Weg für Einsteiger.
1.1) Individuellen CSS-Code mit Textbaustein integrieren
- Vorteile
- schnelle Vorgehensweise
- in der Shopware Cloud möglich
- Nachteile
- ausschließlich CSS-Syntax möglich
- CSS wird nicht automatisch komprimiert
1.2) Individuellen CSS-Code mit Konfigurationsfeld integrieren
- Vorteile
- schnellste Vorgehensweise
- in der Shopware Cloud möglich
- Nachteile
- ausschließlich CSS-Syntax möglich
- CSS wird nicht automatisch komprimiert
2) Individuellen CSS-Code mit externer CSS-Datei integrieren
Die ThemeWare®-Konfiguration bietet dir ebenfalls die Möglichkeit eine externe Datei über eine URL einzubinden. Damit kann auch eine Datei welche über ein CDN (Content Delivery Network) verfügbar ist integriert werden.
- Vorteile
- externe Datei integrierbar
- Nachteile
- ausschließlich CSS-Syntax möglich
- CSS wird nicht automatisch komprimiert
- in der Shopware Cloud nur eingeschränkt möglich
3) Individuellen CSS/SCSS-Code integrieren (für erfahrende Anwender)
Die derzeit professionellste Methode ist es CSS/SCSS über ein separates Plugin zu integrieren. Hierfür haben wir ein kleines kostenfreies Plugin "ThemeWare® Customizing" für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.
- Vorteile
- professionelle Vorgehensweise
- SCSS-Syntax und SCSS-Variablen möglich
- CSS/SCSS wird automatisch komprimiert
- Nachteile
- eher für erfahrende Anwender
- nur über externes Plugin möglich
- in der Shopware Cloud nicht möglich
Anleitung: Individuellen CSS-Code integrieren
1.1) Individuellen CSS-Code mit Textbaustein integrieren
Hinterlege den gewünschten CSS-Code im Textbaustein "twt.custom.css" und aktiviere das folgende Konfigurationsfeld: Tab "Weiteres" => Bereich "Beta" => Feld "Individueller CSS-Code (Textbaustein)"
Hinweis: Diese Option war ein Workaround bis Option 1.2 (sh. unten) möglich war und wird nicht mehr von uns empfohlen.
1.2) Individuellen CSS-Code mit Konfigurationsfeld integrieren
Hinterlege den gewünschten CSS-Code in folgendem Konfigurationsfeld: Tab "Weiteres" => Bereich "Beta" => Feld "Individueller CSS-Code"
2) Individuellen CSS-Code mit externer CSS-Datei integrieren
Um eine Datei lokal auf deinem Server zu hinterlegen und diese in die Storefront zu integrieren, gehe bitte wie folgt vor:
2.1) CSS-Datei auf dem Server erstellen und bearbeiten
- Logge dich per FTP auf deinem Server ein und wechsle in den Ordner "css".
Ordnerpfad: "public/css/" - Erstelle die Datei "main.css".
- Hinterlege in der "main.css" deinen CSS-Code.
- Speichere die Änderung der Datei "main.scss" und lade diese ggf. erneut hoch.
2.2) CSS-Datei mit ThemeWare® einbinden
- Öffne ThemeWare® im "Theme Manager" und wechsle in den Bereich "Beta" (Tab "Weiteres" => Bereich "Beta")
- Trage im Feld "Externe CSS-Datei" den Pfad zur "main.css" ein. (z.B. "deinshop.de/css/main.css")
- Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront wirksam werden.
3) Individuellen CSS/SCSS-Code integrieren (für erfahrende Anwender)
Eine ausführliche Anleitung und den Download-Link zu unserem kostenfreien Plugin findest du in unserem Artikel: "Individuelle Anpassungen mittels SCSS"
Weiterführende Links:
- ThemeWare® Tutorial: "Individuelle Anpassungen mittels SCSS" (für erfahrende Anwender)
- ThemeWare® Tutorial: "Individuelle Template-Anpassungen (Twig, HTML, SCSS)" (für erfahrende Anwender)
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, kannst du hier ein Support-Ticket eröffnen.