PrestaShop - Podstawowe zmiany motywu

Chociaż domyślny podstawowy motyw PrestaSklep Jest całkiem funkcjonalny, sklep nie może w ten sposób wejść do sieci, po pierwsze dlatego, że ryzykujemy, że inny sklep wygląda dokładnie tak samo, a po drugie dlatego, że być może podstawowy motyw zawiera rzeczy, których nie potrzebujemy lub są ułożone w sposób niezgodny do naszego sklepu.
Z tego powodu personalizacja jest sposobem, w jaki zawsze podążamy, umieszczając nowy motyw lub zmieniając istniejący, tak aby układ elementów i kolorystyka mogła być inna.
Pierwsze zmiany
Zaczniemy wprowadzać proste, ale bardzo skuteczne zmiany, które sprawią, że motyw będzie wyglądał zupełnie inaczej niż domyślnie, w tym celu wykonamy następujące kroki:

• Zamierzamy zmienić logo, robimy to od administratora zaplecze biurowe, w tym celu prześlemy obraz w sekcji: Preferencje -> Wygląd zewnętrzny.
• Następnie musimy iść do Zaplecze -> Moduły -> Narzędzia -> Redaktor domowy.
• Wymieniliśmy centralne logo podczas konfiguracji modułu.

Po tym starcie zamierzamy teraz zmienić niektóre elementy pozycji, aby uzyskać większy efekt dostosowywania:

• Zmieniamy położenie klocka Kategoria: w lewej kolumnie.
• Wyłączamy produkty specjalne.
• Zmieniamy informacje w kategoriach.

Spójrzmy na poniższy zrzut ekranu, abyśmy mogli sprawdzić wprowadzone przez nas zmiany, zauważymy, że niektóre rzeczy zostały przesunięte z prawej strony na lewą, a innych kolumn już nie ma, a zatem inne uniosły się na pozycji:

Teraz domyślny motyw wygląda zupełnie inaczej, jeśli nadal nie uzyskamy dobrego wyniku, nie martw się, ponieważ jest to coś nowego i jako takie musimy trochę poćwiczyć, zanim zostaniemy ekspertami w tej dziedzinie.
Zmiana CSS
Kolejną bardzo skuteczną zmianą jest modyfikacja plików CSS za pomocą którego możemy zmienić np. kolor tła sklepu.
Na potrzeby tego przykładu użyjemy Firefox i narzędzia programistyczne lub jeśli wolisz ognik.
Aby aktywować edycję CSS za pomocą narzędzi programistycznych po prostu klikamy prawym przyciskiem myszy na sklep i wybieramy opcję Sprawdź element, następnie w menu, które się pojawi, wybierzemy edytor stylów.
Teraz, jeśli używamy ognik, po prostu mówimy inspekcja elementu za pomocą firebuga, a następnie przechodzimy do zakładki CSS.
W oknie, które się pojawiło i raz w sekcji CSS zlokalizujemy plik global.css i postaramy się zmienić kod z kolor tła.

 body {kolor-tła: [b] niebieski [/ b]; rozmiar czcionki: 11px; rodzina czcionek: Verdana, Arial, Helvetica, Sans-Serif; kolor: # 5d717e; wyrównanie tekstu: do środka} 

Dzięki tym narzędziom zmiana dokonywana jest w czasie rzeczywistym i mamy możliwość jej wizualizacji, dzięki czemu zobaczymy nasze postępy w danym momencie:

Jak widać, niebieskie tło to bardzo drastyczna zmiana, ale efektowna, oczywiście nie wygląda zbyt dobrze, ponieważ litery i inne elementy muszą być dopasowane, jednak widzimy ważną rzecz i jest to, że prosty kolor może sprawić różnica.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt