One Page Shop - cały sklep na jednej stronie

Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Comarch e-Sklep daje możliwość dostosowania wyglądu do preferencji sprzedawcy oraz potrzeb Klientów. Jeśli utworzyłeś już swój autorski projekt, to masz możliwość jego zapisania. Plik będzie potrzebny przy chęci modyfikacji wyglądu. Zapisana wersja szablonu może również stanowić kopię bezpieczeństwa. Warto jest więc wyeksportować szablon do pliku.

Jak wyeksportować swój szablon z Comarch e-Sklep?

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Eksport szablonu.

Krok 2. W tym miejscu możesz opcjonalnie (przed eksportem) określić autora szablonu, podać adres e-mail, telefon oraz adres WWW swojego e-Sklepu.

Krok 3. Jeżeli chcesz wyeksportować szablon do pliku użyj przycisku Eksportuj szablon.

Gotowe! Szablon został wyeksportowany do pliku na Twoim urządzeniu.

Wskazówka
Z tego miejsca możesz także wyeksportować posiadane w e-Sklepie bannery, korzystając z przycisku Eksportuj bannery.

Jak wgrać własny szablon do Comarch e-Sklep?

Własny szablon. Jak go wgrać?

Po skomponowaniu swojego własnego szablonu możesz wgrać go do e-Sklepu. Postępuj zgodnie z poniższymi krokami.

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Import szablonu.

Krok 2. Określ, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu.

Krok 3. Wybierz plik XML swojego szablonu i naciśnij Importuj szablon.

Uwaga
Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu

Wskazówka
W zakładce Szablony możesz określić, czy wgrywany szablon ma być domyślny i aktywny w e-Sklepie.

Krok 4. Teraz możesz podejrzeć zmiany, jakie zaszły w wyglądzie Twojego e-Sklepu. W tym celu możesz podejrzeć zmiany w czasie rzeczywistym lub przejść w tryb incognito. Pamiętaj, że wszelkie zmiany zostaną opublikowane po pełnej synchronizacji, która wciągu 10 minut zgodnie z wyświetlanym komunikatem.

Gotowe! Twój szablon został zaimportowany do e-Sklepu.

Jak dodać wideo w sekcji z filmami?

Filmy produktowe na rynku e-commerce są dziś powszechną formą prezentowania towarów w sklepach internetowych. Producenci czy właściciele sklepów chcą wyróżniać swój asortyment. Niejednokrotnie pomaga to także w ukazaniu zastosowania produktu. Każdy film wyróżnia się sposobem prezentacji. W szablonie One Page Shop i Topaz dostępna jest sekcja, gdzie możesz publikować filmy, które pomogą Ci wypromować oferowany przez Ciebie towar.

Konfiguracja sekcji z filmami

Z poziomu panelu administracyjnego możesz w łatwy i szybki sposób dodać wideo. Postępuj zgodnie z poniższą instrukcją. Krok 1. Zaloguj się do panelu administracyjnego. Krok 2. Przejdź do zakładki Wygląd sklepu/ Ustawienia/ Strona główna. Na dole strony znajdź Ustawienia sekcji z filmami. Krok 3. Uzupełnij informacje o filmie: Etykietę PL oraz wstaw Link do filmu. W sekcji możesz zaprezentować filmy:
  • udostępnione w sekcji Ustawienia/ Pliki użytkownika – przykładowy link: usr/nazwafilmu.mp4
  • opublikowane w portalu YouTube – przykładowy link: https://www.youtube.com/embed/jq3B5jp8QwI
  • dodane na zewnętrznym hostingu – przykładowy link: https://twojhosting.pl/filmy/nazwafilmu.mp4
Krok 4. Uzupełnij tłumaczenia dla nazwy filmów prezentowanych w szablonie. Naciśnij link videoElement1, a zostaniesz przekierowany do edycji tłumaczenia. W polu tekst wpisz odpowiednią nazwę filmu i zapisz zmiany. Krok 5. Zapisz i opublikuj zmiany. Gotowe! Od teraz Klienci zobaczą w szablonie skonfigurowaną sekcję z opublikowanymi filmami. Przejdź do naszego sklepu demonstracyjnego i zobacz, jak wygląda skonfigurowana sekcja.

Jak zmienić kolejność wyświetlanych elementów na stronie głównej w One Page Shop?

W szablonie One Page Shop możesz zmieniać dowolnie kolejność wyświetlanych na głównej stronie elementów. Możesz dzięki temu spersonalizować swój e-Sklep tak, by był bardziej unikalny.

Konfiguracja strony głównej

Aby dokonać zmian w kolejności wyświetlanych elementów na stronie głównej wystarczy, że zalogujesz się do panelu administracyjnego, a następnie przejdziesz do sekcji Wygląd sklepu/ Ustawienia/ Strona Główna. Wyświetli się wówczas panel, który zawiera w sobie ustawienia nagłówka strony, treści strony oraz sekcji z filmami.

Ustawienia nagłówka strony

W nagłówku znajdują się następujące elementy:
  • Logotyp,
  • Produkty,
  • Blog,
  • Lookbook,
  • O firmie,
  • Kontakt,
  • Koszyk,
  • Informacje o języku i walucie, możliwość wyboru. 

Lista elementów w nagłówku strony

W tym miejscu możesz nie tylko dodać link do nagłówka, ale także ustalić, czy odnośniki do stron mają być widoczne. Możliwa jest też zmiana kolejności wyświetlania poszczególnych elementów. Wystarczy, że przesuniesz wybrany element za pomocą strzałki w kolumnie Kolejność. Możesz także określić, który odnośnik powinien być wyróżniony, a dokładniej, który link w nagłówku będzie posiadała inny kolor. Zmiany koloru czcionki możesz dokonać w sekcji Wygląd sklepu/ Ustawienia/ Ogólne. Odpowiadają za to sekcje:
   

Ustawienia treści strony

Pozostając w obszarze Wygląd sklepu/ Ustawienia/ Strona główna możesz zmienić ustawienia treści strony. W tym miejscu również istnieje możliwość zmiany kolejności wyświetlania poszczególnych elementów na stronie głównej sklepu oraz ukrycia elementu. Wystarczy, że odznaczysz checkbox w kolumnie Dostępne.

Ustawienia sekcji z filmami

W szablonie One Page Shop dostępna jest sekcja, w której możesz publikować filmy, które pomogą Ci wypromować oferowany przez Ciebie towar. Film możesz dodać w prosty i szybki sposób z poziomu panelu administracyjnego. Szczegóły konfiguracji znajdują się w artykule: Jak dodać wideo w sekcji z filmami w szablonie One Page Shop?

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Oprawa wizualna sklepu jest bardzo ważnym elementem podczas prowadzenia sprzedaży w sieci. Narzędzie Kreator Wyglądu Comarch e-Sklep umożliwia stworzenie własnych, niepowtarzalnych szablonów wedle preferencji i potrzeb użytkowników. W intuicyjnym narzędziu jakim jest Kreator, będziesz w stanie zaprojektować wszelkie niezbędne funkcje, takie jak stronę główną, listę towarów, szczegóły towaru oraz koszyk. Jeśli Twój projekt szablonu został zaimportowany do e-Sklepu oraz skonfigurowany wedle Twoich preferencji (dodanie grafik do bannerów, modyfikacje kolorystyczne) masz możliwość jego zapisania, co będzie stanowić kopię bezpieczeństwa. Kopia bezpieczeństwa to dane, które w każdej chwili można odtworzyć w przypadku ich utracenia (np. poprzez przypadkowe usunięcie) lub częstego wprowadzania zmian. Dane, jakie może zawierać kopia bezpieczeństwa to szablon, który wcześniej został przez nas wygenerowany wraz z bannerami. Zaleca się wykonywanie kopii zapasowych oraz zabezpieczenie ich hasłem. Każda wykonana kopia zapasowa powinna zostać zapisana w bezpiecznym i dogodnym dla Użytkownika miejscu.

Jak wykonać kopię bezpieczeństwa?

W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu. W pustych polach znajdujących się w zakładce Eksport szablonu, opcjonalnie przed eksportem możesz uzupełnić powyższe dane, tj. Autora szablonu, e-mail, telefon i stronę WWW sklepu. Aby wyeksportować szablon, kliknij Eksportuj szablon. Wyeksportowany plik jest w formacie XML, a jego nazwa zawiera szablon oraz wersję, co znacznie ułatwia zarządzanie kopiami bezpieczeństwa w przypadku wykonywania ich regularnie.

Jak wyeksportować bannery?

Bannery, które znajdują się w Twoim sklepie możesz również wyeksportować tworząc kopię bezpieczeństwa. W tym celu także musisz przejść do Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie do zakładki Eksport szablonu. Obok przycisku Eksportuj szablon, znajduje się przycisk Eksportuj bannery, który musisz kliknąć aby bannery, które posiadasz w e-Sklepie zostały weksportowane. Kopia bezpieczeństwa jest również zapisywana w formacie XML, a nazwa pliku wskazuje na szablon, wersję i zawartość bannerów.

Jak zabezpieczyć hasłem swój szablon?

Jeśli chcesz, aby Twój szablon został zabezpieczony hasłem, a znajomość hasła była niezbędna podczas zaimportowania tego szablonu do e-Sklepu, musisz w tym celu przejść w Panelu Administracyjnym do sekcji Wygląd sklepu/ Ustawienia/ Ustawienia zaawansowane, następnie do zakładki Szablon. W tym miejscu nadasz hasło dla swojego szablonu. Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno:
  • Składać się z minimum 8 znaków,
  • Zawierać dużą literę,
  • Zawierać małą literę,
  • Zawierać cyfrę 0-9,
  • Zawierać znak specjalny – ‘!.+?;^]=-(&_)#=
Gotowe! Teraz Twój szablon został zabezpieczony hasłem. Jeśli wyeksportujesz szablon, który zabezpieczyłeś hasłem – podczas importu tego szablonu, będziesz musiał podać nadane wcześniej hasło. Jego brak uniemożliwi import szablonu, a podanie błędnego hasła spowoduje nieprawidłowe działanie szablonu po imporcie. Więcej informacji znajdziesz:

One Page Shop - podstawowe informacje

Wstęp

One Page Shop to szablon zaprojektowany z myślą o użytkownikach, którzy w swojej ofercie posiadają jedynie kilka towarów. Dzięki niemu zaprezentujesz na głównej stronie wyjątkowe produkty, które posiadasz w swojej ofercie. Struktura szablonu skupiona jest na zaprezentowaniu asortymentu tak, aby decyzje zakupowe Twoich Klientów zapadały szybciej. Potencjalny klient może odnaleźć najważniejsze informacje na temat Twojej oferty przeglądając jedną stronę witryny. Szablon One Page Shop:
  • dostępny jest we wszystkich wariantach Comarch e-Sklep,
  • pozwala na prezentację 20 towarów prostych,
  • dostępny jest w dwóch motywach kolorystycznych,
  • jest prosty w konfiguracji bezpośrednio w panelu.
Przejdź do naszego sklepu demonstracyjnego i zobacz, jak wygląda One Page Shop w Comarch e-Sklep.   W tym artykule zawarliśmy podstawowe informacje na temat funkcji dostępnych w szablonie. Dzięki udogodnieniom i możliwości edycji niektórych elementów możesz łatwo spersonalizować swój e-Sklep.

Konfiguracja One Page Shop w panelu administracyjnym

Z poziomu panelu administracyjnego możesz dokonywać edycji każdego elementu znajdującego się na stronie. Możesz także ustalać sposoby dostaw oraz płatności. Po przejściu do sekcji Wygląd sklepu/ Ustawienia dostępne są ustawienia dla trzech zakładek: Ogólne, Strona główna, Dodatkowe.
  • W zakładce Ogólne możesz dokonać zmian w motywie kolorystycznym Twojego e-Sklepu. Z tego poziomu również możesz dokonać m.in takich zmian, jak: prezentacja punktów osobistego, edycji terminu dostaw czy umożliwienie prezentacji informacji o najniższej cenie towaru lub usługi jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki.
  • W zakładce Strona główna znajdują się ustawienia, które pomagają „układać” poszczególne elementy na stronie głównej. W tym miejscu możesz zdecydować, gdzie powinny wyświetlać się produkty, lookbook i bannery. Część wyświetlanych elementów możesz ukryć.
  • W zakładce Dodatkowe widnieją ustawienia, dzięki którym możesz decydować o możliwości udostępniania towarów w poszczególnych mediach społecznościowych, czy udostępniania przycisku obliczającego ratę lub leasing. Dodatkowo możesz włączyć prezentację tabeli rozmiarów na stronie towaru.

Ustawienia Strony Głównej

Ustawienia zawarte w tym miejscu odpowiadają za elementy, które wyświetlane są na stronie głównej. Możesz zmieniać ich kolejność, nazwę, ukryć lub wyróżnić. W tym miejscu wyróżnia się następujące sekcje:

Ustawienia nagłówka strony

W nagłówku znajdują się następujące elementy:
  • Logotyp,
  • Odnośnik do listy z produktami (nasze produkty),
  • Blog,
  • Lookbook,
  • Informacje o firmie,
  • Kontakt,
  • Koszyk,
  • Możliwość wyboru języka i waluty w e-Sklepie.
W tym miejscu możesz nie tylko dodać link do nagłówka, ale także ustalić, czy i jakie odnośniki do stron mają być widoczne. Możliwa jest też zmiana kolejności wyświetlania poszczególnych elementów.

Ustawienia treści strony

Pozostając w obszarze Wygląd sklepu/ Ustawienia/ Strona główna możesz zmienić ustawienia treści strony. W tym miejscu również istnieje możliwość zmiany kolejności wyświetlania poszczególnych elementów na stronie głównej sklepu oraz ukrycia elementu. Szczegółowe informacje na temat konfiguracji znajdują się w artykule: Jak zmienić kolejność wyświetlanych elementów na stronie głównej w One Page Shop?

Elementy w szablonie

1. Sekcja z filmami

W One Page Shop masz możliwość dodania filmów promujących nie tylko produkty, ale także Twoją firmę, dostępne marki czy producentów. Film możesz dodać w prosty i szybki sposób z poziomu panelu administracyjnego. W sekcji możesz zaprezentować filmy:
  • udostępnione w sekcji Ustawienia/ Pliki użytkownika,
  • opublikowane w portalu YouTube,
  • dodane na zewnętrznym hostingu.
Szczegóły konfiguracji znajdują się w artykule: Jak dodać wideo w sekcji z filmami w szablonie One Page Shop?

2. Banner

Aby dodać zdjęcia do banneru przejdź do zakładki Wygląd sklepu/ Ustawienia/ Bannery, a następnie klikając na kafelek o nazwie mainBanner wybierz odpowiednie zdjęcie. 
Wskazówka
Rekomendowany rozmiar grafik dla banneru to 1920 x 540 px.
Szczegóły na temat dodawania i edycji bannerów znajdują się w artykule: Bannery.

3. Lookbook

Widok charakteryzuje się prezentacją zdjęć w formie listy i precyzyjnym oznaczeniem towarów na zdjęciu. Dzięki znacznikom umieszczonym na grafice Twoi klienci będą mogli podejrzeć towar i dodać go bezpośrednio do koszyka. Po kliknięciu na przycisk z plusem wyświetli się popup ze szczegółami towaru oraz opcją zakupu.
Wskazówka
Rekomendowany rozmiar grafik do lookbooka to 560 x 500 px.
Aby poprawnie skonfigurować lookbook, skorzystaj z naszej instrukcji zawartej w artykule: Jak skonfigurować Lookbook w Comarch e-Sklep?

4. Lista towarów

Szablon One Page Shop został stworzony z myślą o użytkownikach, którzy w swojej ofercie nie posiadają wielu produktów. Z tego powodu, na stronie głównej wyświetlanych jest 20 towarów prostych, które zostały przypisane do pierwszej kategorii w systemie Comarch ERP. Z tego powodu zalecamy utworzenie jednej kategorii, która ma być przesyłana do One Page Shop'a.
Przyklad
W systemie ERP posiadasz kategorię A, B oraz C. W kategorii A i B znajduje się po 5 produktów, zaś w kategorii C, która liczy 10 produktów. Po wykonaniu synchronizacji zostanie wyświetlonych 5 produktów z kategorii A, ponieważ jest ona pierwsza w systemie Comarch ERP.
Lista produktów wyświetlana jest w formie kafli.
Sekcja z listą towarów w One Page Shop Comarch

5. Szczegóły towaru – jakie informacje widnieją na pop-upie?

W szablonie One Page Shop Klient będzie mógł zobaczyć szczegóły danego towaru nie musząc przechodzić na osobną stronę. Wystarczy, że kliknie na kafelek z interesującym go artykułem lub naciśnie Kup teraz. Wyświetli się wówczas pop up, który zawiera w sobie szereg informacji na temat towaru, między innymi:
  • Cenę wraz z formą dostawy, kalkulatorami ratalnymi oraz leasingowymi,
  • Dostępność produktu,
  • Cechy towaru,
  • Opis towaru,
  • Tabelę rozmiarów,
  • Liczbę opinii oraz zakładkę z wystawionymi już komentarzami,
  • Informację o ilości osób, która kupiła dany towar,
  • Możliwość udostępnienia towaru w social mediach lub za pomocą linku,
  • Opcję „Zapytaj o towar”,
  • Zestawy promocyjne.
Pop-up ze szczegółami towaru w One Page Shop Comarch
Jeśli posiadasz produkt, który nie posiada wariantów istnieje możliwość zakupu tego towaru z pominięciem pop-up podczas kliknięcia w przycisk "Kup teraz". Klikając w inne miejsce na towarze, pop-up ze szczegółami wyświetli się. Jeśli chcesz wyłączyć pop-up, możesz to zrobić z poziomu Panelu Administracyjnego przechodząc do sekcji Wygląd sklepu/ Ustawienia:

6. Koszyk

W szablonie One Page Shop składanie zamówienia jest szybkie i wygodne dla użytkownika. Koszyk został zaprojektowany tak, aby użytkownik mógł w jednym kroku wypełnić niezbędne dane: 
  • Formularz z danymi zamawiającego oraz danymi do faktury,
  • Sposób dostawy,
  • Sposób płatności,
  • Miejsce na wpisanie kodu rabatowego.
Po uzupełnieniu powyższych informacji można przejść do podsumowania, w którym prezentowane są wcześniej wprowadzone dane klienta. Oprócz tego w koszyku One Page Shop jest możliwość wyświetlania ceny za sztukę. Pojawi się ona po dodaniu do koszyka kilku sztuk produktu. Przy jednej sztuce towaru wyświetlana będzie tylko cena. Od wersji 2024.1.1 w szablonie One Page Shop dodano możliwość wyświetlania w koszyku informacji jakiej kwoty brakuje do darmowej dostawy.  Funkcja ta możliwa jest do uruchomienia z poziomu Panelu Administracyjnego w sekcji Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne: Ustawienia te można zmienić według własnego uznania, a następnie należy użyć opcji Zapisz i Publikuj.

7. Blog

Prowadzenie bloga jest istotnym elementem sklepu internetowego. Dzięki niemu sprzedawca może dzielić się swoją wiedzą i spostrzeżeniami na temat reklamowanych produktów. W ten sposób sprzedawca może podpowiedzieć klientom w jaki sposób mogą oni wykorzystać oferowane przez niego artykuły. Prowadzenie bloga ma również dobry wpływ na pozycjonowanie, ze względu na unikalne treści. Dzięki temu Twój e-Sklep może częściej pojawiać się w wynikach wyszukiwania. W szablonie One Page Shop masz możliwość tworzenia dowolnej ilości wpisów. Na stronie głównej wyświetlone zostaną trzy najnowsze. Użytkownik ma możliwość podglądu całej listy artykułów. Wystarczy, że kliknie w etykietę Najnowsze wpisy. Szczegółowe informacje na temat konfiguracji bloga w e-Sklepie znajdują się w artykule: Jak skonfigurować blog?

8. Info-banner

Banner informacyjny pozwala na zaprezentowanie w przejrzysty sposób korzyści z zakupach w Twoim e-Sklepie. Modyfikacji tego obszaru dokonasz z poziomu panelu administracyjnego, przechodząc do sekcji Wygląd sklepu/ Ustawienia/ Bannery. Następnie przechodząc do szczegółów banneru o nazwie info-banner dostosujesz element do swoich preferencji. Możesz skorzystać z domyślnych grafik lub dodać własne.

9. Element tekstowy ze zdjęciem

Element tekstowy ze zdjęciem charakteryzuje się możliwością wprowadzenia statycznego opisu na stronie głównej w twoim e-Sklepie. Możesz zawrzeć w nim np. podstawowe informacje na temat Twojej firmy, asortymentu sklepu lub inne wartościowe dla Ciebie treści. Element tekstowy możesz odpowiednio skonfigurować przechodząc do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie do zakładki Obiekty, gdzie skonfigurujesz zawartość elementu.
Wskazówka
Za wyświetlanie elementu tekstowego w szablonie One Page Shop odpowiada obiekt o nazwie text-el-photo-mp-1.
Więcej informacji na temat konfiguracji znajduje się w artykule: Element tekstowy w szablonie.

10. Stopka

Dzięki modyfikacji obszaru możesz jeszcze bardziej spersonalizować swój sklep poprzez uzupełnienie stopki w szereg przydatnych informacji. Elementem tym możesz zarządzać z poziomu sekcji Wygląd Sklepu/ Ustawienia/ Nagłówek i Stopka. Szczegółowe informacje na temat konfiguracji stopki znajdują się w artykule: Rozbudowana stopka w szablonach – jak ją skonfigurować?

11. Strefa Klienta

Do Strefy Klienta w szablonie One Page Shop masz możliwość zalogowania się poprzez Facebooka oraz przez Google. Więcej na temat konfiguracji logowania przez Facebooka i Google znajdziesz tutaj. Masz także możliwość całkowitego ukrycia Strefy Klienta na stronie sklepu internetowego. Zdecydujesz o tym zaznaczając właściwą opcję w zakładce Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne: Wprowadzone zmiany standardowo należy zapisać i opublikować.

Jak zaktualizować szablon do najnowszej wersji?

Jak zaktualizować szablon do najnowszej wersji?

Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Wstęp

W e-Sklepie możesz dowolnie zmieniać szablony. Możesz je także modyfikować oraz aktualizować. Wiąże się to z wgraniem zupełnie nowego szablonu na miejsce starego. Aktualizacja wyglądu powoduje zmianę dotychczasowych ustawień. Przed każdą aktualizacją polecamy utworzyć odpowiednią dla siebie instrukcję, która będzie zawierała Twoje ustawienia kolorów czy modyfikacje w kodzie szablonu. Możesz także wyeksportować dotychczasowy szablon, aby stanowił on kopię bezpieczeństwa.

Jak zaktualizować szablon?

Instrukcja aktualizacji szablonów: Rubin, Szafir, Topaz i One Page Shop (dostępnych w Kreatorze Wyglądu)

Aby zaktualizować szablon Rubin, Szafir, Topaz lub One Page Shop należy skorzystać z aktualnej wersji Kreatora Wyglądu, do którego odnośnik znajduje się w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu/ Kreator wyglądu. Istnieją dwie możliwości aktualizacji tych szablonów:

  • wygenerowanie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
  • import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.

Wyeksportowany z Kreatora Wyglądu szablon należy wgrać do e-Sklepu. W panelu administracyjnym e-Sklepu, w sekcji Wygląd sklepu znajduje się bezpośredni odnośnik do importu szablonu z Kreatora wyglądu. Szczegółowa instrukcja dostępna jest w artykule Jak wyeksportować i zaimportować swój szablon w e-Sklepie?

Podczas dokonywania modyfikacji w szablonach zachęcamy do skorzystania z naszego Centrum Pomocy.

Wskazówka
Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Instrukcja aktualizacji szablonów: Bursztyn, Agat i Opal.

Aby zaktualizować szablon Bursztyn, Agat lub Opal należy w panelu administracyjnym e-Sklepu przejść do sekcji Wygląd Sklepu/ Gotowe szablony Comarch, w której znajdują się najnowsze wersje szablonów dostępne do zainstalowania. Z wyświetlonej listy należy wybrać szablon, który ma zostać wgrany do e-Sklepu. W tym celu wybierz przycisk Chcę pobrać i zainstalować szablon:

Następnie wyświetli się nowe okno, w którym należy:

  • wybrać tzw. slot, który zostanie nadpisany nowym (aktualnym) szablonem. W każdym e-Sklepie dostępne są 4 miejsca na wgranie szablonu, spośród których jeden szablon oznacza się jako aktywny i domyślny,
  • określić, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu. Jeżeli w nadpisywanym szablonie znajdują się bannery oraz lookbooki, które mają nadal wyświetlać się w e-Sklepie, należy wskazany parametr zostawić odznaczony. Gdy parametr nie zostanie zaznaczony, wówczas dotychczasowe bannery i lookbooki nie zostaną usunięte.
  • Zaimportować szablon do e-Sklepu.
    Wskazówka
    Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu.

Aby nowy szablon pojawił się w e-Sklepie należy upewnić się, czy jest on aktywny oraz ustawiony jako domyślny. W sekcji Wygląd sklepu/Ustawienia/Edytuj ustawienia zaawansowane w zakładce Szablon znajdują się odpowiedzialne za to parametry, które powinny być zaznaczone.

Wszelkie zmiany należy zapisać, a następnie opublikować.

Uwaga
Jeżeli szablon nie zostanie opublikowany, wówczas nie pojawi się on w e-Sklepie.

Instrukcja aktualizacji innych szablonów (niż szablonów Comarch) oraz aktualizacji szablonów z własnymi modyfikacjami

Jeżeli w swoim Comarch e-Sklepie korzystasz z własnego szablonu, czyli innego niż gotowe szablony Comarch, to powinieneś jego aktualizację przeprowadzić we własnym zakresie lub zlecić ją firmie/ osobie, która dla Ciebie przygotowała ten szablon. W przypadku, gdy korzystasz z gotowego szablonu Comarch, ale wprowadziłeś do niego indywidualne zmiany (poza Kreatorem Wyglądu), to również we własnym zakresie (lub ze wsparciem autora zmian) musisz zadbać o aktualizację swojej wersji szablonu.

Banner promocyjny w szablonie Topaz i One Page Shop

Banner promocyjny - jak to działa?

Banner promocyjny wyświetli się na stronie głównej Twojego e-Sklepu i będzie prezentował typ towaru, który wskażesz. Taki rodzaj banneru pomoże Ci w zwróceniu uwagi Klientów na towary, które zostały objęte na przykład ofertą specjalną.

Dodanie banneru

Banner możesz dodać z poziomu Kreatora Wyglądu B2C  (zamiennie: panel administracyjny e-Sklepu: Wygląd sklepu/ Kreator wyglądu). Aby dodać banner promocyjny do swojego szablonu, przejdź na stronę "Strona główna", po czym wybierz Banner promocyjny i przeciągnij go w wybrane przez Ciebie miejsce. W podglądzie układu szablonu, po najechaniu kursorem na obszar z bannerem promocyjnym, zobaczysz możliwość jego edycji. Wybierz ikonę "zębatki", aby móc edytować i określić liczbę wyświetlanych towarów oraz typ promowanych towarów. Zapisz wprowadzone zmiany. Jeśli pozostałe strony szablonu są gotowe i skonfigurowane, to możesz wygenerować szablon. Więcej informacji na temat Kreatora Wyglądu oraz poszczególnych sekcji znajdziesz w artykule: Kreator wyglądu Topaz (B2C) Po zaimportowaniu szablonu do panelu administracyjnego możesz przejść do edycji banneru. Postępuj zgodnie z poniższą instrukcją.

Edycja banneru

Modyfikacja wszystkich bannerów dostępnych w szablonach Comarch możliwa jest w panelu administracyjnym w obszarze Wygląd sklepu> Ustawienia> Bannery. Informacje odnośnie domyślnej, tradycyjnej modyfikacji bannerów znajdują się w artykule: Bannery

Odnajdź banner na liście nazwany "promotionalBanner", a następnie wybierz go, aby edytować i dodać zdjęcie

Po dokonaniu modyfikacji należy zapisać i opublikować zmiany. Gotowe! Teraz Twój banner promocyjny wyświetli się na stronie głównej.
Banner promocyjny w szablonie Topaz
Banner promocyjny w szablonie Topaz.

Kreator Wyglądu One Page Shop (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ć:

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

Tworzymy!

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 One Page Shop - Demo jest gotowym szablonem, który możesz zainstalować bezpośrednio z obszaru Wygląd sklepu > Gotowe szablony Comarch.
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 One Page Shop.

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ę "One Page Shop (2023.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.

Krok 1 - Sekcja Szablon

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,
  • Widget,
  • Siatka towarów
  • Newsletter,
  • Sekcja z filmami
  • Blog,
  • Element tekstowy,
  • Banner informacyjny,
  • Lookbook
  • Stopka.

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

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 promocyjny

Sekcja "Banner promocyjny" dodać banner prezentujący promocje.

Widget

Sekcja "Widget" pozwala dodać jeden z dwóch dostępnych wariantów, które pozwolą zaprezentować następujące funkcje:
  • Widget-banner-1
    • Dodanie zdjęcia,
    • Dodanie tekstu nagłówka (tekst pionowy),
    • Dodanie tekstu przycisku (tooltip).
    • Dodanie linku do przycisku,
    • Dodanie tekstu..
  • Widget-banner-1
    • Dodanie zdjęcia,
    • Dodanie tekstu nagłówka (tekst pod zdjęciem),
    • Dodanie tekstu,
    • Dodanie linku do tekstu.

Siatka towarów

Na szczegółach wybranego obiektu (Siatka towarów) określamy jakie dokładnie towary zostaną zaprezentowane w sekcji „Nasze produkty".

Dodatkowo po najechaniu kursorem na tę sekcję, wybierając Opcje, możemy ustawić następujące opcje:
  • wybierz sposób wyświetlania produktów na liście,
  • prezentowanie drugiego zdjęcia towaru na kiście,
  • dodatkowe informacje na liście towarów,
  • graficzna prezentacja wariantów towaru,
  • po dodaniu do koszyka,
  • pozwalaj na udostępnianie towarów,,
  • pomijaj popup ze szczegółami przy kupowaniu towarów prostych.
 

Newsletter

Sekcja "Newsletter" pozwala dodać jeden z czterech dostępnych wariantów zapisu klientów do subskrypcji. Dwie sekcje pokazują się w formie wyskakującego okienka (pop-up), które prezentowane są wyłącznie na stronie głównej e-Sklepu (newsletter-3, newsletter-4). Wszystkie teksty dostępne w nowym newsletterze są edytowalne w ustawieniach szablonu w menu Wygląd sklepu > Ustawienia > Bannery > Newsletter banner. 

Sekcja z filmami

Sekcja z filmami prezentuje jeden widok. Film wprowadza się w ustawieniach szablonu w sekcji Strona główna > Ustawienia sekcji z filmami.

Blog

Sekcja "Blog" pozwala wybrać spośród dwóch dostępnych wariantów. Blog -1 prezentuje tylko zdjęcia, natomiast Blog-2 oraz Blog-3 zawiera również krótkie opisy wprowadzające do pozostałej treści wpisu.

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

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-3 – element z ikonkami i krótką informacją
    • Ekspresowa wysyłka,
    • Darmowa dostawa,
    • Obsługa klienta,
  • info-banner-3 – element z ikonkami i krótkim opisem
    • Ekspresowa dostawa,
    • Darmowa dostawa,
    • Strefa kontaktu.
  • info-banner- 4 – Poznaj produkt
    • Wyróżnij główny towar – zdjęcie główne,
    • Pozostałe towary – zdjęcia na zewnątrz,

Lookbook

Sekcja "Lookbook" prezentuje jeden widok, który pozwoli na promowanie wielu towarów w bardzo atrakcyjnej formie.

Koszyk

Sekcja "Koszyk" pozwala dodać jeden z trzech dostępnych wariantów, gdzie każdy z nich posiada inną ilość kroków.

Stopka

Sekcja "Stopka" zawiera jeden widok 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 2023. 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.

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,
  • styl okien i przycisków.

Motyw kolorystyczny

Aby zmienić kolor naszego szablonu należy przejść do sekcji Motyw kolorystyczny, gdzie do wyboru przygotowaliśmy 7 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:
  • 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.

Więcej informacji

Więcej informacji można znaleźć w artykułach o wyglądzie sklepu oraz o dostosowaniu wyglądu.

Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Wstęp

Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.
Wskazówka
Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami
W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze standardowych szablonów Comarch, czyli: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii.   

Sprawdź, jaki szablon posiadasz

Nie wiesz, który szablon posiadasz? Możesz to sprawdzić w panelu administracyjnym Comarch e-Sklep. Aby to zrobić, z poziomu panelu administracyjnego przejdź do zakładki Wygląd sklepu/ Ustawienia a następnie, pod przyciskiem "Więcej" wybierz Edytuj ustawienia zaawansowane. W obszarze, który został wyświetlony, pojawi się kilka zakładek, a wśród nich zakładka "Szablon". Wybierz ją, po czym sprawdź szablon:   Jeśli Twój szablon to Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, to możesz przejść do kolejnej części artykułu. Jeśli posiadasz własny szablon z indywidualnymi modyfikacjami, to przejdź do artykułu: Posiadam własny szablon, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?  Jeśli posiadasz szablon Bursztyn, Agat lub Opal, to przejdź do artykułu: Posiadam szablon Bursztyn, Opal lub Agat, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?  

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jako właściciel e-Sklepu lub Partner Comarch zadbaj, aby zadbać o dostosowanie swojej witryny do obowiązujących przepisów. Nowe wymogi to wspólna odpowiedzialność:
  • Comarch e-Sklep – zajmiemy się kwestiami technicznymi w przypadku Gotowych Szablonów Comarch, do których należą m.in. zmiany w kodzie,
  • Właściciel, administrator lub Partner sklepu – musisz zadbać o treści i elementy, które dodajesz samodzielnie. Chodzi tu głównie opis produktów, zdjęcia i grafiki czy identyfikację wizualną. 
 

Jak zacząć?

Jeśli korzystasz z gotowych szablonów, takich jak Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, nie musisz przejmować się samodzielnym edytowaniem ich kodu. Wszystkie usprawnienia zostaną udostępnione wraz z aktualizacją, która pojawi się w czerwcu 2025 roku.

Aktualizacja szablonu

Wskazówka
Aktualizację szablonu wykonaj wtedy, kiedy będzie ona dostępna. Realizacja wersji 2025.4 przewidywana jest przed 28 czerwca 2025 roku, poinformujemy o niej w aktualnościach. Będzie ona zawierała zmiany związane z omawianymi tutaj przepisami.

Jak zaktualizować szablon?

Aby zaktualizować szablon i przejść na Topaz, One Page Shop, Dla Gastronomii, Rubin lub Szafir, należy skorzystać z aktualnej wersji Kreatora Wyglądu. Pamiętaj, że szablony Rubin i Szafir przeznaczone są tylko dla sklepów Enterprise i B2B. Odnośnik znajduje się również w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu > Kreator wyglądu.  Istnieją trzy możliwości aktualizacji tych szablonów:
  • Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
  • Wybór i edycja jednego z gotowych układów i jego modyfikacja,
  • Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.
Wygenerowany z Kreatora Wyglądu szablon należy wgrać do e-Sklepu. W panelu administracyjnym e-Sklepu, w sekcji Wygląd sklepu znajduje się bezpośredni odnośnik do importu szablonu z Kreatora wyglądu. Szczegółowa instrukcja dostępna jest w artykule Jak wyeksportować i zaimportować swój szablon w e-Sklepie?
Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.
Wskazówka
Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?  
Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jednym z głównych wymogów WCAG jest stosowanie odpowiednich kontrastów na stronach internetowych. Jeśli w wybranym szablonie graficznym wykorzystujesz któryś ze standardowych motywów kolorystycznych dostępnych w kreatorach, to zostaną one dostosowane do wymagań wynikających z przepisów. Jeśli natomiast masz przygotowany własny motyw kolorystyczny lub chcesz zmienić część kolorów zastosowanych w szablonie, to pamiętaj, że muszą one posiadać odpowiednie kontrasty. Wszelkich zmian kolorystycznych możesz dokonać w Kreatorze Wyglądu.  Odpowiedni kontrast między tekstem a tłem jest kluczowy dla osób z dysfunkcjami wzroku. WCAG 2.1 określa minimalny współczynnik kontrastu (4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego). Ważne jest również unikanie łączenia kolorów, które mogą być trudne do rozróżnienia, takich jak czerwony i zielony. Kontrasty po modyfikacji kolorów możesz sprawdzić np. narzędziem WAVE. WAVE to popularny, dostępny dla wszystkich zestaw narzędzi do oceny dostępności stron internetowych. Rozszerzenia WAVE dla Chrome, Firefox i Edge, umożliwiają testowanie bezpośrednio w tych przeglądarkach, bez przesyłania danych na serwer WAVE. WAVE znajdziesz pod linkiem: WAVE Web Accessibility Evaluation Tools.  

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony: Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".   Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu: W panelu bocznym pojawi się dokładna informacja na temat koloru. W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.  

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:   Następnie możesz zmieniać swobodnie kolor na wybranych elementach:   Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Poza zmianami w szablonie graficznym sklepu należy uzupełnić szereg danych. Znaczącą część tych elementów możesz wykonać już teraz, nie czekając na aktualizację Comarch e-Sklep. Poniżej znajduje się lista zmian, które należy wdrożyć w swoim e-Sklepie.

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Twój szablon musi obsługiwać parametr "alt" w obrazkach. Jeśli wykorzystasz aktualny szablon standardowy od Comarch to obsługę zapewnia Comarch e-Sklep, jeśli zdecydowałeś się na indywidualny szablon lub samodzielną aktualizację starszej wersji to upewnij się, że w szablonie są obsługiwane parametry "alt" we wskazanych elementach. Teksty alternatywne („alt”) to krótkie opisy obrazków, które pozwalają osobom korzystającym z czytników ekranu zrozumieć, co znajduje się na zdjęciu. Atrybut „alt” jest szczególnie ważny dla zdjęć produktów, ponieważ umożliwia przekazanie najważniejszych informacji o produktach.  Dlaczego tekst alternatywny jest taki ważny? 
  • Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
  • Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
  • Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.   
Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:
Przyklad
Poprawne :
  • Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
  • Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
  • Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
  • Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.
Niepoprawne:
  • Sukienka.
  • Buty sportowe.
  • Fajna kanapa.
  • Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima
Po uruchomieniu Comarch ERP Optima przejdź na pozycję cennika, a następnie edytuj wybrany towar. Następnie przejdź na zakładkę "Atrybuty", a następnie do sekcji "Zdjęcia i załączniki". W tym miejscu zobaczysz kolumnę "Atrybut Alt".
Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego: Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:    
Korzystam z Comarch ERP XT
Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".   W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.  

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

Pamiętaj, alby alty (opisy alternatywne) były uzupełnione także w przypadku bannerów. Aby to zrobić, przejdź z poziomu panelu administracyjnego do Wygląd sklepu > Ustawienia > Bannery  do edycji swoich bannerów. Klikając na odpowiedni kafelek pojawią się opcje z uzupełnieniem Alt:

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

Obrazki możesz dodawać także do treści, które udostępniasz na specjalnych stronach, takich jak np. Regulamin sklepu, Polityka prywatności, Wysyłka itp. W obszarze do edycji, który jest dostępny z poziomu panelu administracyjnego w sekcji Ustawienia > Treści formalne edytuj interesującą Cię treść, a dodając obrazek uzupełnij alt:    

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

Dodając opisy produktów i kategorii, warto upewnić się, że linkowane zdjęcia zawierają poprawnie uzupełniony atrybut "alt". To kluczowe dla osób korzystających z czytników ekranu. Dbałość o ten detal poprawia dostępność strony i zwiększa jej widoczność w sieci. Opis towaru i kategorii możesz dodać w systemach Comarch ERP.  Opis kategorii możesz ustawić również z poziomu panelu administracyjnego, bez konieczności korzystania z systemu ERP. Szczegółowe informacje znajdują się w artykule: Jak edytować kategorię w Comarch e-Sklep? 

5. Dla zdjęć w Blogu

Obrazki, które dodawane są dla wpisów blogowych od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego Comarch e-Sklep do sekcji Marketing > Blog przy dodawaniu wpisu:

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Pliki użytkownika w e-Sklepie to dedykowana przestrzeń do przechowywania własnych materiałów, które mogą zostać wykorzystane w sklepie internetowym. Pliki można przesyłać za pośrednictwem panelu administracyjnego, w sekcji Ustawienia > Twoje pliki. Maksymalny rozmiar pojedynczego pliku: 3 MB. Pliki, które dodawane są we wspomnianym obszarze, od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego do sekcji Ustawienia > Twoje pliki przy edycji pliku lub jego dodaniu.
Wskazówka
Jeśli posiadasz sklep wielojęzyczny, to we wszystkich tych wymienionych powyżej obszarach, znajdują się również obrazki dla danego języka. Pamiętaj, alby atrybut ALT zdefiniować dla każdego z nich!
 

Atrybut title - obowiązkowy czy nie?

Atrybut title jest przydatny do przekazywania dodatkowych informacji o elementach HTML, widocznych jako podpowiedź po najechaniu kursorem. Może być używany w ikonach bez podpisu, formularzach czy linkach, aby dostarczyć kontekst. Nie jest jednak obowiązkowy według WCAG, ponieważ czytniki ekranu często go ignorują, a osoby nawigujące klawiaturą mogą nie mieć do niego dostępu.  

Zalecenia dla udostępnianych treści - ogranicz migające elementy

Jako właściciel sklepu musisz sam zadbać o to, jakie treści umieszczasz na swojej stronie. Migające elementy, takie jak animacje czy reklamy, mogą wywoływać problemy u osób z padaczką fotogenną. Według kryteriów WCAG 2.1 zalecane jest ograniczenie migających treści do maksymalnie trzech błysków na sekundę lub ich całkowite usunięcie. Jako właściciel sklepu musisz dbać o statyczne elementy lub spokojne animacje. Również treści zawarte w różnego typu prospektach, gazetkach czy folderach informacyjnych w formie dokumentów powinny być zgodne z wytycznymi WCAG.

1.Obrazki i bannery

W szablonach graficznych takie elementy mogą pojawić się na przykład w bannerach i elementach tekstowych ze zdjęciem. Upewnij się, że grafiki tam zamieszczone są odpowiednie, czyli bez intensywnych animacji i nieodpowiednich kolorów. Szczególną uwagę zwróć na pliki w formacie GIF. Sprawdź, w jaki sposób możesz skonfigurować bannery oraz elementy tekstowe ze zdjęciem.  

2.Materiały audio i viedo

Aby sklep internetowy był w pełni dostępny zgodnie z WCAG, właściciele muszą zadbać o dodanie audiodeskrypcji i transkrypcji do materiałów multimedialnych (filmy, nagrania dźwiękowe). Choć oba rozwiązania służą poprawie dostępności, mają różne funkcje.
  • Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
  • Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji.
Dodanie tych elementów leży po stronie właścicieli sklepów. Do filmów, które udostępniasz, dodaj zatem widoczne napisy, a także dobrej jakości opis dźwiękowy. Ich brak może wykluczyć część użytkowników i wpłynąć na komfort korzystania ze strony. Dobre praktyki dostępności to nie tylko wymóg, ale też inwestycja w lepsze doświadczenie klientów.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

Dostosowanie treści e-mail zgodnie z wytycznymi WCAG to kluczowy krok w budowaniu dostępnej i klarownej komunikacji. W tej części artykułu przedstawiamy rozwiązania zarówno dla domyślnych wiadomości, jak i tych modyfikowanych, aby zapewnić ich lepszą czytelność i dostępność dla wszystkich odbiorców.

1.Treści mailowe są domyślne, nie zostały sformatowane

Jeśli treści nie zostały przez Ciebie zmienione i stanowią domyślne treści, które są dostępne w Comarch e-Sklep, to wystarczy, że zaktualizujesz je. Aby to zrobić, należy przejść w panelu administracyjnym do zakładki Ustawienia > Treści formalne, a następnie wybrać „Wysyłka e-mail i SMS”. Zakładka ta zawiera treści wiadomości wysyłane do klientów po wykonaniu określonych akcji, np. po zakupie czy rejestracji. W Comarch e-Sklep istnieje możliwość przywrócenia standardowej treści pojedynczej wiadomości e-mail lub wszystkich jednocześnie. Opcja ta stanowi również aktualizację treści e-mail. "Przywróć domyślną treść" dostępna jest w panelu administracyjnym e-Sklepu w menu Ustawienia/ Treści formalne/ Wysyłka e-mail i SMS na szczegółach każdej wiadomości, po kliknięciu w przycisk Więcej:  

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Jeśli posiadasz własne, dostosowane do Twojej komunikacji marketingowej treści e-mail, to sprawdź, czy są one odpowiednio napisane i sformatowane. Zastosuj się do poniższych wskazówek. W jaki sposób poprawnie napisać i sformatować treści?
  • Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
  • Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
  • Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
  • Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
  • Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
  • Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.
Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS  

3.Załączniki (m.in. instrukcje, katalogi)

Należy zadbać o to, aby wszystkie udostępniane w sklepie załączniki, takie jak instrukcje czy katalogi, były zgodne z wytycznymi WCAG, zapewniając tym samym ich pełną dostępność dla wszystkich użytkowników.  

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Przystosowanie e-Sklepu do wymogów nie musi wiązać się z dużymi wydatkami na zmiany w kodzie. Kluczowe aspekty dostępności można wdrożyć samodzielnie, wykorzystując opcje dostępne w systemach Comarch ERP, a także Kreatorze Wyglądu czy Panelu Administracyjnym. Warto pamiętać, że poprawa dostępności to nie tylko obowiązek wynikający z przepisów, ale także realna szansa na zwiększenie grona klientów oraz podniesienie komfortu ich zakupów. Istnieje kilka ogólnodostępnych narzędzi, które pomogą Ci dostosować sklep do wymogów. Obszerna lista narzędzi do oceny dostępności stron internetowych, zgodnych z WCAG znajduje się na stronie: Web Accessibility Evaluation Tools List .  

Podsumowanie

Dostępność cyfrowa to nie jednorazowe przedsięwzięcie, lecz ciągły rozwój i udoskonalanie. Regularne sprawdzanie funkcjonalności, optymalizacja elementów wizualnych i dostosowywanie sposobów interakcji pozwalają na stałe podnoszenie jakości doświadczeń użytkowników. Dążenie do pełnej zgodności ze standardami WCAG 2.1/2.2 oraz wymogami Europejskiego Aktu o Dostępności (EAA) nie tylko ułatwia nawigację wszystkim odwiedzającym, ale także buduje pozytywny wizerunek i wzmacnia pozycję na rynku. Wdrażanie kolejnych usprawnień to inwestycja w przyszłość, która przynosi korzyści zarówno właścicielom, jak i ich klientom.