Kreator wyglądu Szafir (B2B)

Wstęp

Jednym z kluczowych elementów, który przyczynia się do sukcesu w branży e-commerce jest oprawa wizualna sklepu. W dużym stopniu to właśnie ona wpływa na całościowe wrażenia użytkowników i ich proces zakupowy. Dzięki narzędziu – Kreator Szablonu Szafir (B2B), właściciele sklepów mają możliwość stworzyć swój własny, niepowtarzalny szablon, który będzie dostosowany do obsługi klientów detalicznych oraz typu firma – połączenie modeli B2B i B2C.

Zastosowanie

Kreator jest intuicyjnym narzędziem służącym do tworzenia szablonów. Jego obsługa nie wymaga umiejętności technicznych ani programowania. Wszystko odbywa się na poziomie strony internetowej, gdzie z gotowych elementów za pomocą metody „przeciągnij i upuść” możesz zaprojektować wygląd swojego sklepu. Dodatkowo, stworzony szablon jest dostosowany do wyświetlania na różnych urządzeniach (RWD).

W ramach kreatora zaprojektujesz wszystkie niezbędne obszary sklepu:

Kto może używać tej opcji?

Aby móc używać tego narzędzia należy posiadać:

Wskazówka

Kreator szablonu Szafir dostępny jedynie w wersji przeglądarkowej.

Zaczynamy!

Jak zaprojektować układ szablonu?

Aby rozpocząć tworzenie szablonu należy przejść na stronę Kreatora Wyglądu. Wyświetlony zostanie powitalny komunikat. Na początku należy określić, dla jakiego modelu sprzedaży projektujesz szablon dla swojego e-Sklepu. Do wyboru masz sprzedaż detaliczną lub hurtową. Sprzedaż hurtowa przeznaczona jest dla użytkowników, którzy chcą sprzedawać swoje produkty również klientom biznesowym w hurtowych ilościach. Wybierz odpowiedni model, a następnie naciśnij przycisk Rozpocznij pracę. Po jego kliknięciu będzie można stworzyć nowy szablon lub edytować jeden z kilku gotowych.

 

W sytuacji gdy wcześniej tworzony był już projekt, widoczny będzie przycisk umożliwiający dokończenie szablonu lub rozpoczęcie nowego projektu.

Opcja Nowy szablon umożliwia zbudowanie od początku nowego szablonu Szafir według Twojego indywidualnego pomysłu.

Pozostałe trzy opcje do wyboru to gotowe wersje szablonu Szafir z możliwością ich edycji. Dzięki temu nie ma potrzeby tworzenia nowego szablonu od podstaw, ponieważ możesz wybrać jedną z gotowych propozycji, a następnie łatwo go edytować dostosowując do swoich potrzeb. Podwójne kliknięcie w wybrany kafelek pozwala przejść dalej.

W trzech krótkich krokach zapoznasz się z podstawowymi funkcjami kreatora. Następnie możesz już przystąpić do dalszych modyfikacji szablonu lub od razu wygenerować przygotowaną wersję szablonu Szafir.

Od czego zacząć?

Wybierz wersję językową Kreatora i rozpocznij pracę nad swoim szablonem. Wersje do wyboru to: język polski, angielski, niemiecki oraz francuski. Język wybieramy klikając strzałkę obok flagi i nazwy języka w lewym dolnym rogu. Przy podglądzie prac na pełnym ekranie, wybrany język zostaje zachowany i szablon będzie wyświetlał się w wybranej wersji językowej.

Gdy już wybierzesz wersję językową dla swojego Kreatora warto zacząć od nazwania swojego przyszłego szablonu. Można to zrobić klikając Zmień i wpisując nazwę w lewym górnym rogu, zastępując nazwę „Szafir(2023)”. Nazwa ta będzie widoczna po zaimportowaniu szablonu do panelu administracyjnego oraz po wyeksportowaniu szablonu do pliku XML wraz z datą i godziną jego wygenerowania.

Krok 1 – Strona główna

W tej sekcji należy zaprojektować wygląd strony głównej naszego Comarch e-Sklepu. Strona główna może składać się z następujących elementów:

Po rozwinięciu każdej z sekcji ukażą się dostępne elementy:

Metodą „Przeciągnij i upuść” przenosimy wybrane elementy na obszar po prawej stronie:

Postępuj analogicznie z pozostałymi elementami.

Nagłówek

Sekcja „Nagłówek” prezentuje jeden widok. Nagłówek dodatkowo można konfigurować w zakresie wielkości linków w Menu kategorii i prezentacji funkcji związanych ze składaniem Zapytań o wycenę.

Bannery

Sekcja „Bannery” pozwala wybrać jedną możliwości prezentacji banneru. Informacje dotyczące rekomendowanych rozmiarów obrazków w bannerach opisaliśmy w tym artykule.

 

Widget

Sekcja „Widget” pozwala dodać jeden z dwóch dostępnych wariantów, które pozwolą zaprezentować następujące funkcje.

Banner pop-up

Sekcja „Banner pop-up” pozwala wybrać jedną z dwóch możliwości prezentacji banerów. Bannery będą możliwe do wyświetlenia jedynie na stronie głównej e-Sklepu.

Proponowane

Sekcja „Proponowane” posiada dodatkowe opcje do ustawienia. Z listy menu, dostępnej pod przyciskiem Zmień typ możesz wybrać jakiego rodzaju produkty mają się w tym obszarze wyświetlać (m.in. nowość, najczęściej oglądane, wyprzedaż, sugerowane). Po zmianie typu tej sekcji, będzie się ona odpowiednio nazywać po wgraniu szablonu do sklepu:

Dodatkowo po najechaniu kursorem na tę sekcję, wybierając Opcje, możemy ustawić liczbę towarów, która będzie się wyświetlać (maksymalnie 50).

 

 

Podczas tworzenia szablonu w Kreatorze wyglądu Szafir po dodaniu sekcji towary polecane można określić typ wyświetlanych produktów. Nazwa sekcji jest zależna oraz adekwatna do określonego typu. Daną nazwę można modyfikować w tłumaczeniach szablonu. Dodatkowo każdy wybrany typ jest podlinkowany do wszystkich produktów wskazanego rodzaju.

W zależności od wybranego typu, edycji parametrów wyświetlania dokonasz w panelu administracyjnym e-Sklepu. Z kolei informację o typie towaru ustawisz w systemie ERP.

Typy towarów edytowane z poziomu panelu administracyjnego Comarch e-Sklep:

Aby zdecydować o parametrach wyświetlania tych informacji należy przejść w panelu administracyjnym Comarch e-Sklep do zakładki Ustawienia/Ustawienia sklepu/sekcji Towary:

Producent, marka, ręcznie wybrane, kategoria oraz ostatnio oglądane obsługiwane są w ramach obiektu lokalnego „Siatka towarów”. Po wyborze jednego z wyżej wymienionych typów zmian ustawień należy dokonać z poziomu panelu administracyjnego przechodząc do obszaru zakładki Wygląd sklepu/Ustawienia/Ustawienia zaawansowane oraz zakładki Obiekty. Na szczegółach wybranego obiektu (Siatka towarów) określamy jakie dokładnie towary zostaną zaprezentowane w sekcji „Proponowane”. W przypadku wyboru „Producenta” lub „Marki” należy samodzielnie określić producenta lub markę.

Dodawanie informacji o typie produktu w systemie ERP dotyczy:

Informacja tego typu ustawiana jest bezpośrednio na karcie towaru w systemie ERP poprzez zaznaczenie odpowiedniej flagi w systemie ERP XL (zakładka aplikacje) lub atrybutu czasowego w ERP Optima (zakładka e-Sklep, sekcja atrybuty czasowe). Po wybraniu konkretnej opcji w systemie ERP na karcie danego produktu w Comarch e-Sklep zostanie dodana odpowiednia informacja:

Newsletter

Ustawienia parametrów newslettera można edytować w panelu administracyjnym, w zakładce Ustawienia/ Ustawienia sklepu/ Mailing.

Slider marek

Sekcja „Slider marek” umożliwia dodanie do szablonu jednego widoków slidera marek. Na sliderach wyświetlane są loga marek, które zostały zaimportowane z systemu ERP. Po kliknięciu w wybrane logo, pojawi się lista wszystkich towarów, dla których dodana jest konkretna marka. Sekcje mogą być dodane w szablonie w dowolnym miejscu na stronie głównej.

Slider producentów

Sekcja „Slider producentów ” umożliwia dodanie do szablonu jednego widoków slidera producentów. Na sliderach wyświetlane są loga producentów, które zostały zaimportowane z systemu ERP. Po kliknięciu w wybrane logo, pojawi się lista wszystkich towarów, dla których dodany jest konkretny producent. Sekcje mogą być dodane w szablonie w dowolnym miejscu na stronie głównej.

Aktualności

Sekcja umożliwia zamieszczenie aktualności na stronie głównej w formie listy artykułów z bloga. Tekst wprowadza się w panelu administracyjnym przechodząc do zakładki  e-Marketing/Blog.

Banner infografika

Sekcja „Banner infografika” pozwala na zaprezentowanie korzyści z zakupów w Twoim sklepie. Dotyczą one obszarów: informacji o dostawie, płatnościach, rabatach czy programie lojalnościowym. Banner możesz dodać tylko do strony głównej. Dodatkowe bannery mieszczą się w katalogu homepage-small w panelu administracyjnym e-Sklepu, obszar: Wygląd sklepu/ Ustawienia/ Bannery.

Stopka

Sekcja „Stopka” zawiera jeden widok do wyboru.

W widoku Stopki widnieją strony statyczne, którymi można zarządzać w sekcji Wygląd Sklepu/ Ustawienia/ Nagłówek i Stopka. Dla każdej z sekcji wyświetla się jej utworzona w panelu nazwa. W stopce znajdują się także informacje na temat rodzaju prezentowanych cen w e-Sklepie (brutto czy netto) oraz komunikat @Comarch SA 2022. All rights reserved Powered by Comarch e-Sklep. Dodatkowo istnieje możliwość umieszczenia w stopce odnośników do mediów społecznościowych oraz ich ikony. W stopce trzeciej możemy dodać ikony naszych dostawców oraz form płatności wykorzystywanych w sklepie.

Po wybraniu wszystkich niezbędnych sekcji nasza strona główna powinna być gotowa. Efekt naszej pracy możemy podejrzeć klikając Podgląd w prawym górnym rogu.

Dzięki tej opcji możesz zobaczyć, jak będzie prezentował się Twój szablon zarówno w wersji dekstop, jak i mobile.

Strona główna wymaga dwóch podstawowych elementów: nagłówka oraz stopki. Pozostałe elementy nie są obowiązkowe.

Krok 2 – Lista towarów

Kolejnym krokiem jest utworzenie listy towarów. Aby to zrobić, należy rozwinąć listę zgodnie z poniższym rysunkiem, a następnie przejść do wskazanej zakładki:

Bannery

Sekcja „Bannery” daje możliwość wyboru prezentacji bannerów na liście dostępnych towarów, dzięki którym masz możliwość prezentacji nowych grafik.

Panel filtra

Sekcja „Panel filtra” umożliwia dodanie do szablonu jednego z dwóch dostępnych wariantów. Dodatkowo możesz zdecydować o liczbie wyświetlanych wartości filtrów a także o widoku sekcji filtrów.

Podkategorie

Sekcja „Podkategorie” umożliwia dodanie jednego widoku podkategorii. Jeżeli główna kategoria ma swoje podkategorie, menu graficzne zostanie wyświetlone w następujący sposób:

Opis kategorii

Sekcja umożliwia dodanie jednego z dwóch dostępnych opisów kategorii. Wybierając jeden z nich możesz zdecydować czy forma graficzna prezentowania: nazwy, opisu i zdjęcia kategorii, ma być ustawiona jako zdjęcie lub zdjęcie po lewej stronie. Sekcja może być domyślnie zwinięta lub rozwinięta.

Lista towarów

Podobnie, jak w przypadku strony głównej konfigurujemy wygląd listy towarów. Dodatkowo możemy wskazać domyślny widok listy towarów, prezentację atrybutów a także zdecydować czy pozwolisz na zakup towarów wielowariantowych z listy towarów.

W Kreatorze Szablonu Szafir dostępny jest jeden widok listy towarów:

 

Krok 3 – Koszyk

Po utworzeniu szczegółów towaru przechodzimy do wyboru wersji koszyka dostępnego
w e-Sklepie. W Kreatorze Szablonu Szafir dostępne są dwie wersje koszyka.

Dodatkowo na stronie koszyka możesz wskazać sposób prezentacji przeliczników jednostek miary i zdecydować o wyświetlaniu punktów lojalnościowych:

Następnie możemy przejść do modyfikacji wyglądu naszego szablonu. W tym celu należy przejść do zakładki Style.

Style

Jak zmienić kolory, czcionki oraz ikony?

Po dodaniu elementów strony możemy dodatkowo podejrzeć, jak będzie wyglądał nasz przyszły szablon. W tym celu należy przejść do zakładki Style.

Dodatkowo w zakładce Style możemy zmodyfikować wygląd naszego szablonu. Zmianie podlega motyw kolorystyczny.

Motyw kolorystyczny

Aby zmienić kolor naszego szablonu należy przejść do sekcji Motyw kolorystyczny, gdzie do wyboru przygotowaliśmy 3 gotowe motywy.

Każdy z motywów możemy edytować według indywidualnych preferencji. Możemy zmodyfikować kolor poszczególnych elementów (m.in.: tło strony, tło nagłówka, nazwę towaru). Zmiany należy zapisać klikając Zapisz. Jeśli wykonane zmiany nie są zadowalające, możemy przywrócić ustawienia domyśle dla danego motywu kolorystycznego, klikając przycisk Przywróć.

Możliwe jest również wprowadzenie szesnastkowego zapisu kolorów. Heksadecymalny zapis kolorów dla poszczególnych sekcji w szablonie dostępny jest podczas edycji wybranego motywu kolorystycznego.

Czcionki

W zależności od potrzeb istnieje możliwość wybrania czcionki. Dla naszych klientów udostępniliśmy jej 13 różnych typów. Pod nazwą każdej z nich znajduje się przykładowy wygląd w różnych formatach.

 

Ikony

Ostatnim elementem, który możemy modyfikować z poziomu zakładki Style jest wygląd ikon. Mamy do wyboru 3 różne warianty wyglądu ikon. Dodatkowo istnieje możliwość wyboru w jakiej postaci wyświetla się ikona koszyka (torba, wózek lub koszyk) oraz loader.

Wskazówka

Od teraz możesz zmienić rodzaj loadera, wybierając jedną z 5 propozycji widocznych powyżej.

 

Funkcja cofania zmian

Funkcja odpowiadająca za cofanie oraz powtórzenie wprowadzonych zmian oznaczona jest symbolem strzałek, zapamiętuje ona do 30 ostatnich modyfikacji szablonu. Nieaktywna strzałka oznacza, że aktualnie nie ma dostępnych kroków.

Mamy możliwość przywracania zmian: dodawania/ usuwania elementów oraz edycji ich położenia, a także stylu w szablonie.

Wskazówka

Funkcję cofania obejmuje zmiany motywu kolorystycznego, natomiast edycja poszczególnych kolorów w motywie nie jest zapisywana.

Generowanie i wgrywanie szablonu

Po zaprojektowaniu wyglądu szablonu możemy go wygenerować i pobrać na dysk korzystając
z przycisku Generuj widocznego w prawym górnym rogu:

Obok przycisku Generuj dostępna jest również opcja Importuj szablon, umożliwiająca wgranie wcześniej zapisanego szablonu z dysku i ponowną jego edycję.

W przypadku prawidłowego wygenerowania szablonu wyświetlony zostanie komunikat informujący o tym fakcie i pobrany plik.

Pobrany szablon należy zaimportować w Comarch e-Sklep w zakładce Wygląd sklepu/ Zaimportuj szablon z Kreatora Wyglądu.

W szablonie Szafir znajduje się informacja na temat godziny wygenerowania szablonu w Kreatorze. Taka informacja znajduje się w panelu administracyjnym w menu: Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki), gdzie należy wybrać opcję Edytuj ustawienia zaawansowane, a potem ponownie Więcej/ Edytuj HTML. Następnie z listy plików należy wybrać _layout.html. Informacje na temat modyfikacji, w tym godzina ostatniej modyfikacji, znajdują się nad oknem edycji pliku. Jeżeli plik nie był modyfikowany, wówczas godzina odpowiada godzinie wygenerowania szablonu w kreatorze.

W przypadku braku obowiązkowych elementów szablonu nie będzie możliwe jego wygenerowanie. przycisk Generuj będzie wyszarzały, a w prawym dolnym rogu pojawi się komunikat „Uzupełnij elementy wymagane w szablonie”. Sekcje, gdzie element nie został wybrany będą się wyświetlać z odpowiednią ikoną.

 

Aktualizacja szablonu

W Kreatorze szablonu Szafir znajduje się opcja aktualizacji poprzednich wersji szablonu. W celu zaktualizowania całego szablonu należy wgrać plik z poprzednim szablonem do Kreatora szablonu Szafir według tej instrukcji:

Dzięki temu w prosty sposób można starsze szablony Szafir podnieść do wersji aktualnej.

Więcej informacji

Więcej informacji można znaleźć w artykułach o wyglądzie sklepu oraz o dostosowaniu wyglądu.