Shoper Visual Editor w Storefront z własnym systemem wizualnym i poprawioną nawigacją

Zmiany wizualne w Shoper Visual Editor – dlaczego teraz?

Shoper Visual Editor w technologii Storefront doczekał się nowego wyglądu. Do tej pory był on kopią edytora przeznaczonego dla szablonów działających w starej technologii, do której systematycznie dodawaliśmy kolejne funkcje, takie jak: drzewkowa struktura strony, gotowe układy sekcji czy duplikowanie elementów. 

W efekcie końcowym oba edytory pomimo gigantycznych różnic w funkcjonalnościach wyglądały praktycznie tak samo.

Shoper Visual Editor w starej technologii

Shoper Visual Editor w technologii Storefront

Takie podejście pozwoliło na szybsze wydanie edytora oraz poświęcenie więcej czasu na testy, doskonalenie interfejsu i poznanie oczekiwań klientów, co do dalszego rozwoju narzędzia. 

Na podstawie informacji zebranych podczas testów i wywiadów z klientami stworzyliśmy uporządkowany interfejs, który jest przygotowany do wdrażania nowych funkcji, zaplanowanych na kolejne kwartały.

Co się zmieniło w działaniu Shoper Visual Editor?

Nowy układ edytora zapewni Ci komfortową pracę niezależnie od tego, czy korzystasz z ekranu laptopa, czy z dużego szerokiego monitora. Formularze edycji modułów otworzą się w nowym panelu bocznym, umieszczonym z prawej strony ekranu, a więc nie będą już zasłaniać listy elementów strony. Oba panele można swobodnie zwijać, jeśli w danym momencie nie są potrzebne. 

Dwa panele boczne w nowym Shoper Visual Editor

W lewym panelu znajduje się wyłącznie uproszczona struktura strony. Wiemy, że jest to ważny element nawigacyjny podczas pracy w Shoper Visual Editor, więc żeby zrobić dla niego jak najwięcej miejsca, usunęliśmy stąd link do listy modułów, listę wyboru stron i listę wersji językowych sklepu. Elementy te zostały odpowiednio zaopiekowane, o czym przeczytasz w dalszej części tego artykułu.

Taki zabieg to ukłon w stronę osób, korzystających z edytora na laptopach, których ekrany posiadają zwykle mniejszą rozdzielczość. Na takich ekranach mieścił się zwykle niewielki wycinek listy elementów na uproszczonej strukturze strony, przez co ograniczony był potencjał niektórych akcji, np. przenoszenia elementów w obrębie tej listy.

Z kolei do prawego panelu bocznego została przeniesiona edycja elementów szablonu, czyli sekcji, wierszy, kolumn i modułów.

Można pracować z bocznymi panelami włączonymi jednocześnie. Jest to odpowiedź na prośby klientów, którzy korzystają z dużych ekranów. Jak wynika z analiz największy odsetek użytkowników platformy Shoper korzysta z rozdzielczości ekranu 1920px x 1080px.

Dzięki zastosowanemu podziałowi przestrzeni edytora otrzymujesz:

• uproszczoną strukturę strony cały czas na wierzchu, dzięki której możesz kontrolować czy np. nowy moduł dodano w odpowiednim miejscu,
• możliwość płynnej i swobodnej pracy – nie musisz zamykać formularza edycji, żeby wrócić do widoku struktury.

Użytkownicy, którzy korzystają z ekranów o mniejszej rozdzielczości, mogą zwinąć ten boczny panel, z którego w danym momencie nie korzystają.

Powiększanie i pomniejszanie obszaru roboczego edytora

Funkcja powiększania i pomniejszania obszaru roboczego pozwala jeszcze lepiej dopasować widok edytowanej strony w zależności od rozdzielczości ekranu, na którym pracujesz.

Ułatwi to także sprawne wykonanie konkretnych czynności, np. przeniesienie całej sekcji z góry strony na sam dół, szczególnie kiedy strona jest dość długa.

Automatyczne dostosowanie podglądu

Możesz skorzystać z opcji automatycznego dopasowania podglądu edytora niezależnie od tego, z jakiej rozdzielczości ekranu korzystasz.

Lista modułów dostępna w głównym menu edytora

Dostęp do listy modułów znajduje się w miejscu, które jest cały czas na wierzchu. Dzięki takiemu rozwiązaniu przyśpieszamy pracę w edytorze.

Mniej szukania, mniej scrollowania, mniej klikania. Jest to także odpowiedź na jedną z najczęściej zgłaszanych sugestii przez użytkowników.

Lista wyboru edytowanej strony zawsze na wierzchu

Przenieśliśmy listę z wyborem edytowanych stron do górnej części edytora, która także jest widoczna cały czas podczas pracy w edytorze. Ponadto wszystkie poziomy tej listy widoczne są jednocześnie.

Co się zmieniło w wyglądzie Shoper Visual Editor?

Na potrzeby Shoper Visual Editor w technologii Storefront powstał nowy system wizualny. Składa się on z ujednoliconych, elastycznych elementów, zgodnych z rynkowymi standardami oraz brandingiem Shopera.

System ten nadal będzie rozwijany. Co ważne korzystają z niego także twórcy integracji i dodatków. Dzięki temu wygląd dostarczanych aplikacji jest estetyczny oraz spójny z całym kreatorem. 

Jak włączyć nowy wygląd Shoper Visual Editor?

Nową wersję edytora uruchomisz, przechodząc do menu hamburgerowego zlokalizowanego w lewym górnym rogu edytora i klikając: Włącz/wyłącz nowy wygląd SVE