Do czego służy opcja „Wygląd” – „Aktywny styl graficzny”?

Forum dyskusyjne home.pl

aktywny-stylZa pośrednictwem opcji menu KONFIGURACJA –> WYGLĄD –> AKTYWNY STYL GRAFICZNY możesz zmodyfikować styl graficzny według własnych potrzeb i wymagań. Możesz ustalić układ modułów, szerokość strony czy też ilość i wielkość zdjęć wyświetlanych na stronie głównej i podstronach. Większość opcji dotyczących modułów zmienisz korzystając z mechanizmu Drag & Drop.

Funkcja Drag and Drop w wolnym tłumaczeniu oznacza „Przeciągnij i upuść”. Polega ona na kliknięciu lewym klawiszem myszy na wybranej kategorii, następnie nie puszczając lewego klawiszu myszy możesz wybraną kategorię przeciągnąć do odpowiedniego miejsca. Gdy puścisz lewy klawisz myszy w odpowiednim miejscu, wybrana kategoria zostanie „upuszczona” w danym miejscu i będzie wyświetlana według tak zdefiniowanej kolejności.

Każdy styl graficzny oferuje łatwe dopasowanie elementów opisujących tło, nagłówek, stopkę oraz różne podstrony sklepu. Jeżeli jesteś zaawansowanym użytkownikiem, możesz również skorzystać z opcji wstawienia własnego kodu CSS i JS.

Parametry

Każdy styl graficzny opisany jest następującymi parametrami:

Ustawienia podstawowe:
  • Nazwa oraz opis – parametry, po których będziesz identyfikować styl graficzny w Panelu sklepu.
  • Szerokość strony – rozmiar sklepu wyrażany liczbą pikseli lub procentowo.
  • Tło sklepu – wskaż kolor tła Twojego sklepu.
  • Wyrównanie tła – wskaż w jaki sposób ma być wyrównane tło w stosunku do strony, np. środek.
  • Powtarzanie tła – określ czy tło (np. obrazek tła) ma być powtarzane, np. w poziomie, w pionie lub w obu kierunkach.
  • Obraz tła – grafika znajdująca się w tle sklepu; najlepiej, aby kolory jego krawędzi nie odbiegały znacząco od tła sklepu.
  • Favicon – wybierz ikonę wyświetlaną w pasku adresu sklepu (format JPG, rozmiar 16×16 px).aktywny-styl2

 

Nagłówek:
  • Wyszukiwarka – wybierz czy w nagłówku sklepu ma być wyświetlana wyszukiwarka.
  • Logowanie i koszyk – wybierz czy w nagłówku sklepu ma być wyświetlany moduł logowania oraz koszyka, który pozwala klientowi na szybki podgląd zawartości jego koszyka.
  • Informacja o cookie – wybierz czy na stronach sklepu ma być wyświetlana informacja o stosowaniu plików cookies.
  • Logo – wybierz logo Twojego sklepu, które zostanie umieszczone po lewej stronie nagłówka.
  • Tło nagłówka – wybierz obrazek, który będzie wyświetlany jako tło nagłówka.
Stopka:
  • w tym miejscu możesz wpisać dowolną treść, np. dotyczącą Twojego sklepu, która będzie wyświetlana w dolnej części sklepu (pod listą podstron, którą możesz zarządzać w opcji menu ZAWARTOŚĆ –> NAGŁÓWEK I STOPKA.
Strona główna:
  • Ilość kolumn – określ w ilu kolumnach mają być prezentowane produkty na stronie głównej.
  • Ilość produktów na stronie – określ, jak wiele produktów powinno się znaleźć na stronie głównej.
  • Rozmiar zdjęcia – ustal rozmiar miniaturek produktów.
  • Pokazuj dostępność – określ czy chcesz wyświetlać informacje o dostępności produktów w magazynie (np. mało, dużo).
  • Pokazuj czas dostawy – określ czy chcesz wyświetlać informacje o czasie dostawy produktów do klienta (np. 24 godziny).
  • Losowa kolejność produktów – określ czy produkty na stronie głównej mają być wyświetlane w losowej kolejności.aktywny2

 

Lista produktów:
  • Rozmiar zdjęcia – ustal rozmiar miniaturek produktów, które będą wyświetlane na liście.
  • Ilość kolumn – ustal ile kolumn ma być wyświetlanych na liście produktów.
  • Ilość produktów na stronie – ustal łączną liczbę produktów, która będzie wyświetlana na jednej stronie listy produktów.
  • Domyślny widok – zdefiniuj w jaki domyślny sposób mają być wyświetlane produkty na liście.
  • Pozwól zmieniać widok – wybierz czy klient będzie mógł zmieniać domyślny widok listy produktów według własnych preferencji.
  • Pokazuj dostępność – określ czy chcesz wyświetlać informacje o dostępności produktów w magazynie (np. mało, dużo).
  • Pokazuj czas dostawy – określ czy chcesz wyświetlać informacje o czasie dostawy produktów do klienta (np. 24 godziny).aktywny4

 

Szczegóły produktów:
  • Rozmiar zdjęcia głównego – określ wielkość zdjęcia, które będzie wyświetlane po wybraniu konkretnego produktu.
  • Powiększenie zdjęcia głównego po najechaniu – po najechaniu kursorem myszki na zdjęcie produktu, może zostać ono automatycznie powiększone.
  • Położenie galerii zdjęć – jeśli do produktu dopisana jest większa liczba zdjęć, możesz określić w tym miejscu ich położenie na karcie szczegółów produktu.
  • Rozmiar zdjęcia w galerii – określ rozmiar zdjęć produktów, które występują w galerii każdego z produktów (po przejściu do szczegółów produktu).
  • Informacje o produkcie – wybierz jakie informacje o produkcie mają być wyświetlane na karcie produktu.
  • Inne – określ, jakie dodatkowe dane mają być wyświetlane w karcie produktu.
  • Akcje – określ jakie akcje będą dostępne na karcie produktu, np. zapytanie o produkt, przycisk „Lubię to”.
    aktywny5

 

Moduły:
  • ustal w tym miejscu położenie modułów na Twojej stronie. Zwróć uwagę, że możesz ustalać inny układ zarówno dla strony głównej, jak i dla listy produktów, szczegółów produktu oraz koszyka.
  • Każdy z poszczególnych modułów pozwala na zmianę jego ustawień, które mogą np. wpływać na sposób jego wyświetlania (np. animowana lista z produktami).
  • Pamiętaj, że podczas dodawania nowych modułów lub zmian ich położenia, należy korzystać z funkcji Drag & Drop.
    Funkcja Drag and Drop w wolnym tłumaczeniu oznacza Przeciągnij i upuść. Polega ona na kliknięciu lewym klawiszem myszy na wybranej kategorii, następnie nie puszczając lewego klawiszu myszy możesz wybraną kategorię przeciągnąć do odpowiedniego miejsca. Gdy puścisz lewy klawisz myszy w odpowiednim miejscu, wybrana kategoria zostanie „upuszczona” w danym miejscu i będzie wyświetlana według tak zdefiniowanej kolejności.
    aktywny6

 

Własny styl CSS:
  • Za pomocą własnego stylu CSS możesz zmodyfikować wybrane elementy sklepu lub dopasować cały jego wygląd do własnych potrzeb.
  • Wykorzystaj tę opcję, aby zachować pełną kompatybilność sklepu. Tym sposobem możesz modyfikować wygląd elementów Twojego sklepu, przy tym nie ingerując w główny plik CSS.
Własny styl JS:
  • W tym miejscu możesz dodać własne polecenia JavaScript, które wpłyną na działanie lub wygląd Twojego stylu graficznego.
  • Pamiętaj, że zaawansowaną integrację poprzez JavaScript możesz wykonać w opcji menu Konfiguracja -> Integracje własne (możesz w tym miejscu dodać odpowiedni skrypt (np. JavaScript), który zostanie zagnieżdżony w nagłówku lub stopce sklepu internetowego).
Pliki graficzne:  (tylko styl użytkownika)
  • w łatwy i szybki sposób dodasz i zamienisz własne elementy graficzne, które będą wyświetlane w Twoim sklepie. Pamiętaj, że w każdej chwili możesz przywrócić plik domyślny.
Edycja zaawansowana: (tylko styl użytkownika)
  • w tej zakładce możesz edytować pliki .css i .tpl stylu graficznego. Pamiętaj, że do sprawnego przeprowadzenia zmian niezbędna jest dobra znajomość CSS oraz HTML. Jeżeli wprowadzone modyfikacje nie spełnią oczekiwań lub spowodują unieruchomienie sklepu, można je przywrócić do domyślnych ustawień lub cofnąć o kilka kroków wstecz (tzw. wersjonowanie plików skórki).
  • UWAGA: edycja plików w zakładce „Edycja zaawansowana” nie jest objęta pomocą techniczną!!! Wprowadzenie jakichkolwiek zmian w plikach może spowodować problemy z funkcjonowaniem sklepu lub jego całkowite unieruchomienie. Błędy mogą pojawić się już przy zapisaniu zmian lub w trakcie najbliższej aktualizacji usługi – w obu przypadkach należy przywrócić oryginalną postać zmodyfikowanego pliku za pomocą odpowiedniej ikony. Rozbudowane modyfikacje wyglądu sklepu rekomendujemy przeprowadzić za pomocą narzędzi udostępnionych w zakładkach „Pliki graficzne” oraz „Własny styl CSS„.


UWAGA: Zakładka „Pliki graficzne” oraz „Edycja zaawansowana”, widoczne są po stworzeniu kopii oryginalnego stylu graficznego. Aby wykonać kopię wybranego stylu graficznego, kliknij przycisk
utworz-kopie.

Niepoprawnie wyświetlane zdjęcie na liście produktów?
Jeśli masz problem z dostosowaniem szerokości i wysokości zdjęć lub wydają Ci się one rozciągnięte – wpisz tylko szerokość zdjęcia, a jego wysokość zostanie dopasowana automatycznie.
Pracuj na wielu stylach jednocześnie!
Pamiętaj, że każdy styl graficzny to całkowicie niezależny komplet ustawień. Możesz pracować na kilku stylach równolegle oraz w dowolnej chwili obejrzeć sklep w stylu A, podczas gdy dla klientów jest widoczny w stylu B. Dzięki temu możesz również przygotować różne warianty wyglądu (np. zimowy, letni, walentynkowy) i przełączyć je 1 kliknięciem myszy.
Ktoś dla Ciebie przygotowuje grafikę, a Ty nie chcesz, aby miał dostęp do danych w sklepie?
Utwórz grupę administratorów z dostępem wyłącznie do menu KONFIGURACJA –> WYGLĄD. Dzięki temu wybrany grafik uzyska uprawnienia wyłącznie do zarządzania stylami graficznymi (może edytować elementy odpowiedzialne za wygląd sklepu, bez wglądu w jakiekolwiek informacje o zamówieniach, produktach, czy klientach).

Tematy pokrewne

  • Czy artykuł był pomocny?
  • TAK   Nie
Więcej informacji na forum dyskusyjnym:   Kliknij tutaj, aby przejść na forum.home.pl