Kreator wyglądu Topaz (B2C)

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:

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

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. 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ż detaliczna przeznaczona jest dla użytkowników, którzy chcą sprzedawać swoje produkty głównie klientom indywidualnym. 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 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:

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 pięć widoków. 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:

W piątym możesz zaprezentować zdjęcia kategorii w formie miniatur w nagłówku. Zdjęcia kategorii dodane w systemie ERP są pomniejszone i są wyświetlane przy nazwie kategorii.

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 „Nagłówek” posiada dodatkowe opcje do ustawienia. Z listy menu, można decydować o:

Banner

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. Jest on widoczna tylko dla strony głównej i listy towarowej.

Banner popup

Sekcja „Banner popup” 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.

Banner promocyjny

Banner promocyjny to banner, który wyświetli się na stronie głównej Twojego e-Sklepu. Będzie prezentował typ towaru, który wskażesz. Taki rodzaj banneru pomoże Ci w prezentacji towarów, które zostały objęte na przykład promocją.

Widget

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

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 Topaz w Kreatorze wyglądu Comarch po dodaniu sekcji towary proponowane 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

Sekcja „Newsletter” pozwala dodać wybrany wariant zapisu klientów do subskrypcji.

Dwa z nich są w formie wyskakującego okienka (pop-up), które prezentowane są wyłącznie na stronie głównej e-Sklepu (newsletter-3, newsletter-4). Dodatkowo, w wersji przeglądarkowej szablonu, w newsletterze w formie popup (newsletter-3) 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. Te typy newslettera mogą być używane jednocześnie z pozostałymi wersjami newslettera dostępnymi w szablonie Topaz.

Sekcja z filmami

Sekcja z filmami daje możliwość dodania filmów promujących nie tylko produkty, ale również Twoją firmę lub producentów czy marki. Filmy dodasz z poziomu panelu administracyjnego przechodząc do Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Strona główna. W tej sekcji możesz zaprezentować filmy: udostępnione w sekcji Ustawienia/Pliki użytkownika, opublikowane w portalu Youtube, dodane na zewnętrznym hostingu.

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:

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

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

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:

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 zakładce Kafle, możemy dopasować wygląd kafli do swoich preferencji:

W Kreatorze dostępnych jest 5 widoków listy towarów:

 

Dodatkowo poziomu listy towarów możliwe jest także dostosowanie wyglądu kafla. Dostępne są trzy warianty:

Trzeci z wariantów kafli jest ustawiony jako domyślny. Posiada on ikonę koszyka, dzięki czemu można dodać produkty do koszyka z poziomu 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:

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

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, czy nawet drugorzędny kolor tekstu w newsletterze). 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

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.

Styl okien i przycisków

Ostatnim elementem, który możemy modyfikować z poziomu zakładki Style jest styl okien i przycisków. Mamy do wyboru 3 różne warianty zaokrągleń.

 

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:

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.