+49.(0)2203.5651122 info@great2gether.com
  • Facebook
  • X
  • Instagram
  • RSS
  • Facebook
  • X
  • Instagram
  • RSS
Shopware Agentur | Great2Gether
  • Über Uns
  • Leistungen
  • Referenzen
  • Plugins
  • Blog
  • Kontakt
Seite wählen

Shopware 6 Logo anpassen mit SCSS

von Tao | Feb. 1, 2024 | Alle, Shopware, Shopware 6, Shopware Design | 0 Kommentare

Wie man ein Logo in Shopware 6 anpasst, mit SCSS geht ganz einfach in 5 Schritten.

Übersicht:

  • 1. Theme anlegen
  • 2. Erstellen/Importieren der SCSS-Datei
  • 3. Logo Selektor
  • 4. Anpassen des Logos
  • 5. Kompilieren und Cache leeren

1. Theme anlegen

Zuerst legen wir ein Theme an oder bearbeiten ein vorhandenes Theme.
Wenn wir nun ein Theme angelegt/ausgewählt und ein Logo hochgeladen haben, gehen wir in unseren Code-Editor und suchen nach unserem Theme.
Dies sollte sich normalerweise im Verzeichnis ‚custom/Plugins‘ befinden.

Falls Sie unsicher sind, wie Sie Ihr Shopware 6 Logo ändern können, finden Sie eine hilfreiche Anleitung hier.

Shopware 6 Logo anpassen mit SCSS

2. Erstellen/Importieren der SCSS-Datei

Falls Sie bereits eine vorhandene SCSS-Datei für das Styling des Logos haben, öffnen Sie diese.
Falls nicht, erstellen Sie eine SCSS-Datei, beispielsweise mit dem Namen „Test.scss“.
Wichtig dabei ist, dass Sie beim Erstellen darauf achten, die neu erstellte SCSS-Datei (in unserem Fall die „Test.scss“) in der „base.scss“-Datei zu importieren.

Shopware 6 Logo anpassen mit SCSS

3. Logo Selektor

Suchen Sie jetzt nach dem Selektor, der Ihr Logo definiert. Öffnen Sie dazu Ihre Webseite, auf der sich das Logo befindet und klicken Sie mit der rechten Maustaste auf das Logo, um das Kontextmenü zu öffnen, um auf Untersuchen zu klicken. Der HTML-Code mit dem Link zum Bild des Logos sollte nun angezeigt werden. In der Regel steht eine Zeile über dem Link der Selektor für Ihr Logo (in unserem Fall „header-logo-picture“).

Shopware 6 Logo anpassen mit SCSS

Es gibt auch andere Möglichkeiten, den Selektor für das Logo herauszufinden, falls diese Methode nicht funktioniert, und der Selektor muss nicht unbedingt „header-logo-picture“ sein.

4. Anpassen des Logos

Nachdem Sie den Selektor gefunden haben, wechseln Sie zu Ihrer SCSS-Datei, die für das Stylen des Logos erforderlich ist (In unseren Fall die Test.scss Datei). Nun können Sie Ihr Logo nach Belieben anpassen.

Code Beispiele:

Shopware 6 Logo anpassen mit SCSS

5. Kompilieren und Cache leeren

Um Ihr Theme zu kompilieren, geben Sie einfach den Befehl „bin/console theme:compile“ in Ihrer Konsole ein.
Um den Cache zu leeren, verwenden Sie den Befehl „bin/console cache:clear“.
Alternativ können Sie den Cache über die Shopware-Administrationsoberfläche leeren, indem Sie zu „Einstellungen“ → „System“ → „Caches & Indizes“ navigieren und auf „Cache leeren“ klicken.

Shopware 6 Logo anpassen mit SCSS

Zum Schluss laden Sie Ihre Seite neu und schon haben Sie Ihr individuell angepasstes Logo fertig :D.

  • twittern 
  • teilen 
  • teilen 
  • teilen 
  • RSS-feed 
  • merken 
  • mitteilen 
  • teilen 

Kommentar absenden Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

zwei × 2 =

Kategorien

  • Alle
  • Shopware
  • Shopware 4
  • Shopware 5
  • Shopware 6
  • Shopware Conversion Optimierung
  • Shopware Design
  • Shopware Einstellungen
  • Shopware Entwicklung
  • Shopware Monitoring & Analyse
  • Shopware Pagespeed
  • Shopware Plugins
  • Shopware SEO
  • Unsere Partner

KONTAKT

Anregungen? Fragen? Anfragen? - Hier entlang

Footer Kontakt-Formular

„*“ zeigt erforderliche Felder an

Name
Wir verarbeiten Deine Daten immer streng nach DSGVO und auf Basis der bestehenden sowie zukünftigen Geschäftsbeziehungen zwischen Ihnen und uns. Mehr dazu erfährst Du in unseren Datenschutzbestimmungen.
Dieses Feld dient zur Validierung und sollte nicht verändert werden.


Kontakt Informationen

Mail:         info@great2gether.com
Tel.:         +49.(0)2203.5651122
Mobil:      +49.(0)177.7899050


Anschrift

Name:     Atilla Boz
Straße:    In der Adelenhütte 8
Ort:           51143 Köln
Termin buchen

Shopware Agentur

  • Über Uns
  • Leistungen
  • Partner
  • Blog
  • Plugins

Kontakt & Infos

  • Kontakt
  • Impressum
  • Datenschutz
  • AGB

Aktuelle Beiträge

  • Shopware 6 Debugging – Fehler beheben in Shopware
  • Shopware Verkaufskanal löschen, aber richtig.
  • Shopware mit MySQL: Best Practice
  • Facebook
  • X
  • Instagram
  • RSS

great2gether © 2025 | Shopware Agentur

great2gether 48 Bewertungen auf ProvenExpert.com