Kreator wyglądu szablonu Rubin

Wstęp

Jednym z kluczowych elementów wpływających na sukces w branży e-commerce jest odpowiednia oprawa wizualna sklepu internetowego. To ona w dużej mierze kształtuje wrażenia użytkowników oraz wpływa na przebieg ich procesu zakupowego. Dzięki narzędziu Kreator Szablonu Rubin (B2B) właściciele sklepów mają możliwość stworzenia unikalnego, dopasowanego szablonu, który będzie obsługiwał zarówno klientów detalicznych, jak i firmy, łącząc modele B2B oraz B2C.

Zastosowanie

Kreator Szablonu Rubin to intuicyjne narzędzie do projektowania wyglądu sklepu. Wszystko odbywa się na poziomie strony internetowej, gdzie przy pomocy metody „przeciągnij i upuść” możesz stworzyć szablon idealnie pasujący do Twojego sklepu.

Kreator pozwala na zaprojektowanie wszystkich kluczowych obszarów sklepu, w tym:

Kto może używać tej opcji?

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

Wskazówka

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

Zaczynamy!

Jak zaprojektować układ szablonu?

Aby rozpocząć projektowanie szablonu, należy udać się na stronę Kreatora Wyglądu, gdzie pojawi się powitalny komunikat. Na początku trzeba wybrać, dla jakiego typu sprzedaży ma być stworzony szablon – detalicznej lub hurtowej. Sprzedaż hurtowa jest dedykowana tym, którzy chcą oferować swoje produkty także klientom biznesowym w większych ilościach. Po dokonaniu wyboru modelu sprzedaży, wystarczy kliknąć przycisk „Rozpocznij pracę”. Następnie, użytkownik będzie miał możliwość stworzenia nowego szablonu lub edytowania jednego z dostępnych, gotowych szablonów.

 

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 Rubin według Twojego indywidualnego pomysłu.

 

W ramach szablonów B2B do wyboru zostały udostępnione szablon Rubin oraz szablon Szafir w trzech wersjach kolorystycznych. Są to gotowe wersje szablonów z możliwością ich edycji. Dzięki temu nie musisz zaczynać pracy od zera – wystarczy, że wybierzesz jeden z dostępnych szablonów, a następnie łatwo dopasujesz go do swoich wymagań. Podwójne kliknięcie na wybrany kafelek pozwala przejść do kolejnego etapu.

W trzech prostych krokach zapoznasz się z podstawowymi funkcjami kreatora. Po ich przejściu, możesz rozpocząć dalsze dostosowywanie szablonu lub od razu wygenerować przygotowaną wersję szablonu Rubin.

Od czego zacząć?

Wybierz preferowaną wersję językową Kreatora i rozpocznij tworzenie swojego szablonu. Dostępne opcje to: język polski, angielski, niemiecki oraz francuski. Aby zmienić język, kliknij strzałkę obok flagi i nazwy języka w lewym dolnym rogu. Po wybraniu języka, przy podglądzie na pełnym ekranie, szablon będzie wyświetlany w wybranej wersji językowej.

Po ustawieniu wersji językowej dla Kreatora, warto nadać nazwę swojemu szablonowi. Można to zrobić klikając „Zmień” w lewym górnym rogu, a następnie wpisując nową nazwę, która zastąpi domyślną nazwę „Rubin”. Ta nazwa będzie widoczna po zaimportowaniu szablonu do panelu administracyjnego oraz po wyeksportowaniu go do pliku XML, wraz z datą i godziną wygenerowania szablonu.

Krok 1 – Strona główna

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

Po kliknięciu w strzałkę, sekcje rozwiną się i pokażą 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 funkcji związanych ze składaniem Zapytań o wycenę.

Bannery

Sekcja „Bannery” pozwala dodać slider. Informacje dotyczące rekomendowanych rozmiarów obrazków w bannerach opisaliśmy w tym artykule.

Widget

Sekcja „Widget” pozwala dodać jeden element, który pozwoli zaprezentować następujące funkcj:

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

Producent, marka, ręcznie wybrane produkty, kategoria oraz ostatnio oglądane są obsługiwane w ramach lokalnego obiektu "Siatka towarów". Aby wprowadzić zmiany w ustawieniach dla jednego z tych typów, należy przejść do panelu administracyjnego do opcji Wygląd sklepu > Ustawienia >Ustawienia zaawansowane, a następnie do zakładki Obiekty. W szczegółach wybranego obiektu (Siatka towarów) można określić, które produkty będą wyświetlane w sekcji "Proponowane". W przypadku wyboru "Producenta" lub "Marki" konieczne jest ręczne wskazanie odpowiedniego producenta lub marki.

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

Dla newslettera możliwe jest ustawienie stałej sekcji na stornie głównej lub newslettera w postaci popupu:

Slider marek

Sekcja "Slider marek" pozwala na dodanie do szablonu widoku slidera z logo marek. W sliderze wyświetlane są logotypy marek, które zostały zaimportowane z systemu ERP. Po kliknięciu na wybrane logo, użytkownik zobaczy listę produktów przypisanych do danej marki. Sekcje te mogą być umieszczone w dowolnym miejscu na stronie głównej szablonu.

Slider producentów

Sekcja "Slider producentów" pozwala na dodanie do szablonu widoku slidera z logo producentów. W sliderze wyświetlane są logotypy producentów zaimportowane z systemu ERP. Po kliknięciu na wybrane logo, użytkownik zobaczy listę produktów przypisanych do danego producenta. Sekcje te mogą być umieszczone w dowolnym miejscu na stronie głównej szablonu.

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  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 czy obowiązujących rabatach rabatach. Banner możesz dodać tylko do strony głównej. Obrazki są możliwe do edycji w ramach elementu homepage-small w panelu administracyjnym e-Sklepu w obszarze: 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/ Stopka. Dla każdej z sekcji wyświetla się jej utworzona w panelu nazwa. W stopce znajduje się komunikat @Comarch SA 2025. 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. Możemy dodać ikony naszych dostawców oraz form płatności wykorzystywanych w sklepie w ramach ustawień Wygląd Sklepu > Ustawienia > Bannery w sekcjach LogisticsPartners oraz PaymentOperators.

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:

Banner

Sekcja "Banner" daje możliwość dodania do listy slideru, dzięki czemu masz możliwość wzbogacenia kategorii towarowych o obrazki.

 

Panel filtra

Sekcja "Panel filtra" umożliwia wybór liczby wyświetlanych wartości filtrów a także o tym czy filtrowanie powinno odbywać się po klinićiu przycisku "Zastosuj".

Z tego poziomu możemy także wybrać elementy prezentowane w panelu filtrów.

Opis kategorii

W sekcji możesz zdecydować, czy opis ma być domyślnie zwinięty lub rozwinięty.

Lista towarów

Podobnie, jak w przypadku strony głównej konfigurujemy wygląd listy towarów. Dodatkowo możemy wskazać liczbę wyświetlanych towarów, 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 Rubin dostępny jest jeden widok listy towarów:

 

Krok 3 - Koszyk

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

Dodatkowo na stronie koszyka możesz wskazać sposób prezentacji przeliczników jednostek miary:

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.

Motyw kolorystyczny

W tym momencie dla szablonu Rubin został przygotowany jeden motyw kolorystyczny:

Motyw możemy zmieniać 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 tym momencie w ramach szablu Rubin została udostępniona jedna czcionka:

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.

 

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 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 Rubin znajduje się opcja aktualizacji poprzednich wersji szablonu. W celu zaktualizowania całego szablonu należy wgrać plik z poprzednim szablonem do Kreatora szablonu Rubin według tej instrukcji:

Dzięki temu w prosty sposób można starsze szablony Rubin 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.