#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:


Vor- und Nachteile

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 6 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 6 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 6 Cloud nur eingeschränkt möglich


3) Individuellen SCSS-Code integrieren (für erfahrende Anwender)

Die derzeit professionellste Methode ist es 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. Mehr Informationen findest du in unserem Artikel "Individuelle Anpassungen mittels SCSS" (Link siehe unten).


  • 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 6 Cloud nicht möglich


Anleitung: Individuellen CSS-Code integrieren


1) 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 (Link siehe 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

  1. Logge dich per FTP auf deinem Server ein und wechsle in den Ordner "css".
    Ordnerpfad: "public/css/"
  2. Erstelle die Datei "main.css".
  3. Hinterlege in der "main.css" deinen CSS-Code.
  4. Speichere die Änderung der Datei "main.css" und lade diese ggf. erneut hoch.


2.2) CSS-Datei mit ThemeWare® einbinden

  1. Öffne ThemeWare® im Theme-Manager und wechsle in den Tab "Weiteres" => Bereich "Beta"
  2. Trage im Feld "Externe CSS-Datei" den Pfad zur "main.css" ein. (z.B. "deinshop.de/css/main.css")
  3. Speichere die Einstellungen damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront wirksam werden.


3) Individuellen SCSS-Code integrieren (für erfahrende Anwender)

Eine ausführliche Anleitung findest du in unserem Artikel: "Individuelle Anpassungen mittels SCSS" (Link siehe unten).



Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

9b0e9be582e8888284c7f5556241fc51
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen