Comarch e-Sklep to jedno z najpopularniejszych rozwiązań e-commerce w Polsce, szczególnie wśród firm korzystających z systemów Comarch ERP. Standardowe szablony – Topaz, Szafir czy One Page Shop – dają solidną bazę, ale dla wielu biznesów to za mało. Klient, który chce się wyróżnić, potrzebuje dedykowanego szablonu Comarch e-Sklep, zaprojektowanego pod jego markę i specyfikę branży.
Właśnie z takim wyzwaniem przyszła do nas firma stojąca za sklepem Drillo.pl – internetowym sklepem z narzędziami i elektronarzędziami. Poniżej opisujemy cały proces: od analizy, przez projekt UX/UI, po kodowanie szablonu i wdrożenie rozszerzeń wykraczających poza standardowe możliwości silnika.
Cel projektu – wydajny i przyjazny sklep internetowy
Głównym zamiarem było stworzenie wydajnego i przyjaznego dla użytkownika sklepu internetowego, który nie tylko będzie ładnie wyglądał, ale przede wszystkim będzie konwertował odwiedzających w kupujących. Drillo.pl oferuje szeroki asortyment narzędzi marek takich jak Makita, DeWalt, Metabo czy Stanley – klienci oczekują szybkiego dostępu do produktów, czytelnych kart produktowych i bezproblemowego procesu zakupowego.
Standardowe szablony Comarch e-Sklep, choć responsywne i funkcjonalne, nie dawały wystarczającej swobody w dopasowaniu wyglądu i zachowania sklepu do specyfiki branży narzędziowej. Dlatego postawiliśmy na indywidualny szablon – zaprojektowany od zera.
Etap 1: Analiza konkurencji i audyt UX
Każdy dobry projekt zaczyna się od researchu. Przed przystąpieniem do prac nad makietą przeprowadziliśmy szczegółową analizę sklepów konkurencji w branży narzędziowej. Sprawdziliśmy, co działa dobrze u innych – układ nawigacji, prezentację kategorii, sposób filtrowania produktów – i zidentyfikowaliśmy elementy, które można zrobić lepiej.
Na podstawie tej analizy zdefiniowaliśmy kluczowe założenia projektowe:
- Przejrzysta nawigacja po szerokim asortymencie (tysiące SKU w wielu kategoriach)
- Szybki dostęp do kluczowych informacji o produkcie – cena, dostępność, parametry techniczne
- Uproszczony proces zakupowy minimalizujący liczbę kroków do finalizacji zamówienia
- Pełna responsywność – równie dobra obsługa na desktop, tablet i mobile
Etap 2: Projekt UX/UI na podstawie brandbooka
Makietę UX/UI stworzyliśmy na podstawie brandbooka dostarczonego przez klienta. To istotny element procesu – dedykowany szablon Comarch e-Sklep powinien być spójny z identyfikacją wizualną marki, nie tylko ładny sam w sobie.
Przygotowaliśmy komplet makiet dla trzech breakpointów:
- Desktop – pełna wersja z rozbudowaną nawigacją i szerokim układem kart produktowych
- Tablet – zoptymalizowany układ z dostosowaną siatką i dotykowymi elementami interakcji
- Mobile – priorytet na szybkość ładowania, duże przyciski CTA i uproszczoną nawigację
Makiety zostały przedstawione klientowi do akceptacji. Dopiero po zatwierdzeniu finalnego projektu przeszliśmy do kodowania – dzięki temu unikamy kosztownych zmian na etapie implementacji.
Etap 3: Kodowanie szablonu – HTML, CSS, JavaScript i Liquid
Silnik Comarch e-Sklep wykorzystuje technologię szablonów opartą na DotLiquid – języku szablonowym, który pozwala dynamicznie wyświetlać dane produktowe, koszyk, kategorie i inne elementy sklepu. Kodowanie dedykowanego szablonu to praca na styku czterech technologii:
- HTML – struktura semantyczna, zoptymalizowana pod SEO i dostępność (WCAG)
- CSS – pełna kontrola nad wyglądem, z uwzględnieniem responsywności (RWD) na wszystkich urządzeniach
- JavaScript – interaktywne elementy interfejsu, dynamiczne filtrowanie, obsługa zdarzeń
- Liquid (DotLiquid) – warstwa łącząca szablon z danymi z panelu Comarch e-Sklep i systemu ERP
Znajomość specyfiki silnika Comarch e-Sklep jest tutaj kluczowa. To nie jest standardowy frontend – trzeba wiedzieć, jakie obiekty i zmienne udostępnia silnik, jak działają sloty szablonów, jak poprawnie obsługiwać bannery, obiekty lokalne i synchronizację z ERP. Bez tego doświadczenia łatwo o błędy, które ujawniają się dopiero na produkcji.
Etap 4: Rozszerzenia wykraczające poza standard
Jedną z największych wartości dedykowanego szablonu Comarch e-Sklep jest możliwość rozszerzenia standardowych funkcji silnika. Dla Drillo.pl wdrożyliśmy m.in.:
Automatyczne pobieranie danych firmy po NIP
Podczas rejestracji konta firmowego lub składania zamówienia jako firma, użytkownik wpisuje numer NIP – a system automatycznie pobiera i uzupełnia dane firmy (nazwa, adres, regon). To oszczędza czas kupującego i eliminuje błędy w danych fakturowych. Standardowy silnik Comarch e-Sklep nie oferuje tej funkcji out-of-the-box – wymagała ona dedykowanej integracji z zewnętrznym API.
Porównywarka produktów z podświetlaniem różnic
W branży narzędziowej klienci często porównują kilka modeli przed zakupem – np. wiertarki o zbliżonych parametrach różnych producentów. Wdrożyliśmy porównywarkę produktów z funkcją podświetlania różnic między porównywanymi pozycjami. Użytkownik od razu widzi, czym różnią się produkty w kluczowych parametrach, co przyspiesza decyzję zakupową.
Dlaczego dedykowany szablon, a nie gotowy?
To pytanie, które słyszymy często. Comarch udostępnia darmowe szablony – Topaz, Szafir, One Page Shop, Dla Gastronomii i Rubin (B2B). Można je modyfikować w Kreatorze Wyglądu bez znajomości kodu. Dlaczego więc inwestować w indywidualny szablon?
Gotowe szablony Comarch sprawdzają się na start – pozwalają szybko uruchomić sklep i zacząć sprzedawać. Jednak w dłuższej perspektywie ujawniają się ich ograniczenia:
- Identyczny wygląd – setki sklepów na tym samym silniku wyglądają niemal tak samo. Trudno budować rozpoznawalność marki na szablonie, który ma Twoja konkurencja.
- Ograniczona funkcjonalność – Kreator Wyglądu pozwala zmieniać kolory, układ elementów i bannery, ale nie usprawnisz w nim porównywarki produktów, automatycznego pobierania NIP ani niestandardowych formatek kontaktowych.
- Kompromisy w UX – gotowy szablon jest projektowany jako uniwersalny. Dedykowany szablon jest projektowany pod Twoich klientów i Twój asortyment.
- SEO – indywidualny szablon daje pełną kontrolę nad strukturą HTML, meta tagami, schema markup i szybkością ładowania. To bezpośrednio przekłada się na pozycje w Google.
Efekt końcowy
Sklep Drillo.pl działa na w pełni indywidualnym szablonie Comarch e-Sklep, który:
- Jest w 100% spójny z identyfikacją wizualną marki
- Działa responsywnie na wszystkich urządzeniach (desktop, tablet, mobile)
- Oferuje rozszerzone funkcje niedostępne w standardowych szablonach – pobieranie danych po NIP, porównywarka z podświetlaniem różnic
- Został zakodowany w technologiach HTML, CSS, JavaScript i Liquid z dbałością o wydajność i SEO
- Powstał w oparciu o analizę konkurencji i profesjonalny projekt UX/UI
Szukasz dedykowanego szablonu Comarch e-Sklep?
Jeśli Twój sklep działa na Comarch e-Sklep i czujesz, że standardowy szablon ogranicza Twój biznes – porozmawiajmy. W Tenticom projektujemy i kodujemy indywidualne szablony Comarch e-Sklep. Od analizy konkurencji i projektu UX/UI, przez kodowanie w HTML, CSS, JavaScript i Liquid, po wdrożenie rozszerzeń funkcjonalności wykraczających poza możliwości standardowego silnika.
Skontaktuj się z nami – opowiedz o swoim projekcie, a my zaproponujemy rozwiązanie dopasowane do Twoich potrzeb.