#2147 Individuelle Anpassungen mittels SCSS

Wie du optische Anpassungen mittels SCSS vornehmen kannst, erfährst du in diesem Artikel.

Hinweis: Das erstellen eines ThemeWare® Duplikates ist für Template-Anpassungen nicht notwendig. 

Hinweis: In der Shopware 6 Cloud sind aktuell keine individuellen Anpassungen möglich!


Lösungen

  1. Prüfe ob es im Shopware Community Store bereits ein passendes Plugin gibt.
  2. Alternativ kannst du die nachfolgende manuelle Methode nutzen.


Einsicht in den Quellcode

Den grundlegenden Aufbau (Template-Ordner, Template-Dateien, Twig-Blöcke, etc.) gibt das Shopware Theme "Shopware default theme" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist.


Auch wenn du die originalen ThemeWare®-Dateien nicht bearbeiten darfst, ist es manchmal nötig, dass du hier etwas nachschaust. Du findest die Dateien unter folgendem Pfad in deinem Shopware Ordner (XXX = Modern, Living, Clean, etc.):

  • Twig: "custom/plugins/TcinnThemeWareXXX/src/Resources/views/storefront/"
  • SCSS: "custom/plugins/TcinnThemeWareXXX/src/Resources/app/storefront/src/scss/"


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

In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround ein kleines kostenfreies Plugin "ThemeWare® Customizing" für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.

Alle Informationen zum Plugin, der Installation und den Download-Link findest du über folgenden Link:


Download ThemeWare® Customizing

1) Plugin vorbereiten

  1. Lade die Zip-Datei unseres Plugins über die Shopware 6 Erweiterungs-Verwaltung hoch.
  2. Installiere und aktiviere das Plugin danach.


2) SCSS/CSS-Code einfügen

  1. Bearbeite die Datei "main.scss" im Ordner: "custom/plugins/TcinnCustomizing/src/Resources/app/storefront/src/scss/"
  2. Speichere die Änderung der Datei "main.scss" und lade diese ggf. erneut hoch.


3) Theme kompilieren

  • Öffne ThemeWare® im Theme-Manager und speichere die Einstellungen unverändert ab, damit das aktuelle Theme kompiliert wird und Änderungen in die Storefront übertragen werden.


Hinweis: Bei jeder SCSS/CSS Änderung im "ThemeWare® Customizing" Plugin muss das aktuelle Theme kompiliert werden damit Änderungen in die Storefront übertragen werden.


Hilfreiche SCSS-Grundlagen

Individuelle Anpassungen müssen in der Datei "main.scss" hinterlegt werden. Zur besseren Strukturierung ist es möglich bei zahlreichen Anpassungen auf zusätzliche Ordner und Dateien zurückzugreifen. Diese können ganz einfach per "@import "deine-datei.scss"" integriert werden.


Beispielanpassung in der Datei "main.scss"

In diesem Beispiel verwenden wir auch die ThemeWare®-Variablen "twt-color-brand-primary-light" (Tab "Layout" => Bereich "Hauptfarben" => Feld "Primärfarbe Hell") und "twt-color-brand-primary-dark" (Tab "Layout" => Bereich "Hauptfarben" => Feld "Primärfarbe Dunkel").


// Beispiel: Farbliche Änderung vom Artikelnamen auf der Artikelseite
// Example: Colour change of the article name on the article page

$eigene-variable: #FF0004;

.is-ctl-product {
.product-detail-name {
background-color: $twt-color-brand-primary-light;
border: 1px solid $twt-color-brand-primary-dark;
padding: 10px;
color: $eigene-variable;
}
}
Wichtig: Änderungen werden erst nach dem erfolgreichen kompilieren des aktiven Themes angezeigt.


Hinweis: Weitere Informationen rund um "SCSS" findest du unter: https://sass-lang.com


Zusätzliches ThemeWare®-Wissen

ThemeWare®-Variablen finden

Über unsere Feldsuchmaschine hast du die Möglichkeit alle ThemeWare®-Variablen anzeigen zu lassen. Der "technische Name" in dieser Übersicht ist der Name der entsprechenden Variable, die du in Twig oder SCSS verwenden kannst.


Abgrenzung für ThemeWare®-Anpassungen

Ist eine SCSS/CSS-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung beispielsweise über unsere ThemeWare®-Konfiguration mit der "Body-Klasse" einzuschränken. 

Hinterlege dafür im Theme-Duplikat für den entsprechenden Verkaufskanal unter Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal. 


Beispiel Body-Klasse: "meinshopname"


Dieser Name kann dann durch die Position am HTML-Body für SCSS-Prüfungen genutzt werden.


Eingrenzung im SCSS:

// Anpassung nur für Theme mit der Klasse meinshopname
.meinshopname {
h1 {
// Anpassung...
}
}

Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

ee1afabca9baa406d2ef49432e6362d5
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