PrestaShop - Grundlegende Theme-Änderungen

Obwohl das Standard-Grundthema von PrestaShop Es ist recht funktional, ein Shop kann so nicht online gehen, erstens weil wir Gefahr laufen, dass ein anderer Shop genauso aussieht und zweitens, weil vielleicht das Grundthema Dinge enthält, die wir nicht brauchen oder nicht konform angeordnet sind zu unserem Laden.
Aus diesem Grund ist die Personalisierung der Weg, den wir immer verfolgen, indem wir entweder ein neues Thema platzieren oder das vorhandene ändern, sodass die Anordnung der Elemente und die Farben unterschiedlich sein können.
Erste Änderungen
Wir werden beginnen, einfache, aber sehr effektive Änderungen vorzunehmen, die das Design völlig anders aussehen lassen, als es standardmäßig ist. Dazu werden wir die folgenden Schritte ausführen:

• Wir werden das Logo ändern, wir tun dies vom Administrator der Backoffice, dafür werden wir das Bild im Abschnitt hochladen: Einstellungen -> Das Auftreten.
• Dann müssen wir zu Backoffice -> Module -> Werkzeuge -> Home-Editor.
• Das zentrale Logo haben wir bei der Konfiguration des Moduls ersetzt.

Nach diesem Start werden wir nun einige Positionselemente ändern, um einen größeren Anpassungseffekt zu erzielen:

• Wir ändern die Position des Blocks Kategorie: in der linken Spalte.
• Wir deaktivieren spezielle Produkte.
• Wir ändern die Informationen in Kategorien.

Sehen wir uns den folgenden Screenshot an, damit wir die von uns vorgenommenen Änderungen untersuchen können. Wir werden feststellen, dass einige Dinge von rechts nach links verschoben wurden und dass andere Spalten nicht mehr vorhanden sind und daher andere in Position gestiegen sind:

Jetzt sieht das Standardthema ganz anders aus. Wenn wir immer noch kein gutes Ergebnis erzielen, machen Sie sich keine Sorgen, da es etwas Neues ist und wir als solches ein wenig üben müssen, bevor wir Experten auf diesem Gebiet werden.
CSS ändern
Eine weitere sehr effektive Änderung ist die Änderung der Dateien CSS mit denen wir beispielsweise die Hintergrundfarbe des Shops ändern können.
Für dieses Beispiel verwenden wir Feuerfuchs und Ihre Entwicklertools oder wenn Sie es vorziehen Feuerwanze.
Um die Bearbeitung der zu aktivieren CSS Mit den Entwicklertools klicken wir einfach mit der rechten Maustaste auf den Store und wählen die Option Element prüfen, dann wählen wir im erscheinenden Menü Stileditor.
Wenn wir jetzt verwenden Feuerwanze, sagen wir einfach Element mit Firebug inspizieren und gehen dann zum CSS-Tab.
In dem erscheinenden Fenster und einmal im CSS-Abschnitt werden wir die Datei lokalisieren global.css und wir werden versuchen, den Code von zu ändern Hintergrundfarbe.

 Körper {Hintergrundfarbe: [b] blau [/ b]; Schriftgröße: 11px; Schriftfamilie: Verdana, Arial, Helvetica, Sans-Serif; Farbe: # 5d717e; Textausrichtung: Mitte} 

Dank dieser Tools erfolgt die Änderung in Echtzeit und wir haben die Möglichkeit, sie zu visualisieren, damit wir unsere Fortschritte sofort sehen können:

Wie wir sehen, ist der blaue Hintergrund eine sehr drastische Änderung, aber effektiv, sieht natürlich nicht sehr gut aus, da die Buchstaben und andere Elemente angepasst werden müssen, aber wir sehen das Wichtigste und es ist, dass eine einfache Farbe ein Unterschied.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben