Ustawienia wyglądu sklepu internetowego dla urządzeń mobilnych

Wygląd sklepu internetowego w wersji na komputery stacjonarne najczęściej różni się od wyglądu na urządzeniach przenośnych (mobilnych). Wynika to z różnic w wielkościach ekranów poszczególnych urządzeń.

Ekrany w komputerach stacjonarnych mają rozdzielczości od 1024 pikseli szerokości. Taka szerokość ekranu umożliwia wyświetlenie na stronie sklepu dość wielu informacji - i co najważniejsze w czytelny dla użytkownika sposób.

Rozdzielczości urządzeń mobilnych (tabletów, telefonów) są dużo mniejsze - przez co ilość informacji wyświetlana na stronie sklepu powinna być ograniczona - co umożliwi zachowanie czytelności strony sklepu.

Aktualnie wszystkie szablony wykonuje się z technologi tzw. RWD. RWD to skrót od anglojęzycznego terminu "Responsive Web Design", czyli responsywny projekt strony internetowej. Responsywność oznacza dostosowanie projektu strony internetowej do różnych urządzeń, takich jak smartfony, tablety, laptopy i komputery stacjonarne, aby treści na stronie były czytelne, funkcjonalne i estetyczne na każdym urządzeniu.

Jeszcze kilka lat temu, kiedy standardem nie były szablony RWD - tworzone były osobne wersje szablonu na komputery stacjonarne oraz osobne dla urządzeń mobilnych. Było to rozwiązanie dość trudne do konfiguracji i dodatkowo zwiększało ilość kodu z jakiego składał się sklep.

Responsywny projekt sklepu internetowego zapewnia elastyczność i skalowalność treści, układów i elementów na stronie internetowej, co oznacza, że projekt jest w stanie przystosować się do różnych rozmiarów ekranów. Dzięki temu użytkownicy mogą korzystać ze strony internetowej bez względu na to, jakiego urządzenia używają, co zwiększa komfort korzystania z niej oraz skuteczność przekazywania treści.

Jednakże, żeby sklep był czytelny i poprawnie wyświetlał się na urządzeniach mobilnych trzeba w sklepie odpowiednio skonfigurować poszczególne opcje. Część elementów trzeba zminimalizować, część wyłączyć w wersji mobilnej. Dzięki temu zawartość sklepu w wersji dla małych rozdzielczości może być inna niż na komputery stacjonarne.

Poniżej opisujemy poszczególne opcje programu na które trzeba zwrócić uwagę podczas ustawienia wyglądu sklepu w wersji mobilnej.

• nagłówek sklepu - w menu Wygląd / Ustawienia wyglądu - zakładka "Nagłówek sklepu" można ustawić różne wersje nagłówka sklepu - osobno dla wersji na komputery stacjonarne, osobno dla wersji mobilnej (np. ustawić samo logo sklepu)
• boxy w kolumnach - w menu Wygląd / Boxy w konfiguracji każdego boxu (podczas jego edycji) dostępna jest opcja "Wygląd boxu przy małych rozdzielczościach" - w tym miejscu można wybrać co ma się dziać z boxem przy małych rozdzielczościach ekranu - boxy, które wyświetlają mniej potrzebne informacje zalecamy ustawić jako "niewidoczne", boxy - które muszą być w wersji mobilnej (np. kategorie) ustawić jako "zminimalizowane" - wtedy treść boxu nie będzie rozwinięta w wersji mobilnej - klient będzie mógł sam rozwinąć treść boxu
• moduły środkowe - w menu Wygląd / Moduły środkowe podobnie jak w przypadku boxów każdy moduł ma dodatkową konfigurację wyglądu dla urządzeń mobilnych - można ustawić czy moduł ma pozostać bez zmian, czy ma być wyświetlany lub nie na urządzeniu mobilnym - dzięki tym ustawieniom można wyłączyć część elementów w wersji mobilnej - np. bannery graficzne, które przy małej rozdzielczości nie będą dobrze widoczne - można także ustawić określone moduły do wyświetlania tylko w wersji mobilnej
• kolumny w kreatorze modułów - w menu Wygląd / Moduły środkowe - moduły stworzone poprzez "Kreator modułów" mają dodatkową opcję - dla każdej kolumny kreatora można wyłączyć jej wyświetlanie na urządzeniach mobilnych - służy do tego opcja "Czy wyświetlać tą kolumnę przy małych rozdzielczościach" - opcja ta może mieć zastosowanie np. w module dwukolumnowym gdzie jedna część składa się np. z opisu - druga z produktów - w wersji mobilnej tekst jest niepotrzebny i można go wyłączyć
• ilość kolumn w kreatorze modułów - podczas edycji modułu stworzonego poprzez "Kreator modułów" przy wyświetlaniu produktów, recenzji, opinii o sklepie można wybrać w ilu kolumnach mają się wyświetlać pozycje w różnych rozdzielczościach ekranu - trzeba tak ustawić ilość kolumn, żeby przy każdej z podanych rozdzielczości produkty były wyświetlane w czytelny sposób

Korzystając z w/w ustawień - odpowiednio ukrywając moduły czy boxy lub je minimalizując można ustawić wygląd mobilny sklepu na najbardziej przyjazny i czytelny dla klienta. Przy konfigurowaniu ustawień należy pamiętać, że wersja mobilna nie musi wyświetlać wszystkich informacji, które są wyświetlanie na komputerach stacjonarnych. Trzeba tak ustawić wyświetlanie elementów, żeby sklep wyświetlał najważniejsze z nich.