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łaśnie 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.

Kreator jest dostępny pod linkiem: Kreator szablonu 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. Dodatkowo, stworzony szablon jest dostosowany do wyświetlania na różnych urządzeniach (RWD).

W ramach kreatora zaprojektujesz wszystkie niezbędne obszary sklepu:

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

Po utworzeniu szkieletu e-Sklepu, przychodzi czas na modyfikację oprawy wizualnej szablonu. Możesz dowolnie zmieniać kolory elementów znajdujących się na stronie, ikony, a także czcionkę.

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 przeglądarek internetowych w aktualnej wersji.

Wskazówka
Kreator wyglądu Comarch e-Sklep 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. Po kliknięciu „Dalej” 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 Topazu według Twojego indywidualnego pomysłu.

Wskazówka
Szablon Topaz – Demo jest gotowym szablonem, który możesz zainstalować bezpośrednio z obszaru Wygląd sklepu/Gotowe szablony Comarch.

Pozostałe sześć opcji do wyboru to 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, 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 Topaz.

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ę „Topaz (2022.5)”. 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:

  • Nagłówek,
  • Baner,
  • Polecane,
  • Newsletter,
  • Blog,
  • Slider producentów,
  • Slider marek,
  • Element tekstowy,
  • Banner informacyjny,
  • Stopka.

Po rozwinięciu każdej z sekcji ukażą się dostepne 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 cztery 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.

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 „Banner” pozwala wybrać jedną z sześciu możliwości prezentacji banerów. Informacje dotyczące rekomendowanych rozmiarów obrazków w bannerach opisaliśmy w tym artykule.

 

Polecane

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:

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 Topaz w Kreatorze wyglądu Comarch 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.

Newsletter

Sekcja „Newsletter” pozwala dodać wybrany wariant 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 (newsletter-3). Dodatkowo, w wersji przeglądarkowej szablonu, w newsletterze w formie popup 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.

Slider marek

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.

Slider producentów

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.

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:

  • text-el-no-photo-mp-1 – element bez obrazka,
  • text-el-photo-mp-2 – element z obrazkiem.

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. Dostępny jest podgląd w wersji mobilnej i desktopowej.

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

Banner informacyjny pozwala na zaprezentowanie w przejrzysty sposób korzyści z zakupach w Twoim sklepie. Dotyczą one obszarów: dostawy, jakości i kontaktu z klientem. Banner możesz dodać tylko do strony głównej lub do wszystkich stron.

Sekcja Odkryj Comarch e-Sklep różni się prezentacją oraz elementami między bannerami i zawiera:

  • info-banner-1 – element z ikonkami i podpisem
    • Szybka dostawa,
    • Gwarancja jakości,
    • Odbiór osobisty,
    • Reklamacje,
    • Zwroty towarów,

  • info-banner-2 – element z ikonkami i krótką informacją
    • Ekspresowa wysyłka,
    • Darmowa dostawa,
    • Obsługa klienta,

  • info-banner-2 – element z ikonkami i krótkim opisem
    • Ekspresowa dostawa,
    • Darmowa dostawa,
    • Strefa kontaktu.

Stopka

Sekcja „Stopka” zawiera trzy widoki do wyboru.

W każdym widoku 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.

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:

 

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):

W Kreatorze dostępne są 4 widoki listy towarów:

Po najechaniu myszką na dany produkt na liście towarów została obsłużona możliwość zmiany zdjęcia na drugie. Stanie się tak wówczas, gdy danemu produktowi zostały przypisane min. dwa zdjęcia w systemie ERP.

Wskazówka
Zalecamy dodawanie zdjęć produktów z białym tłem.

W niektórych widokach listy towarów przycisk dodawania do porównania oraz oceny jest widoczny bez konieczności logowania się do e-Sklepu.

Na liście towarów przy nazwie produktu dodany jest także tooltip, który po najechaniu kursorem na nazwę towaru wyświetli pełną treść (w przypadku długich nazw).

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 Kreatorze Wyglądu dostępne są dwie wersje koszyka:

  • 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

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

  • motyw kolorystyczny,
  • czcionka,
  • ikony.

Motyw kolorystyczny

Aby zmienić kolor naszego szablonu należy przejść do sekcji Motyw kolorystyczny, gdzie do wyboru przygotowaliśmy 6 gotowych motywów.

Wskazówka
W aktualnej wersji Kreatora dodaliśmy nowy, ciemny motyw kolorystyczny.

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.

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 Topaz 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ą.

 

Kreatorze wyglądu istnieje również możliwość cofania się podczas tworzenia szablonu, w ramach której obsługujemy do 30 kroków w wstecz. Dodatkowo możemy także wykonywać krok do przodu. Zapisywane są wszystkie zmiany na elementach, informacje odnośnie styli, czcionek, ikonach oraz nazwie szablonu.

Aktualizacja szablonu

W Kreatorze Wyglądu znajduje się opcja aktualizacji poprzednich wersji szablonu. 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 projekt,
  • wybierz Nowy szablon,
  • w prawym górnym rogu wybierz opcję Importuj szablon,

  • następnie zaimportuj plik z szablonem, który ma być zaktualizowany. Po poprawnym zaimportowaniu szablonu otrzymasz informację zwrotną:

  • po wgraniu szablonu do aktualizacji użyj opcji Generuj. 

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

Przywracanie koszyka dla klientów niezalogowanych

W szablonie Topaz przywracany jest koszyk  dla niezalogowanych klientów. Po opuszczeniu strony lub wyłączeniu przeglądarki klient niezalogowany powracający do sklepu będzie widział towary dodane do koszyka wcześniej. Proces ten działa dzięki zapisywaniu informacji w ciasteczkach.

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?