Shop zusammenstellen tricoma AG
Anleitungen Shopware 5
Anleitungen zu Shopware 5

Hier erfahren Sie alles zu Shopware 5

/modul.php?modul=tutorial&modulkat=bilder&ID=9&name=tut

Logo und Haupt-Farbe im Responsive Template anpassen

Inhaltsverzeichnis
  1. Logo ändern

  2. Die Hauptfarbe ändern

  3. Die Änderungen überprüfen

1. Logo ändern

Ändern wir als Erstes das Logo Schritt für Schritt:
  • Als Erstes gehen Sie über den Reiter "Einstellungen" in den "Theme Manager"

  • Klicken Sie dann mit der linken Maustaste auf das Template, welches Sie bearbeiten wollen

  • In unserem Fall nehmen wir das "Responsive Template", welches von Shopware 5 zur Verfügung gestellt wird

  • Rechts erscheint jetzt, wo zuvor noch"Kein Eintrag selektiert" stand das Bild des Templates welches Sie ausgewählt haben.

  • Darunter steht zudem eine kleine Beschreibung zum jeweiligen Template

  • Weiter unten sehen Sie drei Buttons. Klicken Sie auf den Button mit der Aufschrift "Theme Konfigurieren"

  • Nun öffnet sich ein weiteres Fenster und Sie befinden sich automatisch im Reiter "Icons & Logos". Genau dort müssen Sie auch hin

  • Unter dem Reiter "Icons & Logos" sehen sie nun die Gruppierung "Logos"

  • In dieser Gruppierung finden Sie alle Geräte Kategorien [ Smartphone, Tablet, Tablet Landscape, Desktop]

  • Um nun Ihrem Shop ein Logo zuzuweisen, müssen Sie bei jeder Geräte Kategorie auf den Button "Medium selektieren" klicken

  • Ein weiteres Dialogfenster geht auf, Sie können nun entweder ein bereits vorhandenes Bild anklicken und auf "Auswahl übernehmen" klicken, oder Sie laden eines hoch

  • Um ein Logo hochzuladen und dies nicht für jede Geräte Kategorie erneut tun zu müssen, wird Ihr Bild automatisch in dem Ordner "Unsortiert" links in der Baumstruktur gespeichert

  • Klicken Sie nun auf den Button "Eigene Medien" hinzufügen

  • oder ziehen Sie das gewünschte Bild auf die Schaltfläche "Hier Dateien per Drag+Drop Hochladen"

  • Haben Sie dies erledigt, klicken Sie nun auf das von Ihnen gewünschte Bild und drücken Sie auf "Auswahl übernehmen"

  • Wiederholen Sie den Vorgang für alle anderen Geräte Kategorien.

  • Vergessen Sie nicht, dass das von ihnen eben hochgeladene Bild im Ordner "Unsortiert" zu finden ist

  • Haben Sie diesen Vorgang für alle Geräte Kategorien wiederholt, drücken Sie jetzt auf "Speichern"

Glückwunsch, Sie haben nun Ihr Logo erfoglreich geändert!


Bild - Logo ändern

2. Die Hauptfarbe ändern

Ändern wir nun die Hauptfarbe für das Template wieder Schritt für Schritt:

  • Dazu führen Sie alle vorherigen Schritte bis zum Fenster aus, in dem Sie die Gruppierung für die einzelnen Geräte Kategorien fanden

  • Sind Sie soweit, wählen Sie nun den Reiter "Farb-Konfiguration" aus

  • Sie befinden sich jetzt automatisch im Reiter "Allgemein. Und genau in diesen müssen Sie auch

  • Gehen Sie nun in die Gruppierung "Basiskonfiguration"

  • Wir wollen in diesem Tutorial die Hauptfarbe bzw. die primäre Farbe des Templates ändern

  • Hauptfarbe ist übersetzt ins Englische => primary color.

  • Also suchen Sie nach etwas, was das Wort primary beinhaltet

  • Es gibt zwar keine Einstellungsmöglichkeit für primary color, aber mit etwas überlegen findet man es heraus

  • Die Hauptfarbe eines Shops oder einer Webseite entspricht in der Regel dem Corporate Design, also der Marke, Logo und Farbe des Unternehmens

  • Übersetzt ins Englische ist Marke das Wort "brand"

  • Also suchen Sie nach @brand-primary

  • Color steht nicht dabei, weil Sie sich ja bereits im Reiter Farb-Konfiguration befinden

  • Geben Sie nun den Hashwert (z. B. #015fbd) in das Textfeld daneben ein.

  • Die zu diesem Hashwert gehörende Farbe, wird jetzt in dem kleinen Kästchen daneben angezeigt

  • Sie haben auch die Möglichkeit eine Farbe über die Farbauswahl einzustellen

  • Dafür klicken Sie auf das Kästchen mit dem Farbfächer daneben

  • Drücken Sie auf Übernehmen und der generierte Hashwert wird automatisch in das Textfeld eingetragen

  • Sind Sie mit Ihrer Auswahl zufrieden, drücken Sie auf "den Button Speichern"

Glückwunsch, Sie haben nun die Hauptfarbe  bzw. brand-primary des Templates geändert!


Bild - Hauptfarbe ändern

3. Die Änderung überprüfen

Nun wollen wir überprüfen, ob unsere Änderungen auch erfolgreich übernommen wurden

  • Löschen Sie nun den Shop Cache über den Reiter Einstellungen

  • Wollen Sie die Änderung in Ihrem Shop betrachten, klicken Sie nun auf den Button über dem eben benutzten Button "Theme Konfigurieren"

  • Ein neuer Tab in Ihrem Browser öffnet sich und Sie können die Änderung sehen

Wenn alles Ihren Vorstellungen entspricht,

Herzlichen Glückwunsch zum Abschluss dieses Tutorials! 

Sie können nun:

  1. Das Logo Ihres Shops ändern

  2. Die Hauptfarbe (brand-primary) Ihrem Coroprate Design anpassen

Sven Büttner
Sven Büttner
Link für externe Aufrufe: https://tricoma.de/modul.php?modul=tricoma&modulkat=tutlink&ID=9
© 2020 tricoma solutions