Kreator wyglądu Comarch e-Sklep

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łasnie ona wpływa na całościowe wrażenia użytkowników i ich proces zakupowy. Dzięki narzędziu – Kreator Wyglądu Comarch e-Sklep, właściciele sklepów mają możliwość stworzyć swój własny, niepowtarzalny szablon, który będzie dostosowany do ich preferencji oraz do potrzeb użytkowników.

Najważniejsze zalety Kreatora Wyglądu Comarch e-Sklep to:

  • jest w pełni darmowy dla klientów Comarch e-Sklep,
  • stworzony szablon jest dostosowany do wyświetlania na różnych urządzeniach (RWD),
  • kreator nie wymaga technicznej wiedzy. Jest intuicyjny i wystarczy sama przeglądarka, aby go używać.
Wskazówka
Kreator jest dostępny pod linkiem: Kreator szablonu Comarch e-Sklep

Od wersji 2019.6 w panelu administracyjnym został dodany parametr Kreator wyglądu, który kieruje bezpośrednio na stronę Kreatora wyglądu Comarch e-Sklep. Odnośnik znajduje się w panelu administracyjnym e-Sklepu Wygląd sklepu/ Kreator wyglądu.

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.

W ramach kreatora stworzysz wszystkie niezbędne obszary sklepu:

  • stronę główną,
  • listę towarów,
  • szczegóły towaru.

Po utworzeniu szkieletu sklepu, przychodzi czas na modyfikację oprawy wizualnej szablonu. Możesz zmieniać kolory elementów znajdujących się na stronie, ikonki, a także czcionkę. Wszystko po to, aby stworzyć niepowtarzalny, atrakcyjny sklep dostosowany do najnowszych trendów e-commerce.

Kto może używać tej opcji

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

  • Comarch e-Sklep obsługujący procesy B2C,
  • szerokość ekranu powyżej 1280 px, a zalecana to 1920 px,
  • oraz jedną z następujących przeglądarek:

Przeglądarki
  • Mozilla Firefox – aktualna wersja przeglądarki, nie starsza niż trzy miesiące,
  • Google Chrome – aktualna wersja przeglądarki, nie starsza niż trzy miesiące,
  • Microsoft Edge – nie wspierana dla kreatora wyglądu,
  • Internet Explorer – nie wspierana dla kreatora wyglądu.

Uwaga
Kreator wyglądu Comarch e-Sklep dostępny jest w wersji tylko na przeglądarkę internetową, nie jest dostępny na urządzeniach mobilnych.

 

Wersje Topaza

Od wersji 2021 w nagłówku Kreatora wyglądu dostępna jest opcja Wybierz wersję:

która umożliwia stworzenie szablonu Topaz w najnowszej wersji, a po wybraniu opcji 2020 – szablonu w wersji starszej.

Uwaga
W Comarch e-Sklep 2021 dostępy jest filtr img2, który standardowo został obsłużony w szablonie Topaz w wersji 2021. Jeżeli zdjęcia w Twoim szablonie Topaz nie wyświetlają się, a posiadasz Comarch e-Sklep w wersji 2020.4 lub starszej niezbędne jest wygenerowanie szablonu Topaz w wersji 2020. Dowiedz się więcej lub zaktualizuj szablon.

Zaczynamy

Aby rozpocząć tworzenie szablonu należy przejść na stronę Kreator. Od wersji 2021 dostępne są opcje:

Opcja Stwórz nowy szablon umożliwia zbudowanie od początku nowego szablonu Topazu według Twojego indywidualnego pomysłu.

Pod przyciskiem Edytuj gotowy szablon udostępniono natomiast cztery gotowe wersje szablonu Topaz 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 szablonu Topaz, a następnie łatwo go edytować i w ten sposób szybko dostosować do swoich potrzeb. Po wybraniu szablonu do edycji należy kliknąć w Wybierz i przejść do podstawowych funkcji Kreatora, które pozwalają na dalsze modyfikacje szablonu lub od razu wygenerować przygotowaną wersję Topaza.

Następnie należy zapoznać się z podstawowymi instrukcjami dotyczącymi tworzenia szablonów. Po ich przeczytaniu możemy przejść do tworzenia szablonu.

Wskazówka
Na samym początku warto nazwać swój przyszły szablon. Można to zrobić wpisując nazwę w lewym górnym rogu, zastępując nazwę „Topaz (2019.5.1)”. 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.

Kreator umożliwia wybór wersji językowej w której chcesz pracować. Wersje do wyboru to: język polski, angielski, niemiecki oraz francuski. Język wybieramy klikając na flagę danego kraju w lewym górnym rogu menu. Przy podglądzie naszych prac na pełnym ekranie, wybrany język zostaje zachowany i szablon wyświetla się w wybranej wersji językowej.

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 się składać z następujących sekcji:

  • Nagłówek,
  • Baner,
  • Polecane (niewymagany),
  • Newsletter (niewymagany),
  • Blog,
  • Slider producentów,
  • Slider marek,
  • Stopka,
  • Element tekstowy (od wersji 2021.2.)

Po rozwinięciu każdej z sekcji powinny się ukazać dostępne elementy:

Następnie metodą „przeciągnij i upuść” przenosimy wybrane elementy na obszar po prawej stronie:

Analogicznie robimy z pozostałymi elementami.

Sekcja „Nagłówek” prezentuje trzy widoki. Trzeci z nich zawiera pionowe menu, które pozwala wyświetlić standardowo trzy poziomy kategorii produktowych. Pierwszy poziom można dodatkowo konfigurować w zakresie ilości pokazywanych kategorii. W tym celu w menu Wygląd sklepu/ Ustawienia/ Ustawienia szablonu dodano nowy parametr: widok pierwszego poziomu menu głównego (dla trzeciego typu nagłówka) z następującymi opcjami: wygodny (ustawiony domyślnie i pozwalający wyświetlić maksymalnie 10 kategorii w pierwszym poziomie menu) oraz kompaktowy (wyświetla do 16 kategorii w pierwszym poziomie menu). Ten typ nagłówka połączony jest z bannerem (o zalecanych wymiarach 1118px x 534px), widocznym tylko na stronie głównej.

Od wersji 2021 wszystkie rodzaje nagłówków dostępnych w Kreatorze mają funkcję tzw. przyklejonego nagłówka. Przy przewijaniu strony sklepu w dół, u góry ekranu zawsze widoczny jest pasek z częścią elementów nagłówka (m.in. menu kategorii oraz wyszukiwarka). Dzięki temu przeglądający ofertę e-Sklepu, w każdym miejscu strony ma dostęp do skróconej wersji nagłówka strony.

Sekcja „Baner” pozwala wybrać jedną z sześciu możliwości prezentacji banerów. W tym artykule poznasz wymagania zdjęć do bannerów.

Sekcja „Polecane” 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:

Wskazówka
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).
Wskazówka
Podczas tworzenia szablonu Topaz w Kreatorze wyglądu Comarch po dodaniu sekcji towary polecane można określić typ wyświetlanych produktów. W wersji 2021.2 nazwa sekcji jest zależna oraz adekwatna do określonego typu. Daną nazwę można modyfikować w tłumaczeniach szablonu.

Sekcja „Newsletter” pozwala dodać jeden z trzech wariantów zapisu klientów do subskrypcji. Jeden z nich jest w formie wyskakującego okienka (pop-up), który prezentowany jest wyłącznie na stronie głównej e-Sklepu. Dodatkowo, w wersji przeglądarkowej szablonu, w nowym newsletterze widoczny jest banner (niedostępny w wersji mobilnej) o wymiarach 275px x 475px. Wszystkie teksty dostępne w nowym newsletterze są edytowalne w ustawieniach szablonu w menu Wygląd sklepu/ Ustawienia/ Bannery/ Newsletter banner. Ten typ newslettera może być używany jednocześnie z pozostałymi wersjami newslettera dostępnymi w szablonie Topaz.

Wskazówka
Od wersji 2021.2 w kreatorze szablonu Topaz usprawnione zostało wyświetlanie bloczka z newsletterem w wersji pop-up. W stopce dodano parametr Pokaż górne elementy. Po odznaczeniu tego parametru, bloczek z newsletterem zostaje ukryty.

Sekcja „Slider marek” umożliwia dodanie do szablonu dwóch widoków slidera marek. Pod przyciskiem Opcje możliwe jest wybranie jednego z trzech sposobów jego prezentacji: brak wyszarzenia (dodane logo mają zachowane oryginalne kolory), wyszarzenie (dodane logo jest szare, kolor pojawia się po najechaniu kursorem myszki na logo), błysk (po najechaniu myszką, na logo pojawia się animacja świetlna). 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 stronach: głównej, liście towarów i szczegółach towaru.

Sekcja „Slider producentów ” umożliwia dodanie do szablonu dwóch widoków slidera producentów. Pod przyciskiem Opcje możliwe jest wybranie jednego z trzech sposobów jego prezentacji: brak wyszarzenia (dodane logo mają zachowane oryginalne kolory), wyszarzenie (dodane logo jest szare, kolor pojawia się po najechaniu kursorem myszki na logo), błysk (po najechaniu myszką, na logo pojawia się animacja świetlna).  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 stronach: głównej, liście towarów i szczegółach towaru.

W wersji 2021.2 w kreatorze wyglądu Comarch utworzono obiekt „Element Tekstowy”. Element tekstowy pozwala na zamieszczenie dłuższego opisu, który będzie wyświetlany na stronie głównej Comarch e-Sklep. W kreatorze wyglądu Comarch są do wyboru dwa warianty:

  • Element tekstowy z samym tekstem,
  • Element tekstowy z możliwością dodania zdjęcia;

Tekst wprowadza się edytując obiekt tekstowy w ustawieniach szablonu: Wygląd sklepu/Ustawienia/Edytuj ustawienia zaawansowane/Obiekty -> textElement

Wskazówka
Zmieniono nazewnictwo dla elementów, które posiadają własne obiekty i mogą się powtarzać. Wprowadzono nazewnictwo bardziej przyjazne dla użytkowników Kreatora dla niżej wymienionych elementów:

  • element tekstowy,
  • proponowane.

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 lub przechodząc do zakładki Style. Więcej o tej zakładce w rozdziale Style.

Uwaga
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

Następnie należy utworzyć widok listy towarów. W tym celu klikamy w Kreatorze „Następna” w prawym dolnym rogu lub przechodzimy do zakładki z poziomu listy:

Podobnie, jak w przypadku strony głównej konfigurujemy wygląd listy towarów. Dodatkowo możemy wskazać liczbę towarów, jaka ma się wyświetlać na liście (maksymalnie 50).

Krok 3 – Szczegóły towaru

Po utworzeniu listy towarów przechodzimy do tworzenia szczegółów towaru.

Wskazówka
Warto zwrócić uwagę, że na każdej stronie sklepu możemy ustawić różne sekcje towarów polecanych o różnych typach (przykładowo na szczegółach towaru polecane towary mogą się inaczej wyświetlać niż na liście towarów).

Krok 4 – Koszyk

Po utworzeniu szczegółów towaru przechodzimy do wyboru wersji koszyka dostępnego w e-Sklepie.

W wersji 2021.2 dodano dwa nowe widoki koszyków:

  • Koszyk 4 krokowy
  • Koszyk 3 krokowy

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

Style

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 podlegają:

  • motyw kolorystyczny,
  • czcionka,
  • ikony.

Motyw kolorystyczny

Aby zmienić kolor naszego szablonu należy przejść do sekcji Motyw kolorystyczny, gdzie przygotowaliśmy 5 podstawowych motywów kolorystycznych.

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, w tym celu wybierz „Przywróć poprzednie”. Dodatkowo jeśli wszystkie wymagane elementy szablonu są uzupełnione, istnieje możliwość wygenerowania szablonu z poziomu edycji motywu kolorystycznego.

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 6 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 lub wózek).

Wskazówka
Pamiętaj o zapisaniu zmian!

Generowanie i wgrywanie szablonu

Po zaprojektowaniu wyglądu szablonu możemy go wygenerować i pobrać na dysk korzystając z przycisku Generuj widocznego na zakładce Szablon:

lub na zakładce Style po najechaniu kursorem myszy na strzałkę u dołu strony:

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ę.

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

Uwaga
Opcja Zaimportuj szablon z Kreatora Wyglądu widoczna w zakładce Wygląd sklepu jest dostępna dla sklepów od wersji 2021. W przypadku starszych wersji sklepu szablon może zostać wgrany pod ścieżką: Wygląd sklepu/Ustawienia/Edytuj ustawienia zaawansowane, gdzie znajduje się zakładka Import szablonu.

Od wersji 2020 w szablonie Topaz została dodana 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.

Uwaga
W przypadku nieuzupełnienia szablonu o wymagane elementy po naciśnięciu przycisku Generuj, w prawnym dolnym rogu strony, pojawi się komunikat komunikat „Uzupełnij elementy wymagane w szablonie”. Sekcje, gdzie element nie został wybrany będą się wyświetlać z odpowiednią ikonką.

Aktualizacja szablonu

Od wersji 2021 wprowadzono możliwość automatycznej aktualizacji wcześniej wygenerowanych wersji szablonu Topaz do aktualnej. W celu zaktualizowania całego szablonu należy wgrać plik z poprzednim szablonem do kreatora wyglądu,  według tej instrukcji:

  • po uruchomieniu strony kreatora wybierz opcję: Stwórz nowy szablon,
  • upewnij się do jakiej wersji chcesz zaktualizować swój szablon. W nagłówku Kreatora wyglądu dostępna jest opcja Wybierz wersję, która pozwala zaktualizować szablon Topaz do wybranej w tym polu wersji.
  • następnie zaimportuj plik z szablonem, który ma być zaktualizowany używając przycisku Importuj szablon,
  • po wgraniu szablonu do aktualizacji użyj opcji Generuj. 

Dzięki temu w prosty sposób można szablon Topaz, starsze niż 2020.4, 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.

Czy ten artykuł był pomocny?