Shopware 6: Design mit SCSS Stylesheets anpassen | Grundlagen, Praxisbeispiele | #3 - Theme Tutorial

In dieser Video-Reihe zeige ich dir, wie du in Shopware 6 dein eigenes Theme erstellen und anpassen kannst.

Im heutigen Video schauen wir uns Template-Anpassungen mit Twig im Detail an. Im heutigen Video zeige ich dir, wie du das Design bzw. die Gestaltung deines Onlineshops in Shopware 6 mithilfe von Stylesheets anpassen kannst. Dabei sprechen wir über die Grundlagen von SCSS und ich zeige dir außerdem anhand von zwei praktischen Beispielen, wie das ganze bei Shopware 6 funktioniert.

Im Folgenden findest du noch einige relevante Ressourcen.


Weiterführende Links

► SCSS Dokumentation: https://sass-lang.com/documentation/
► GitHub - Shopware Storefront: https://github.com/shopware/storefront
► Bootstrap: https://getbootstrap.com/


Relevante Inhalte

► Signature Theme für Shopware 6: https://store.shopware.com/orang44949...
► Orangebytes im Shopware-Store: https://store.shopware.com/orangebyte...

► Web: https://www.orangebytes.de/shopware
► Facebook:   / orangebytes.de  
► Instagram:   / orangebytes.de  


Diese Marketing-Tools empfehlen wir

E-Mail-Marketing - Cleverreach: https://tinyurl.com/346betnw
SEO - Xovi: https://tinyurl.com/mrxyb6yr

Bei den Verweisen handelt es sich um Partner-Links. Es entstehen für keine zusätzlichen Kosten. Die Empfehlungen sprechen wir aus, weil wir die genannten Tools in unseren selbst nutzen und von deren Wert überzeugt sind.


Inhaltsverzeichnis

00:00 Intro
00:39 Was ist SCSS?
02:03 SCSS im Plugin-Ordner
02:43 Beispiel 1: Promotion Header anpassen (1/2)
04:39 Struktur SCSS-Ornder
05:51 Beispiel 1: Promotion Header anpassen (2/2)
11:51 SCSS Features und Syntax im Überblick
18:24 Beispiel 2: Schattierung Produkt-Box mit Hover