O szablonie Wisecommerce

Szablony w Shoperze nie powstają od zera. Każdy z nich zbudowany jest na standardowym szablonie Storefront - podstawowej wersji dostarczanej przez Shoper. Szablon Wisecommerce rozszerza go o sześć rzeczy:

Moduły układu - “bloczki” do umieszczenia w odpowiednich miejscach w sklepie
Moduły integracji - funkcjonalności działające w obrębie całego sklepu
Style - zaawansowana możliwość edycji wyglądu sklepu: typografii, kolorystyki, wielkości poszczególnych elementów
Ustawienia - wpływające na zachowanie lub sposób działania domyślnych komponentów szablonu
Makra - rozszerzające możliwości tworzenia modułów własnych oraz innych modyfikacji
Gotowe układy stron w Shoper Visual Editor - predefiniowane ustawienia sekcji, wierszy i kolumn, poustawiane tak, żeby sklep był gotowy do podstawowej konfiguracji.

Podgląd szablonu

Aby włączyć podgląd polecamy użyć lupki z poziomu zakładki “Wygląd i treści” → “Wygląd sklepu” → “Twoje szablony graficzne”. Kliknięcie w lupkę spowoduje otworzenie podglądu szablonu w nowym oknie przeglądarki.

Po instalacji szablon zawiera przykładowe zdjęcia oraz treści (tzw. placeholdery). Przed jego aktywacją należy uzupełnić go o docelowe materiały oraz przeprowadzić konfigurację.

Kopia zapasowa i praca w tle

Przed pierwszą edycją zalecamy utworzenie kopii szablonu. Klikając w przycisk “Utwórz kopię”. Oryginalną instalację warto zostawić jako backup do testów.

Dopóki szablon nie jest ustawiony jako aktywny, klienci sklepu go nie widzą - oglądasz go w podglądzie, a sklep cały czas działa na szablonie aktywnym. Zmiany możesz wprowadzać na kopii szablonu i aktywować ją dopiero wtedy, gdy wszystko jest gotowe.

Edycja szablonu przez Shoper Visual Editor

W większości przypadków zmiany wprowadzać będziesz przez Shoper Visual Editor. Aby go uruchomić przejdź do zakładki “Szczegóły szablonu”, a następnie kliknij w przycisk “Edytuj układ i styl szablonu”. Jeżeli jesteś nowym użytkownikiem Storefront zachęcamy do zapoznania się z materiałem przygotowanym przez Shoper → https://www.shoper.pl/learn/artykul/storefront-shoper-visual-editor

TLDR;

Szablon graficzny dzieli się na typy stron - strona główna, strona produktu, listy produktów, koszyk etc. Każdą konfigurujesz osobno i wybierasz ją z rozwijanej listy w lewym górnym rogu. Oprócz tego osobno konfigurujesz Nagłówek oraz Stopkę.
Każdy typ strony składa się z sekcji, wierszy oraz kolumn - a w nich umieszczasz moduły.
Możesz dodawać/usuwać/przenosić elementy szablonu korzystając z drzewa po lewej stronie lub podglądu po prawej.
Po wprowadzeniu zmian kliknij w “Opublikuj” w prawym górnym rogu, aby zapisać zmiany.
Każda sekcja, wiersz, kolumna oraz moduł ma swoją konfigurację. Otwierasz ją klikając w dany element. </aside>

Dodawanie i edycja modułów układu

Pod przyciskiem “Dodaj” znajdziesz dostępną listę modułów układu. Moduły z prefixem [wse] to moduły szablonu Wisecommerce. Pozostałe to te dostępne w natywnym szablonie Storefront lub pochodzące z zainstalowanych aplikacji.

Aby dodać moduł do układu przeciągnij go z listy w odpowiednie miejsce.

Niektóre moduły możesz dodać kilka razy w różnych miejscach. Każda z “instancji” ma własne ustawienia.

Moduły układu to najliczniejsza grupa w szablonie - od banerów, sliderów i sekcji treści na stronie głównej, po galerię, tabelę rozmiarów i upsell na karcie produktu. Pełna lista z instrukcją każdego: Moduły i funkcjonalności.

Style

Zakładce “Style” znajdziesz grupy z prefixem [wse] to dodatkowe ustawienia, które mają wpływ na wygląd elementów.

Opis pól każdej z nich jest w Moduły i funkcjonalności.

Integracje

W tym miejscu znajdziesz moduły integracji.

Obejmują między innymi przyklejone menu, moduły koszyka, cenę na przycisku zakupu i harmonogram widoczności elementów. Pełna lista z instrukcją każdego: Moduły i funkcjonalności.

Ustawienia

Grupy [wse] w sekcji Ustawienia motywu w edytorze szablonu. Tu włączasz dodatkowe funkcje szablonu.