PrestaShop widok mobilny: jak poprawić albo ukryć element na telefonie

Dlaczego element źle wygląda na telefonie?

Sklep na PrestaShop nie ma osobnej wersji mobilnej. Ten sam kod układa się inaczej, gdy ekran jest wąski. Problem zaczyna się, gdy któryś element nie umie się zwęzić.

Najczęściej psują się elementy dodane później: moduły innych firm, bloki tekstu wklejone z edytora, tabele rozmiarów w opisach produktów i paski z komunikatami. Motyw sam w sobie bywa w porządku.

Jak sprawdzić widok mobilny bez telefonu?

Szybki podgląd daje przeglądarka. W Chrome otwórz narzędzia programisty i włącz pasek urządzeń, jak opisuje instrukcja trybu urządzenia w Chrome. Wybierasz szerokość popularnego telefonu i od razu widzisz, gdzie strona się rozjeżdża.

Tryb urządzenia to przybliżenie. Zawsze sprawdź też prawdziwy telefon, najlepiej w oknie prywatnym, żeby nie oglądać starej wersji z pamięci przeglądarki.

Sprawdź po kolei:

1. Stronę główną.
2. Kategorię z filtrami.
3. Kartę produktu z długą nazwą i kilkoma wariantami.
4. Koszyk i pierwszy krok zamówienia.
5. Stronę z tabelą, na przykład tabelę rozmiarów.

Zapisz, na której stronie i przy jakiej szerokości problem się pojawia. To połowa poprawki.

Poprawić czy ukryć element na telefonie?

Najpierw spróbuj poprawić. Ukrycie jest szybkie, ale klient na telefonie traci informację, którą widzi klient na komputerze.

Ukrycie ma sens, gdy element:

• powtarza informację, która jest już wyżej na stronie,
• jest ozdobą bez treści,
• zasłania przycisk albo cenę i nie da się go łatwo przesunąć.

Nie ukrywaj opisu produktu, ceny, dostępności, czasu wysyłki ani informacji o zwrotach. Tego klient szuka na telefonie najbardziej.

Gdzie dopisać poprawkę CSS na telefon?

Do pliku custom.css w motywie potomnym. Reguły dla telefonu zamykasz w tzw. zapytaniu o media, czyli w bloku, który działa tylko poniżej wybranej szerokości ekranu. Jak to działa, opisuje MDN w przewodniku po zapytaniach o media.

Motyw potomny jest ważny z jednego powodu: aktualizacja motywu głównego nie nadpisze twojego pliku. Jak go zbudować i podpiąć własny plik stylów, wyjaśnia dokumentacja PrestaShop o motywach potomnych. Więcej o tym, czemu zmiany znikają po aktualizacji, piszemy w tekście aktualizacja szablonu usunęła zmiany.

Jakie poprawki na telefon są najczęstsze?

Większość problemów z widokiem mobilnym rozwiązuje kilka powtarzalnych poprawek. Każdą wpisujesz w blok dla wąskich ekranów, więc wersja na komputer zostaje bez zmian.

• Szeroka tabela w opisie produktu. Tabela rozmiarów z wieloma kolumnami rozpycha stronę. Zamiast ją zwężać, pozwól przewijać w bok samą tabelę, a nie całą stronę.
• Długie słowa i adresy. Kod rabatowy, adres e-mail albo długa nazwa materiału bez spacji wychodzi poza ramkę. Reguła łamania długich słów w tym jednym elemencie wystarczy.
• Okienko czatu nad przyciskiem do koszyka. Moduł czatu często ma własne ustawienie położenia na telefonie. Sprawdź je, zanim zaczniesz pisać CSS.
• Za duże nagłówki. Nazwa produktu w czterech liniach spycha cenę poza pierwszy ekran. Mniejszy rozmiar nagłówka na telefonie zwykle wystarcza.
• Trzy kolumny ikon. Bloki gwarancji, dostawy i zwrotów na telefonie lepiej wyglądają w jednej kolumnie z mniejszymi ikonami.

Poprawiaj jedną rzecz naraz i sprawdzaj stronę po każdej zmianie. Gdy kilka reguł zmienisz jednocześnie, trudno ustalić, która coś zepsuła.

Co sprawdzić po poprawce?

Po zapisie wyczyść pamięć podręczną w Zaawansowane → Wydajność. Gdy mimo to nie widzisz zmiany, przejdź przez listę z tekstu PrestaShop nie widać zmian.

Jak poprawić widok mobilny z Claude?

Opisujesz, co jest nie tak i na której stronie. Możesz wkleić do rozmowy zrzut ekranu z telefonu. Claude czyta pliki motywu i kod strony, ustala, która klasa odpowiada za element, i pokazuje regułę przed zapisem.

Ty

Na telefonie ikony gwarancji pod przyciskiem do koszyka zajmują pół ekranu. Ukryj je poniżej 768 px i zmniejsz tytuł produktu. Tylko w custom.css.

Claude

Ikony pochodzą z modułu gwarancji, klasa .blockreassurance_product. Motyw potomny ma pusty custom.css. Dopiszę:

było: (pusty plik)

będzie: @media (max-width: 767px) {

będzie: .blockreassurance_product { display: none; }

będzie: .product-container h1 { font-size: 1.25rem; }

będzie: }

Na komputerze nic się nie zmieni. Przed zapisem zrobię kopię pliku, potem wyczyszczę pamięć podręczną.

Ty

Tak.

Claude

Zapisane. Na stronie produktu reguła działa tylko poniżej 768 px. Sprawdź jeszcze na swoim telefonie w oknie prywatnym.

Rozmiary i nazwy klas w przykładzie są przykładowe, w twoim motywie mogą być inne. Przykład prośby jest w zastosowaniu ukrycie lub poprawka elementu na telefonie.

Zmiany w plikach motywu robi TellMyShop Pro po włączeniu przełącznika Motyw w panelu modułu. Przełącznik działa 24 godziny i wymaga kopii bazy zrobionej tego samego dnia. Przed każdym zapisem pliku powstaje jego kopia, a zmiana trafia do historii zmian, więc większość zmian cofniesz jednym poleceniem. Darmowa wersja TellMyShop Free plików motywu nie czyta i nie zmienia; pomoże przy raportach sklepu. Porównanie wersji jest w cenniku.