Schematy wyglądu

Schematy systemowe

Najprostszym sposobem na zmianę wyglądu sklepu jest wybranie jednego z gotowych schematów wyglądu. Są one dostępne w zakładce Schematy wyglądu (nr. 1 na rysunku nr. 1).

Włączanie dla sklepu gotowego schematu wyglądu

Po najechaniu na miniaturkę podglądu możemy włączyć ją klikając na przycisk Włącz

Podgląd wydruku sklepu w systemowym szablonie wyglądu

Jeżeli chcemy zobaczyć jak będzie wyglądał sklep w jednym z gotowych systemowych szablonów możemy kliknąć w Podgląd w sklepie, który pojawi się po najechaniu na miniaturkę schematu.

Zostanie otwarta nowa strona, w której zaprezentowany zostanie Państwa sklep (rysunek nr. 2). W tym widoku można przeglądać cały sklep i odwiedzać każdą stroną oceniając czy nowy wygląd jest właściwy

Przeglądając stronę sklepu w trybie podglądu możemy mieć pewność, że sklep dla klientów wygląda tak jak wyglądał. Tylko operator po przejściu w tryb podglądu może oglądać sklep w nowym wyglądzie. Wygląd sklepu dla klientów zmieni się dopiero po tym jak operator włączy wybrany wygląd przyciskiem Włącz (sposób opisany w rozdziale Włączanie dla sklepu gotowego schematu wyglądu).

Będąc w trybie podglądu operator może sprawdzić wygląd sklepu w innych schematach wybierając je z listy rozwijanej Aktualny schemat (nr. 2 na rysunku nr. 2) a następnie kliknąć w przycisk Zmień.

Wyjście z trybu podglądu następuje po kliknięciu w Wyłącz (nr. 1 na rysunku nr. 2).

Tworzenie nowego schematu wyglądu na podstawie systemowego

Skorzystanie ze schematów systemowych jest najprostszym i najszybszym sposobem na zmianę wygląd sklepu.

Istnieje możliwość utworzenia własnego schematu. Ze względu na ogromną ilość parametrów wyglądu do uzgodnienia, nowy schemat tworzony jest na podstawie już istniejącego schematu (systemowego lub własnego).

Tworzenie nowego schematy rozpoczyna się poprzez kliknięcie na Stwórz nowy, który pojawi się na miniaturce schematu po najechaniu myszą.

Następnie w oknie, które pojawi się należy podać nazwę nowego schematu. Kolejnym krokiem jest konfiguracja schematu wyglądu.

Schematy własne

Schematy własne są dostępne pod zakładką Schematy własne (nr. 2 na rysunku nr. 1)

Wybór opcji dotyczących schematów własnych dostępny jest po najechaniu na miniaturkę kursorem.

Włączenie schematu własnego odbywa się poprzez kliknięcie na przycisk Włącz.

Podgląd schematu własnego działa analogicznie jak dla schematu systemowego.

Jeżeli chcemy edytować schemat należy kliknąć na Edycja schematu.

Tworzenie nowego schematu jest dostępne po kliknięciu na Stwórz nowy, następnie należy podać nazwę i rozpocząć proces konfiguracji.

Kliknięcie na przycisk X w oknie schematu własnego spowoduje usunięcie schematu.

Konfiguracja schematu wyglądu

Konfiguracja schematu pozwala na zdefiniowanie praktycznie, każdego elementu (kroje, wielkości, kolory czcionek, tła, obramowania itp.).

Konfigurować wygląd można w dwóch trybach, graficznym i zaawansowanym. Przełączanie pomiędzy trybami odbywa się poprzez kliknięcie przycisku Tryb zaawansowany lub Tryb graficzny (nr. 3 na rysunku nr. 4).

Ze względu na łatwość obsługi i większe możliwości walidacji polecanym trybem jest tryb graficzny.

Podgląd jest dostępny po kliknięciu na przycisk Podgląd w sklepie (nr. 4 na rysunku nr. 4)

Graficzny typ konfiguratora

Po lewej stronie panelu na liście (nr. 5 na rysunku nr. 4) zostały pogrupowane elementy sklepu internetowego podlegające konfiguracji.

Listę tą możemy przeszukiwać wpisując w pole Szukaj (nr. 2 na rysunku nr. 4) nazwę szukanego elementu.

Po kliknięciu w interesującą nas sekcję po prawej stronie wyświetlone zostaną szczegóły jej konfiguracji (nr. 6 na rysunku nr. 4).

Sposoby konfigurowania elementów

Wiele elementów wyglądu sklepu definiowanych jest w ten sam sposób. Poniżej zostały zebrane podstawowe sposoby konfiguracji określonych grup elementów.

Warto pamiętać, że niektóre elementy nie będą widoczne w podglądzie w panelu administracyjnym na białym tle. Na przykład czcionki, dla których zdefiniowano biały kolor. Wtedy należy kliknąć na Pokaż na ciemnym tle lub jeżeli chcemy powrócić do białego tła należy kliknąć na Pokaż jasnym tle.

Kolor

Kolor można wprowadzać w postaci szesnastkowej lub wygodniej skorzystać z wyboru koloru. Należy kliknąć w kwadrat, który przedstawia aktualny kolor (nr. 1 na rysunku nr. 5)

W oknie, które pojawi się można wybrać kolor (nr. 2 na rysunku nr. 5) oraz jego nasycenie (nr. 3 na rysunku nr. 5).

Czcionka

Przy definiowaniu czcionki mamy możliwość określenia rodzaju, rozmiaru, koloru i jej grubości. Dla niektórych elementów można dla czcionki zdefiniować parametry jej cienia: rozmiar cienia, przesunięcie cienia w osi X i Y.

Tło

Istnieje możliwość określenia trzech typów tła: gradient, kolor, obraz.

Typ tła wybieramy z listy rozwijanej (nr. 1 na rysunku nr. 6)

Typ gradient

Gradient tworzony jest przy pomocy wbudowanego narzędzia definiowania gradientów (rysunek nr. 7).

Tworząc nowy gradient można skorzystać z wyboru predefiniowanych gradientów (nr. 1 na rysunku nr. 7).

Poniżej znajduje się pasek edycji położenia kolorów/przezroczystości na gradiencie. Przesuwając suwaki kolorów/przezroczystości można ustawić ich granice (nr. 2 na rysunku nr. 7). Do gradientu możemy dodawać i odejmować kolory w oknie Kolor (nr. 3 na rysunku nr. 7). Możliwe jest również dodawanie lub odejmowanie przezroczystości w oknie Przezroczystość (nr. 4 na rysunku nr. 7) jak również jej intensywności. Kierunek gradientu określamy wybierając z listy rozwijanej w oknie Kierunek (nr. 5 na rysunku nr. 7).

Podczas edycji gradientu wyświetlany jest podgląd gradientu po prawej stronie okna (nr. 6 na rysunku nr. 7)

Typ kolor

Dla typu kolor należy wybrać kolor tła posługując się narzędziem wyboru koloru. Użycie narzędzia zostało opisane w podrozdziale Kolor.

Typ obraz

Dla typu obraz możemy określić kolor tła pod obrazkiem, sam obrazek oraz to jak będzie wyświetlany na stronie sklepu

Tło dla obrazka określamy klikając na ikonkę koloru (nr. 2 na rysunku nr. 7).

Po kliknięciu w Wybierz (nr. 4 na rysunku nr. 7) przy Adres url obrazu mamy możliwość wstawienia obrazka pochodzącego z zasobów własnych.

Możemy również zdefiniować sposób powtarzania się obrazu (nr. 5 na rysunku nr. 7), położenie obrazka (nr. 6, 7 na rysunku nr. 7).

W trakcie zmian dostępny jest podgląd fragmentu tła (nr. 3 na rysunku nr. 7)

Obramowanie

W wielu elementach sklepu występuje obramowanie. W przypadku konfiguracji obramowania mamy możliwość określenia stylu ramki, jej szerokości, koloru obramowania oraz tego jak bardzo powinny być zaokrąglone rogi. Obramowania zawierają cień zdefiniowany poprzez rozmiar w pixelach i kolor. Jeżeli nie chcemy żeby cień był wyświetlany przy obramowaniu, jako rozmiar cienia powinniśmy wprowadzić wartość zero.

Elementy podlegające konfiguracji

• Parametry podstawowe
  • Całość strony
  • Odnośniki
  • Pola formularza
• Nagłówek
  • Top (nr. 1 na rysunku nr. 8)
  • Logo (nr. 2 na rysunku nr. 8)
  • Panel akcji (nr. 3 na rysunku nr. 8)
  • Komponent koszyka (nr. 4 na rysunku nr. 8)
  • Pływająca belka (belka pojawiająca się na górze strony po zjechaniu niżej na stronie)
• Menu
  • Belka menu
  • Linie
  • Cień
  • Tło
• Sekcja treści
  • Sekcja treści (obszar zaczynający się zaraz pod menu a kończący przed stopką)
  • Kolumny
• Stopka
  • Przestrzeń wokół zawartości stopki
  • Sekcja stopki
  • Kolumny stopki
• Przyciski
  • Przycisk standardowy
  • Przycisk duży
• Boksy
  • Boksy, elementy wspólne
  • Boks A (boks zawierający listę kategorii, belki z nazwami procesów zamówienia)
  • Boks A - nagłówek
  • Boks A - zawartość
  • Boks B (praktycznie wszystkie boksy oprócz tych, które zawierają listę kategorii i nazwy procesów zamówienia)
  • Boks B - nagłówek
  • Boks B - zawartość
  • Panel
• Panel kategorii
  • Breadcrumb
  • Ikona punktująca element główny listy
  • Poziom 1
  • Poziom 1 - nagłówek
  • Poziom 2
• Koszyk
  • Przycisk dodawania do koszyka
  • Boks koszyka
  • Boks koszyka - nagłówek
  • Boks koszyka - zawartość
  • Boks koszyka - belka tytułowa podglądu koszyka
• Listy i tabele
  • Lista/tabelka
  • Tabele
  • Tabele - nagłówek
• Kroki zamówienia
• Zdjęcia
  • Miniaturki
  • Podgląd
• Oferta
  • Lista produktów
  • Panel sterowania wyświetlania oferty
• Filtry i atrybuty filtrów
  • Boks filtrów
  • Boks filtrów - nagłówek
  • Boks filtrów - treść
  • Boksy poszczególnych filtrów
  • Znaczniki włączonych filtrów
  • Kalendarz
  • Suwak
• Karta produktu
  • Opis
  • Panel informacji cenowych
  • Zakładki
  • Zakładki - po najechaniu myszą
  • Zakładki - aktualnie wybrana
• Powiadomienia
  • Powiadomienia
  • Powiadomienia - informacje
  • Powiadomienia - błędy
• Strony błędów
  • Strony błędów
  • Strony błędów - nagłówek
  • Strony błędów - treść