Kolorystyka szablonu Topaz

Spis treści

Wstęp

Wybierz motyw

Ogólne

Nagłówek

Newsletter

Stopka

Przyciski

Towar

Wstęp

W tym artykule dowiesz się w jaki sposób dostosować kolorystykę szablonu Topaz, a także które parametry odpowiadają za poszczególne elementy na stronie.

Wskazówka
Pamiętaj, aby wprowadzone zmiany były widoczne w e-Sklepie należy je Zapisać i Opublikować.

Wybierz motyw

W tym miejscu możesz wybrać ogólny motyw kolorystyczny swojego szablonu. Po wybraniu motywu poszczególne parametry kolorystyczne zostaną dopasowane do wybranego przez Ciebie motywu.
Możesz wybrać jeden z pięciu motywów:

  • Domyślny – z głównymi kolorami: czarny, pomarańczowy, biały
  • Bordowy – z głównymi kolorami: bordowy, biały, malinowy,
  • Beżowy – z głównymi kolorami: czarny, beżowy, kremowy,
  • Granatowy – z głównymi kolorami: granatowy, czerwony, biały,
  • Błękitny –  z głównymi kolorami: błękitny, pomarańczowy, fioletowy.

Ogólne

Ogólne ustawienia motywu kolorystycznego

Konfiguracja
  1. Kolor główny motywu
    Odpowiada między innymi za kolory w zakresie:
    Strony głównej – kolor podkreślenia po najechaniu na opcję w menu kategorii, strzałki podkategorii, kolor ikonki koszyka (gdy towar jest w koszyku), wartość koszyka, odnośniki do stron w sklepie np. „Zaloguj się”, „Regulamin” lub „Nie masz konta? Zarejestruj się”
    Listy towarów – przycisk rozwinięcia filtrów, ostatni element breadcrumbs, suwak z zakresem ceny, strzałka przy rodzaju sortowania
    Szczegółów towaru – koszt dostawy (od 15 zł), slider w galerii zdjęć, kolor gwiazdek podczas dodawania opinii, Koszyka – aktywny krok w koszyku
  2. Podstawowy kolor tekstu
    Odpowiada między innymi za kolory tekstu w zakresie:
    Strony głównej – newslettera, linków w komunikatach (np. polityka prywatności), zakładki w nagłówku (kategorie, strony, lookbook, kontakt), nagłówek obszaru ‘towary polecane’
    Listy towarów – filtrów i kategorii, sortowania, wybrane sortowanie, licznik stron (paginacja), opcja układu listy towarów (lista/kafelki)
    Szczegółów towaru – etykieta marki i producenta z wartościami, przycisk do zwiększania/ zmniejszania ilości towaru dodawanego do koszyka, zakładki cechy towaru, opinie, pliki, itp., tekst informujący o obowiązkowym do uzupełnienia polu, tekst opinii, nick osoby wystawiającej opinię
    Koszyka – nagłówek dodania do koszyka, tekst chceckboxu pod formularzami, tekst kroków koszyka  przez które przeszedł użytkownik, przycisk usuwania towaru, treść zgód w koszyku
    Inne – linia kończąca obszar strony z treścią regulaminu, polityki  prywatności, itp., nagłówek zaloguj się / zarejestruj się, przypomnienie hasła
  3. Drugorzędny kolor tekstu
    Odpowiada między innymi za kolory tekstu w zakresie:
    Strony głównej – pierwszy i kolejny poziom kategorii, obszar wyszukiwania, ikony nagłówka i tekst, zgody na newsletterze
    Szczegółów towaru – atrybuty (etykiety + wartości) w sekcji z cechami towaru, tekst pod zdjęciem, dostępność, stan magazynowy
    Koszyka – nieaktywne kroki  w koszyku, etykiety ceny netto, brutto, podatek vat, czas dostawy podawany przy sposobach dostawy
    Inne – tekst na stronie kontakt
  4. Kolor tła
    Tło na wszystkich stronach, komunikatach, z wyłączeniem, nagłówka, stopki, bannerów, newslettera, obszaru breadcrumbs oraz obszaru z krokami w koszyku
  5. Linie oddzielające sekcje
    Podstawowe podkreślenie pól w formularzu, w menu kategorii, w sekcji ‘towary polecane’, kolor niezaznaczonych checkboxów, licznik opinii, towary podobne, zestawy
  6. Strzałki list rozwijanych
    Odpowiada między innymi za kolory w zakresie:
    Strony głównej – strzałki przy menu kategorii oraz napis „Kategorie” w momencie rozwinięcia listy, strzałka przy menu stron, ikonki poczty e-mail i globus w nagłówku
    Listy towarów     – strzałka przy opcji „pokaż filtry” oraz „sortuj”
  7. Strzałki sterowania sliderów
    Dotyczy sliderów: Towarów polecanych, marek i producentów, bannerów oraz galerii na szczegółach towaru:

    • Kolor strzałki – kolor strzałki przed najechaniem na obszar sterowania kursorem
    • Kolor tła – kolor tła przed najechaniem na obszar sterowania kursorem
    • Hover – Kolor strzałki – kolor strzałki po najechaniem na obszar sterowania kursorem
    • Hover – Kolor tła – kolor tła po najechaniu na obszar sterowania kursorem
  8.  Breadcrumbs
    Obszar na liście towarów oraz na szczegółach towaru wskazujący lokalizację towaru lub kategorii tło odpowiada również za obszar kroków w koszyku:

    • Kolor tła
    • Kolor tekstu – tekst poza ostatnim krokiem
  9. Opcje zaznaczania / wyboru
    Wszystkie pola typu chceckbox: w newsletterze, filtrach, wyszukiwaniu zaawansowanym, rejestracji, podczas dodawania do koszyka (pop-up „zapamiętaj mój wybór”), zgody w koszyku. Pola można modyfikować w następującym zakresie:

    • Kolor tła
    • Kolor tła (zaznaczony)
    • Kolor zaznaczenia
  10. Paginacja
    Występuje między innymi na liście towarów, paginację można modyfikować w następującym zakresie:

    • Kolor tła
    • Kolor tekstu
    • Kolor obrysu
    • Aktywna strona – Kolor tła – aktywna strona jest np. przy wyborze wariantu towaru lub jednostki miary.
    • Aktywna strona – Kolor tekstu
    • Aktywna strona – Kolor obrysu
    • Hover – Kolor tła
    • Hover – Kolor tekstu
    • Hover – Kolor obrysu
  11. Pola tekstowe
    Odpowiada za kolory w zakresie pól tekstowych, między innymi na formularzu zamówienia, logowania oraz rejestracji:

    • Pole tekstowe – kolor tekstu
    • Pole tekstowe – kolor tekstu aktywnej etykiety
    • Pole tekstowe – kolor tekstu etykiety
  12. Komunikaty
    Odpowiada za kolor ikonki przy komunikacie (pop-up) po wykonaniu akcji przez klienta, przykładowo:

    • Sukces – kolor komunikatu pozytywnego, przykładowo podczas pozytywnej rejestracji
    • Błąd – kolor ikonki komunikatu błędnego, przykładowo przy nieudanej próbie logowania
    • Informacja – kolor ikonki komunikatu informacyjnego, przykładowo w przypadku komunikatu „Przed dodaniem do koszyka wybierz atrybuty towaru”

Nagłówek

Ustawienia nagłówka sklepu – nagłówek jest widoczny na każdej stronie w sklepie.

Konfiguracja
  1. Kolor tła
  2. Tekst w nagłówku

Ustawienia banneru w sklepie –banner jest widoczny na stronie głównej e-Sklepu.

Konfiguracja
  1. Tytuł banneru – tytuł i opis widoczny na bannerze.

Newsletter

Obszar ustawienia pola newsletter.

Konfiguracja
  1. Kolor tła
  2. Tytuł newslettera
  3. Pole tekstowe
    • Kolor tła
    • Kolor obrysu
    • Kolor tekstu

Stopka

Ustawienia stopki sklepu – stopka jest widoczna na każdej stronie w e-Sklepie.

Konfiguracja
  1. Kolor tła
  2. Tytuł sekcji – kolor tytułów ustawianych w panelu administracyjnym: Wygląd sklepu/ Ustawienia/ Nagłówek/Stopka
  3. Sekcje – tytuły sekcji ustawianych w panelu administracyjnym, jak wyżej.
  4. Copyright
    • Kolor tła
    • Tekst i ikony

Przyciski

Ustawienia przycisków w e-Sklepie – przyciski są dostępne w całym obszarze e-Sklepu, na różnych stronach.

Konfiguracja
  1. Przycisk podstawowy
    Ustawienie odpowiada między innymi za przyciski: „Dołącz” w newsletterze, przewinięcie strony w górę, przycisk „Filtruj” na liście towarów, przycisk logowania i rejestracji, przycisk „kup teraz” na szczegółach towaru, przyciski na krokach zamówienia, przycisk wysyłki formularza kontaktowego, przycisk na bannerach. Przyciski można konfigurować w następującym zakresie:

    • Kolor tła
    • Kolor tekstu
    • Kolor obrysu
    • Hover – Kolor tła
    • Hover – Kolor tekstu
    • Hover – Kolor obrysu
  2. Przycisk drugorzędny
    Ustawienie odpowiada między innymi za przyciski: powrotu z koszyka, przycisk powrotu do poprzedniego kroku w koszyku, przycisk „kup bez logowania”. Przyciski można konfigurować w następującym zakresie:

    • Kolor tła
    • Kolor tekstu
    • Kolor obrysu
    • Hover – Kolor tła
    • Hover – Kolor tekstu
    • Hover – Kolor obrysu
  3. Link z ikoną
    Ustaewienie odpowiada między innymi za przyciski na szczegółach towaru: „poleć towar”, „zapytaj o towar”, „porównaj”. Przycisk można konfigurować w następującym zakresie:

    • Kolor ikony
    • Kolor tekstu
    • Hover – Kolor ikony
    • Hover – Kolor tekstu

Towar

Ustawienia związane z prezentacją towaru w e-Sklepie, między innymi na liście towarów, na szczegółach towaru oraz w koszyku.

Konfiguracja
  1. Kolor suwaka filtra ceny – na liście towarów
  2. Nazwa towaru
  3. Cena
  4. Cena przed obniżką
  5. Ocena – nieaktywne gwiazdki
  6. Oznaczenia towarów (Nowość, Promocja) – kolory flag przypisanych do towaru, w tym zakresie można ustawić kolory następujących flag:
    • Kolor tekstu – kolor tekstu na wszystkich flagach
    • Kolor tła – Nowość
    • Kolor tła – Promocja
    • Kolor tła – Supercena
    • Kolor tła – Superjakość
    • Kolor tła – Towary Polecane
    • Kolor tła – Towar z gazetki
    • Kolor tła – Rekomendacja sprzedawcy
    • Kolor tła – Nagroda
    • Kolor tła – Najlepiej oceniane

 

Czy ten artykuł był pomocny?

Wyślij opnie