Zmiana kolorystyki standardowego szablonu sklepu internetowego

Zmiana kolorystyki standardowego szablonu sklepu internetowego to doskonały sposób na nadanie Twojemu sklepowi internetowemu unikalnego charakteru i dostosowanie go do własnej marki. Proces ten jest bardzo prosty i nie wymaga zaawansowanej wiedzy programistycznej, dzięki czemu każdy właściciel sklepu shopGold może łatwo dostosować wygląd swojego sklepu online.

Zmiana głównego koloru szablonu jest możliwa i bardzo prosta do przeprowadzania w przypadku standardowego szablonu oznaczonego jako V2. Domyślna kolorystyka tego szablonu to kolor czarny oraz kolor czerwony o kodzie #e10101 (każdy kolor wyświetlany na stronach internetowych można zapisać w formie takiego ciągu znaków). Często klienci korzystający ze standardowego szablonu pytają, w jaki sposób można zmienić główny kolor szablonu. Nie wymaga to modyfikacji żadnych plików w szablonie. Zmian można dokonać bezpośrednio w panelu zarządzania sklepu i wprowadzone zmiany nie będą miały wpływu na późniejsze aktualizacje sklepu.
 
Poniżej przedstawiamy krótki opis tego, jak przeprowadzić taką zmianę kolorystyczną.
 

Wybór koloru przewodniego szablonu

Pierwszym krokiem jest wybór koloru przewodniego, który najlepiej odzwierciedli charakter Twojego sklepu. Możesz wyszukać interesujący Cię kolor w internecie lub wybrać się w stronę kolor związany z Twoim logo. Kolor musi być zapisany w postaci kodu koloru w formie szesnastkowej. Zapis koloru w postaci #xxxxxx jest powszechnie używany w projektowaniu stron internetowych i grafice komputerowej. Składa się on z sześciu znaków, gdzie pierwsze dwa oznaczają intensywność koloru czerwonego (R), kolejne dwa zielonego (G), a ostatnie dwa niebieskiego (B). W internecie znajduje się bardzo wiele stron, gdzie można wyszukać kolory w takiej właśnie postaci.

Dla przykładu podamy przykład zmiany koloru z czerwonego (#e10101) na kolor zielony (#2f9d2f).
 

Zaloguj się do panelu administracyjnego

Zmiany kolorystyki szablonu można dokonać poprzez panel administracyjny sklepu. Nie ma konieczności modyfikacji plików szablonu czy łączenia się z serwerem w celu zmian kodu sklepu. Wszystko wykonuje się z poziomu panelu zarządzania sklepu. Zaloguj się do panelu, korzystając z odpowiednich danych dostępowych.
 

Przejście do ustawień wyglądu

W panelu administracyjnym przejdź do menu Wygląd / Ustawienia wyglądu i następnie do zakładki Dodatkowy kod CSS. W tym miejscu będzie można wstawić zmieniony kod kolorów.
 

Modyfikacja kolorów

Żeby zmienić kolor przewodni szablonu w oknie "Dodatkowy kod CSS wyglądu" trzeba wstawić następujący kod:

:root {
--filtr-szablonu:invert(44%) sepia(72%) saturate(547%) hue-rotate(71deg) brightness(97%) contrast(84%);
--kolor-szablonu:#2f9d2f;
--gwiazdka-tlo:#2f9d2f;
--kolor-tlo-naglowek-box-kategorie:#2f9d2f;
--kolor-czcionki-odliczania-pozostalo:#2f9d2f;
}

W podanych powyżej miejscach zostanie zamieniony domyślny kolor #e10101 na kolor #2f9d2f. Oprócz zmiany przewodniego kodu koloru trzeba zmienić dodatkowo kod koloru zawarty w pozycji --filtr-szablonu. Jest to kod używany do zmiany kolorystki np. grafik. W tym miejscu nie podaje się kodu koloru. Trzeba zamienić kod koloru na opcje stosowane w filtrach CSS. Do takiej zmiany służy wiele stron dostępnych online. Nie podamy tutaj konkretnych przykładów - ale wystarczy w Google wpisać "css generator filter" i zostanie wyświetlone wiele wyników do konwersji kodu koloru na kody filtrów.

Jeżeli chcesz zmienić kolor na inny niż podany w przykładzie, wystarczy zmienić wartość #2f9d2f na inny wybrany przez Ciebie kolor oraz kod w pozycji --filtr-szablonu. Poprzez tą prostą zmianę można dowolnie zmienić kolorystykę.
 

Podgląd zmian

Po wprowadzeniu danych - kod zostanie automatycznie zapisany. Żeby sprawdzić wynik, wystarczy przejść na stronę sklepu i  sprawdzić jak wygląda nowa kolorystyka. Jeżeli nie widzisz zmian kolorów to albo został wprowadzony niepoprawny kod, albo trzeba odświeżyć historię przeglądarki - żeby wczytała nowe ustawienia wyglądu.