Shopware 6 Themes selbst erstellen oder kaufen? Alles rund um die Shopware 6 Template Entwicklung

30.05.2023

von Meike Müller

E-Commerce

Um Shopware als Verkaufskanal zu verwenden, benötigst du auch ein sogenanntes Shopware Template, das das Design und auch einige Funktionalitäten deines Onlineshops bestimmt. Die Wahl des richtigen Templates ist entscheidend für den Erfolg mit deinem Shopware Shop. Aus diesem Grund wird sich dir früher oder später die Frage stellen, ob du ein fertiges Shoptheme verwendest oder du ein eigenes entwickelst. In diesem Beitrag erfährst du alles, was du für diese Entscheidung wissen musst.

Lesezeit 5 min

Was dich in diesem Artikel erwartet:

Was ist ein Theme?
Theme kaufen oder selbst erstellen?
1. Vorteile und Nachteile für den Kauf eines Themes
2. Vorteile und Nachteile für die Erstellung eines eigenen Themes
Tipps für deinen Kauf eines Shopware Themes
Oder doch lieber selbst erstellen? Voraussetzungen für die Erstellung von deinem eigenen Theme
1. Schritt-für-Schritt: So erstellst du dein eigenes Shopware Theme
Unser Fazit
FAQ: Fragen und Antworten rund um die Shopware Themes

Was ist ein Theme?

Allgemein gesagt, ist ein Theme eine Zusammenstellung von verschiedenen Grafik-Elementen, die das Aussehen einer Benutzeroberfläche bestimmen. So gibt es beispielsweise auch Themes, die das Erscheinungsbild deines Onlineshops beeinflussen können.

Ein Theme stellt innerhalb eines Systems eine autarke Einheit dar, die als eigenständiges Modul ausgelagert und einzeln geladen werden kann. Durch diesen Ansatz wird ein unkomplizierter Austausch des Themes ermöglicht, ohne dass dabei andere Funktionskomponenten des Systems beeinträchtigt werden. Dadurch können Änderungen am Erscheinungsbild des Systems mit minimalem Aufwand vorgenommen werden, was insbesondere bei der Anpassung an unterschiedliche Anforderungen und Zielgruppen von Vorteil ist.

Für deinen Shopware Onlineshop musst du ebenfalls ein Theme wählen. Dabei hat sich von der Version Shopware 5 zu Shopware 6 einiges getan. Denn in Shopware 6 gibt es bereits standardisierte Templates, die du einfach auswählen kannst. Das Standard Theme ist dabei responsiv gestaltet, sodass deine Kunden deinen Onlineshop sowohl auf dem Desktop, aber auch auf dem Smartphone oder einem anderen Endgerät verwenden können. Auch ein paar Individualisierungen kannst du beim Standard-Thema einstellen. Generell bleibt es aber nur bei kleineren Änderungen wie Farben und Logos. Der Wiedererkennungswert ist damit sehr gering. Beim Kauf eines der vielen Shopware Themes sieht es schon besser aus. Noch besser ist natürlich die Entwicklung eines eigenen Shopware Themes. Damit ist die Einzigartigkeit deines Shopdesigns zu 100 % gegeben.

Theme kaufen oder selbst erstellen?

Mit deinem Onlineshop möchtest du sicherlich auf Individualität setzen und deine Unternehmen oder deine Marke besonders herausstechen lassen. Eignet sich dafür dann ein gekauftes Shopware Theme? Oder solltest du besser von Grund auf ein eigenes Theme erstellen, um in jedem Teilaspekt deines Onlineshops so individuell und auf die Zielgruppe zugeschnitten wie möglich zu sein? Allgemein lassen sich diese Fragen nicht beantworten. Dabei kommt es vor allem darauf an, um welche Produkte oder Dienstleistungen es sich handelt und welche Merkmale deine Zielgruppe ausmachen. Gerade komplexere Produkte benötigen vielleicht eine speziellere Darstellung, die in einem Standardtheme nicht abgedeckt ist. Jedoch kann es genauso gut sein, dass ein gekauftes Theme durchaus ausreicht. Beide Varianten haben ihre Vor- und Nachteile, die wir deshalb nun für dich zusammengestellt haben. Dies wird dir eine Hilfe bei der Entscheidung sein!

Vorteile und Nachteile für den Kauf eines Themes

Kauf eines Themes Vorteile	Kauf eines Themes Nachteile
Kein großer Aufwand: Ein Vorteil beim Kauf eines fertigen Shopware Templates ist, dass du kaum Zeit aufwenden musst für die Programmierung und Entwicklung des Designs sowie jeglicher Funktionen. Diese kaufst du direkt in einem Komplettpaket und musst das Template nur noch installieren und für dich anpassen. Unterstützung durch den Entwickler: Solltest du Probleme oder Fragen zum Template haben, gibt es meist von den Template Entwicklern Support und auch Updates. Hier bist natürlich aber auch abhängig, dass dies zeitnah geschieht. Eine Garantie gibt es dafür nämlich in der Regel nicht. Professionelles Design und bewährte Funktionen: Du hast natürlich die Wahl, welches Template du kaufen möchtest. Da es bereits viele Templatedesigns gibt, hast du eine große Auswahl und findest sicherlich auch eins, das professionell aussieht. Denn die Entwickler wissen in der Regel, was sie machen. Für spezifischere Designs und Funktionen kann es aber auch mal schwierig werden, genau das zu finden, was du benötigst.	Eingeschränkte Individualisierungsmöglichkeit: Dies ist vermutlich der größte Nachteil beim Kauf eines fertigen Templates. Du kannst es nur in soweit individualisieren, wie es der Template Entwickler vorgibt. Spezifische Anforderungen sind in der Regel nicht gedeckt und es gibt nur standardmäßige Konfigurationsmöglichkeiten. Da ein Shopware Template von vielen anderen Nutzern gekauft werden kann, besteht zudem die Möglichkeit, dass dein Onlineshop visuell ähnlich aussieht wie andere Shops, die das gleiche Template verwenden. Begrenzte Updates und Weiterentwicklung: Shopware und andere Erweiterungen oder Plugins können sich im Laufe der Zeit weiterentwickeln und neue Funktionen oder Sicherheitsupdates einführen. Wenn der Template-Anbieter keine regelmäßigen Updates und Weiterentwicklungen anbietet, kann dein Template im Laufe der Zeit veraltet werden. Dies kann zu Sicherheitsrisiken führen und dir den Zugang zu neuen Funktionen oder Verbesserungen verwehren. Kosten: In der Regel erscheint ein gekauftes Theme erst einmal günstiger als die eigene Entwicklung. Jedoch fallen trotzdem Kosten an und je nach Professionalität und Funktionalität können die Preise für ein Template auch relativ hoch ausfallen. Auch solltest du beachten, dass für Anpassungen sowie Erweiterungen ebenfalls Kosten auf dich zukommen. Natürlich kannst du hier trotzdem günstiger wegkommen, dennoch solltest du den Punkt „Kosten“ nicht unterschätzen. Eingeschränkter Support: Obwohl viele Template-Anbieter Support anbieten, kann die Qualität und Reaktionsfähigkeit des Supports variieren. Dies haben wir zwar auch als Vorteil hervorgehoben, da es durchaus sein kann, dass du auf sehr engagierte Entwickler triffst, die sich deinen Problemen schnell annehmen, aber es besteht auch die Möglichkeit, dass du nicht immer eine sofortige Lösung oder Unterstützung bei Fragen oder Problemen erhältst. Dies kann zu Frustrationen führen, insbesondere wenn du dringende Unterstützung benötigst.

Vorteile und Nachteile für die Erstellung eines eigenen Themes

Erstellung eines eigenen Themes Vorteile	Erstellung eines eigenen Themes Nachteile
Spezifische Designanforderungen kannst du ohne Probleme mit deinem eigenen Theme abdecken. Ein einzigartiges Erscheinungsbild deines Webshops ist mit der eigenen Themeentwicklung auf jeden Fall gegeben! Flexibel anpassbar: Ein weiterer Vorteil bei der Erstellung des eigenen Shopware Templates ist nicht nur die erste Individualisierung, sondern auch die Möglichkeit, das Template jederzeit nach Belieben anpassen zu können. Auch neue Funktionalitäten kannst du ohne Weiteres einbauen. Unabhängigkeit: Wichtig zu betonen ist auch, dass du nicht abhängig von den Updates der Entwickler von gekauften Shopware Themes bist. Es kann sein, dass es Updates vom Shopsystem Shopware gibt, die auf die Themes übertragen werden müssen. Bei einem gekauften Template wärst du davon abhängig, dass die Entwickler dieses Template dieses Update auch zeitnah umsetzen. Wenn nicht, kann dies im schlimmsten Falle bedeuten, dass dein Onlineshop nicht richtig funktioniert oder überhaupt nicht erreichbar ist. Bei deinem selbst entwickelten Theme kannst du die Umsetzung selbst in die Hand nehmen. Hohe Skalierbarkeit: Wenn du selbst die Kontrolle über dein Shoptheme hast, kannst du es auch an die Wachstumsanforderungen deines Onlineshops anpassen. Du kannst die Architektur und den Code entsprechend gestalten, um eine hohe Skalierbarkeit zu gewährleisten. Dies ermöglicht es dir, deinen Onlineshop problemlos auszubauen und neue Funktionen hinzuzufügen, wenn dein Geschäft wächst. Optimierung der Performance: Darüber hinaus kannst du deinen Shop auch hoch performant ausrichten sowie alle Anforderungen für optimale Suchmaschinenoptimierung umsetzen. Du kannst dafür sorgen, dass dein Shop immer schnell lädt und in den Suchergebnissen gefunden wird.	Zeitaufwand: Ein eigenes Shopware Theme zu entwickeln, benötigt seine Zeit. Vor allem bis es so aussieht und die Funktionen hat, die du dir wünschst und zuvor ausgearbeitet hast. Ressourcen und Fachkenntnisse: Es ist natürlich eine Voraussetzung, dass du und dein Team die Ressourcen und Programmierkenntnisse besitzen, um ein eigenes Theme zu erstellen. Wenn du keine Erfahrung oder Kenntnisse in der Webentwicklung hast, kann es schwierig sein, ein funktionsfähiges und gut optimiertes Theme zu erstellen. Ansonsten hättest du aber auch noch die Möglichkeit, mit einer Shopware Agentur zusammenzuarbeiten, die sich auf die Themerstellung spezialisiert hat. Support bei Fehlern oder Problemen: Wenn du selbst verantwortlich für das Theme bist, dann musst du auch bei Fehlern oder Problemen deiner Kunden mit deinem Onlineshop direkt zur Stelle sein. Hierbei können nämlich immer unerwartet Fehler auftreten, für die du dann eine Lösung parat haben solltest. Arbeitest du mit einer Shopware Agentur zusammen, dann sieht es natürlich noch einmal anders aus. Dann kannst du dich bei Fehlern auch an die Entwickler der Agentur wenden, die dich sofort mit einem mehrköpfigen Team (bei Bedarf) unterstützen können.

Tipps für den Kauf eines Shopware Themes

Falls du überlegst, ein Shopware Theme zu kaufen, dann gibt es ein paar Dinge, die wichtig zu beachten sind. Damit du weißt, wie du das perfekte Shopware Template findest, haben wir diese Dinge für dich zusammengestellt.

Kompatibilität: Stelle sicher, dass das Theme mit der aktuellen Version von Shopware kompatibel ist. Ein veraltetes Theme kann zu Problemen führen und möglicherweise nicht alle Funktionen und Möglichkeiten der neueren Shopware-Version unterstützen.
Design und Anpassungsmöglichkeiten: Überprüfe, ob das Theme optisch ansprechend ist und deinen Anforderungen entspricht. Achte auch darauf, welche Anpassungsmöglichkeiten das Theme bietet, um das Design und die Funktionalität des Shops anzupassen.
Funktionalität: Überprüfe, ob das Theme alle notwendigen Funktionen bietet, um deine Produkte und Dienstleistungen angemessen darzustellen und den Kaufprozess für Kunden zu erleichtern.
Unterstützung und Dokumentation: Achte darauf, dass das Theme eine ausführliche Dokumentation und/oder Unterstützung durch den Entwickler bietet, falls du Hilfe bei der Einrichtung oder Anpassung benötigst.
Performance: Ein schnelles Laden der Seite ist wichtig für das Nutzererlebnis und auch für das Ranking in Suchmaschinen. Überprüfe, ob das Theme optimiert wurde, um eine hohe Ladezeit und -geschwindigkeit zu gewährleisten.
Bewertungen und Kundenfeedback: Überprüfe die Bewertungen und das Feedback anderer Kunden, um zu sehen, ob das Theme zuverlässig ist und den Erwartungen entspricht.
Lizenzbedingungen: Überprüfe die Lizenzbedingungen des Themes, um sicherzustellen, dass es legal und korrekt verwendet werden kann.

Indem du diese Faktoren berücksichtigst, kannst du sicherstellen, dass das von dir gewählte Shopware-Theme deinen Bedürfnissen entspricht und einen positiven Einfluss auf dein Geschäft hat.

Oder doch lieber selbst erstellen? Die Voraussetzungen für die Erstellung von deinem eigenen Theme

Bevor du dich um die Entwicklung eines eigenen Shopware Themes kümmerst, solltest du dir ein paar Aspekte vorab überlegen, damit dein eigenes Template auch ein Erfolg wird. Hier findest du alle wichtigen Ansätze für die Planung deines Templates.

Deine Markenidentität: Wenn du deinen Onlineshop designst, solltest du selbstverständlich darauf achten, dass es im Einklang mit deiner Marke steht. Verwende dieselben Farben, damit du einen Wiedererkennungswert schaffst.
Kreativität: Was gerade modern ist, solltest du natürlich nicht außer Acht lassen. Bestehende Trends gefallen einer großen Masse. Jedoch solltest du dabei auch überprüfen, ob Teile dieser Masse auch zu deiner Zielgruppe gehören. Zudem ist wichtig, dass du auch kreativ wirst, um die von deiner Konkurrenz abzuheben.
Deine Zielgruppe: Wie wir eben bereits angeschnitten haben, ist wichtig, dass dein Theme auf deine Zielgruppe zugeschnitten ist. Schließlich möchtest du später Conversions also Verkäufe in deinem Onlineshop generieren. Definiere deine Zielgruppe, um dein Shopware Template genau auf diese auszurichten.
Benutzerfreundlichkeit: Bei der Planung des Themes solltest du immer auf die Benutzerfreundlichkeit der Benutzeroberfläche achten. Verwende für Menüs bzw. Navigationen bekannte Designs bzw. setze sie an Orte, die intuitiv für den Nutzer sind. Es ist wichtig, dass deine Kunden nicht suchen müssen und sich schnell zurechtfinden. Bei deiner Kreativität solltest du dies unbedingt bedenken.
Responsivität: Dein Onlineshop wird nicht nur ausschließlich auf einem Gerät besucht. Gib also darauf acht, dass dein Shopware Shop mit deinem eigenen Theme auch auf jedem Endgerät funktioniert.

Das waren nur ein paar Aspekte, die du dir vor der Erstellung eines Themes überlegen und bei der Erstellung beachten solltest. Wenn du eher über die individuelle Shopware Theme Erstellung wissen möchtest, kannst du jederzeit auf uns zu kommen. Wir helfen dir sehr gerne dabei, dein eigenes Theme zu planen. Natürlich stehen wir dir auch tatkräftig bei der Umsetzung zur Seite.

Schritt-für-Schritt: So erstellst du dein eigenes Shopware Theme

Wir möchten dir nun einen groben Einblick geben, wie die Erstellung deines eigenen Shopware Templates funktioniert. Vorab sei gesagt, dass technische und gestalterische Fähigkeiten schon notwendig oder zumindest von Vorteil sind, wenn du das Template entwickelst. Die wichtigsten Kenntnisse haben wir dir weiter unten aufgeführt.

In ein paar Schritten zum Shopware Shoptheme:

Als erstes solltest du überprüfen, ob du alle notwendigen Programme und Werkzeuge hast, die du für die Shopware Theme Erstellung benötigst. Wenn nicht, solltest du diese noch installieren. Wichtig für die Entwicklung ist beispielsweise die Entwicklungsumgebung Visual Studio Code, das Shopware CLI-Tool und die aktuelle Shopware-Version.
Nun nutzt du das Shopware CLI-Tool, um so ein neues Shopware Theme zu erstellen. Gib einen Namen für dein Theme ein und wähle das Basis-Theme aus, auf dem du aufbauen möchtest. Du kannst entweder das Standard-Theme oder ein anderes Basis-Theme verwenden, das du für dein eigenes Theme anpassen möchtest.
Passe das Theme an: Jetzt kannst du beginnen, dein Theme anzupassen. Verwende CSS, Twig und JavaScript, um das Design und die Funktionalität deines Shops anzupassen. Du kannst auch neue Template-Dateien erstellen, um zusätzliche Funktionen hinzuzufügen oder das Aussehen deines Shops weiter anzupassen.
Füge das Theme zu deinem Shop hinzu: Wenn du mit der Erstellung deines Themes fertig bist, musst du es zu deinem Shop hinzufügen. Kopiere einfach den Theme-Ordner in das "themes"-Verzeichnis deines Shopware-Shops.
Aktiviere das Theme: Sobald das Theme zu deinem Shop hinzugefügt wurde, musst du es aktivieren. Gehe dazu in deinem Shopware-Backend zu "Einstellungen" > "Theme Manager" und wähle dein neues Theme aus der Liste der verfügbaren Themes aus.
Teste dein Theme: Jetzt solltest du dein Theme ausgiebig testen, um sicherzustellen, dass es korrekt funktioniert und auf allen Geräten und Browsern korrekt angezeigt wird.

Es ist auch wichtig zu beachten, dass Shopware bestimmte Anforderungen an die Themes hat, die in ihrem Shop verwendet werden dürfen. Du solltest sicherstellen, dass dein Theme diesen Anforderungen entspricht, damit es korrekt funktioniert und von Shopware akzeptiert wird.

Die Erstellung eines eigenen Shopware-Themes erfordert ein gewisses Maß an technischem Know-how, aber mit etwas Übung und Geduld kannst du ein ansprechendes und funktionales Theme erstellen, das perfekt zu deiner Marke und deinem Angebot passt.

Diese Kenntnisse sind bei der Shopware Theme Entwicklung von großem Vorteil

Ein Grundverständnis der Programmiersprachen HTML, JavaScript und CSS sowie der Shopware Template Engine, die für die Darstellung der Shopseiten in Shopware verwendet wird
Git ist ein nützliches Tool, wenn es um die Änderung des Codes geht. Mit einem allgemeinen Verständnis fällt die Verwaltung deutlich einfacher. So können alle Änderungen am Theme dokumentiert und nachverfolgt werden
Kreativität und Designfähigkeit sind auch eine Voraussetzung. Du solltest schon ein Auge für Design und Gestaltung haben, damit sich am Ende ein stimmiges Template für deinen Onlineshop ergibt. Du kannst dich natürlich auch an anderen Onlineshops orientieren, solange du nichts kopierst.
SEO-Kenntnisse sind ebenfalls von Vorteil, damit du wichtige Aspekte der Suchmaschinenoptimierung direkt bei der Themeerstellung beachten kannst und später gut in den Sucherergebnissen auffindbar bist.
Ein bisschen auskennen solltest du dich auch mit Shopware. Um das Potenzial des Shopssystems richtig auszuschöpfen, kann ein gutes Verständnis der Features hilfreich sein.

Unser Fazit

Wir hoffen, du konntest aufgrund dieses Beitrags einen guten Einblick in die Shopwaretheme-Welt erhalten und kannst nun alle Vor- und Nachteile des Kaufes oder der Entwicklung für dich persönlich abwägen. Die Entscheidung, ob du ein Shopware 6 Theme kaufen oder selbst erstellen solltest, hängt einfach von vielen Faktoren ab, die du individuell für dich und dein Unternehmen bewerten musst. Beide Optionen haben Vor- und Nachteile, die es zu berücksichtigen gilt. Wenn du als Shopbetreiber eine maßgeschneiderte Lösung für deinen Onlineshop möchtest und die volle Kontrolle über das Design und die Funktionen haben möchtest, ist die individuelle Entwicklung eines eigenen Themes die beste Wahl. Die Konfiguration eines eigenen Themes ermöglicht eine deutlich vielseitigere Anpassungsmöglichkeit und erlaubt es dir, genau auf deine Zielgruppe einzugehen. Allerdings erfordert die Entwicklung eines eigenen Themes auch mehr Zeit, Ressourcen und technische Fähigkeiten. Du musst bereit sein, dich mit der Shopware 6 Theme-Entwicklung vertraut zu machen und möglicherweise externe Unterstützung oder Entwicklerdienste in Anspruch zu nehmen. Dieser zusätzliche Aufwand kann sich jedoch lohnen, da du ein einzigartiges und auf deine Bedürfnisse zugeschnittenes Onlineshop-Erlebnis schaffen kannst. Gerne unterstützen wir dich beim Entwicklungsprozess deines eigenen individuellen Templates für deinen Shopware 6 Shop. Komme dazu gerne auf uns zu!

FAQ: Fragen und Antworten rund um die Shopware Themes

Schließlich möchten wir noch ein paar Fragen rund um die Shopware Template Entwicklung beantworten, um dir abschließend alle Informationen zu geben, die du rund um Shopware Themes benötigst. So kannst du am Ende entscheiden, ob du ein Template selbst entwickeln oder lieber eins kaufen möchtest. Sollten dann noch Fragen offen sein, kannst du dich natürlich jederzeit an uns wenden. Wir werden dir gerne weiterhelfen!

Was ist Twig?

Twig ist ein modernes Template-System, das in vielen Webanwendungen verwendet wird, einschließlich Shopware. Es ist eine schnelle und flexible Template-Engine, die es Entwicklern ermöglicht, schnell und einfach dynamische und komplexe Templates zu erstellen.

Twig bietet eine Vielzahl von Funktionen und Tools einschließlich einer einfachen Syntax, einer großen Auswahl an Template-Tags und -Filtern, einer benutzerdefinierten Erweiterbarkeit und einer klaren Trennung von Logik und Darstellung. Mit Twig können Entwickler Templates erstellen, die leicht zu lesen, zu warten und zu erweitern sind.
Wofür steht „SCSS“?

SCSS steht für "Sassy CSS" und ist eine erweiterte Syntax für CSS (Cascading Style Sheets). Es ist eine CSS-Präprozessor-Sprache, die eine Vielzahl von Funktionen bietet, die in reiner CSS nicht verfügbar sind. SCSS ermöglicht es Entwicklern, CSS-Dateien schneller und effizienter zu schreiben und zu organisieren.

In Shopware kann SCSS für die Erstellung von individuellen Shopware-Themes verwendet werden, um das Aussehen und die Darstellung von Shopware-Anwendungen anzupassen. Mit SCSS können Entwickler den CSS-Code effizienter schreiben und organisieren, indem sie Variablen, verschachtelte Regeln, Mixins und Vererbung verwenden. Dadurch wird es einfacher, wiederkehrende CSS-Regeln zu verwalten und anzupassen.

Ein weiterer Vorteil von SCSS in Shopware ist die Möglichkeit, mehrere CSS-Dateien in eine Datei zu importieren. Dies kann dazu beitragen, den Code besser zu organisieren und eine schnellere Ladezeit zu erreichen.
Werden Programmierkenntnisse für die Shopware Theme Erstellung benötigt?

Ja, Programmierkenntnisse sind für die Erstellung eines Shopware Themes erforderlich. Die Erstellung eines Themes erfordert in der Regel ein gewisses Maß an Programmierung, insbesondere in den Sprachen HTML, CSS und JavaScript. Ein grundlegendes Verständnis dieser Programmiersprachen ist unerlässlich, um die Template-Dateien zu bearbeiten und das Theme nach den eigenen Wünschen anzupassen. Auch wenn es mittlerweile viele Vorlagen und Plugins für Shopware gibt, ist ein gewisses Verständnis für die Programmierung hilfreich, um das Vorgehen beim Erstellen des Themes zu verstehen und sicherzustellen, dass Themes ordnungsgemäß funktionieren. Letztendlich wird es schwer sein, ein individuelles und gut funktionierendes Theme ohne Kenntnisse in Programmierung zu erstellen.
Wie kann man Stylesheets auf Grundlage von SCSS in Shopware 6 als Theme verwenden?

Um Stylesheets auf Basis von SCSS in einem Shopware 6 Theme zu verwenden, kannst du die folgenden Schritte befolgen:

1. Erstelle ein neues Shopware 6 Theme oder öffne das bestehende Theme, das du verwenden möchtest.

2.Navigiere zum Verzeichnis des Themes. Standardmäßig befindet sich das Theme-Verzeichnis unter themes/Frontend/DeinThemeName/.

3. Erstelle im Theme-Verzeichnis einen Ordner namens src (falls er noch nicht vorhanden ist) und darin einen weiteren Ordner namens scss.

4. Innerhalb des scss-Ordners kannst du deine SCSS-Dateien erstellen oder importieren. Du kannst eine oder mehrere SCSS-Dateien erstellen, um deine Styles zu organisieren.

5. Um die SCSS-Dateien in CSS umzuwandeln, musst du sicherstellen, dass du einen SCSS-Compiler verwendest. Dazu kannst du beispielsweise Node.js und den SCSS-Compiler wie Sass oder node-sass verwenden. Installiere die erforderlichen Pakete gemäß den jeweiligen Anweisungen.

6. Erstelle eine Eingangs-SCSS-Datei, zum Beispiel main.scss, und importiere alle anderen SCSS-Dateien, die du erstellt hast, sowie eventuell externe Bibliotheken oder Stile.

7. Führe den SCSS-Compiler aus, um die SCSS-Dateien in CSS umzuwandeln. Dieser Schritt variiert je nachdem, welchen SCSS-Compiler du verwendest. Eine häufige Methode besteht darin, den Compiler über die Befehlszeile oder ein Build-Tool wie Webpack oder Gulp aufzurufen.

8. Sobald der SCSS-Compiler die SCSS-Dateien in CSS umgewandelt hat, erhältst du eine CSS-Datei (z. B. main.css).

9. Kopiere die generierte CSS-Datei in das public-Verzeichnis deines Themes. Dieses Verzeichnis befindet sich normalerweise unter public/theme/DeinThemeName/. Stelle sicher, dass die Datei innerhalb eines entsprechenden Unterordners wie css oder assets abgelegt wird.

10. Verlinke die CSS-Datei in deinem Shopware 6 Theme. Dazu kannst du das style-Tag in den entsprechenden Template-Dateien verwenden oder die CSS-Datei über das Asset-Management-System von Shopware einbinden.

Nachdem du diese Schritte befolgt hast, werden die Stylesheets auf Basis von SCSS in deinem Shopware 6 Theme verwendet. Du kannst nun die SCSS-Dateien bearbeiten und bei Bedarf den SCSS-Compiler erneut ausführen, um die Änderungen in das CSS-Format umzuwandeln und im Frontend anzuzeigen.

Was ist dein Projekt? Wenn du uns darüber erzählen möchtest, rufen wir dich zurück!

Meike

vom 30.05.2023

Hallo, mein Name ist Meike. Ich betreue das EXWE Backoffice und bin für unsere Social-Media Kanäle zuständig. All unsere Artikel sollen dir das Leben erleichtern und eine Entscheidungshilfe sein. Trotzdem kann es mal vorkommen, dass etwas unklar bleibt, daher: Wenn du Fragen zu diesem Artikel hast erreichst du mich ganz einfach unter +49 231 93149827

Du möchtest immer am Zenit der Technik bleiben? Keine News und Blogbeiträge mehr verpassen.

Alle News anzeigen (96) Newsletter abonnieren

Zu diesem Thema haben wir außerdem noch folgende interessante Beiträge aus unserem Tech-Blog für dich

10 B2B Onlineshop-Systeme im Vergleich - der Shopguide

Du bist im B2B-Geschäft tätig und möchtest einen Onlineshop eröffnen? Hier findest du alle Infos, wie du einen Shop eröffnest und welche Shopsysteme zur Auswahl stehen.

09.02.23 in E-Commerce Jetzt weiter lesen

Das Shopware Glossar: Fachbegriffe und Erklärungen zu deinem Onlineshop mit Shopware

Das große EXWE Shopware Glossar: Finde alle wichtigen Begriffe rund um das Thema Shopware kurz und knackig von den Experten für Onlineshop Erstellung erklärt.

03.04.23 in E-Commerce Jetzt weiter lesen

Shopware 6 vs. Magento 2 (Adobe Commerce) - der Shopsystem-Vergleich

Erfahre alles über Funktionen, Benutzerfreundlichkeit und mehr in dem großen Shopsystem-Vergleich zwischen Shopware 6 und Magento 2 (Adobe Commerce)

27.04.23 in E-Commerce Jetzt weiter lesen