Karta produktu musi pomieścić dużo informacji, nie zamieniając się w ścianę tekstu. Zakładki odpowiadają na tę potrzebę, pod warunkiem że nie zakopie się w nich tego, co decyduje o zakupie, i że pozostaną czytelne dla wyszukiwarek.
Co PrestaShop daje natywnie
Domyślny motyw pokazuje z góry ustalone zakładki: opis, szczegóły produktu i ewentualne załączniki. Zainstalowane moduły mogą dodawać kolejne, każdy podpina się w to samo miejsce.
Dwa ograniczenia. Treść każdej zakładki odpowiada stałemu polu produktu, bez możliwości tworzenia własnych. A kolejność wyznacza pozycja modułów, nie zamysł redakcyjny.
Częsty efekt: zakładka «Opinie» przed zakładką «Parametry», podczas gdy klient chce najpierw sprawdzić specyfikację.
Zakładki czy akordeon
O tym rozstrzyga format ekranu.
Na komputerze zakładki poziome działają dobrze: wszystkie etykiety są widoczne, odwiedzający widzi, co jest dostępne, i wybiera.
Na telefonie zakładki poziome stają się kłopotliwe. Cztery czy pięć etykiet nie mieści się w szerokości, a przewijanie poziome ukrywa ostatnie. Akordeon pionowy, w którym każda sekcja rozwija się w miejscu, jest wyraźnie wygodniejszy.
Rozwiązanie, które działa, polega na przełączaniu formatu według szerokości ekranu, przy zachowaniu tej samej treści i tej samej struktury HTML.
Indeksowalność, punkt krytyczny
To aspekt, który większość wdrożeń traktuje źle.
Treść zwinięta w zakładce pozostaje indeksowalna, o ile znajduje się w kodzie HTML strony i jest tylko ukryta stylami. To zachowanie standardowe i nie sprawia żadnego problemu.
Natomiast treść ładowana po kliknięciu, wywołaniem asynchronicznym, nie istnieje w chwili pierwszej analizy strony. Może zostać zauważona przy późniejszym renderowaniu, ale nic tego nie gwarantuje, a jej waga w ocenie strony pozostaje niepewna.
Reguła jest więc prosta: cała treść zakładek musi znaleźć się w serwowanym HTML. Ładowanie opóźnione uzasadniają tylko ciężkie elementy, jak wideo czy stronicowana lista opinii.
Często pomijany dodatek: Google deklaruje, że treść ukrytą za interakcją traktuje w wersji mobilnej jako mniej ważną. To jej nie dyskwalifikuje, ale przemawia za pozostawieniem rozwiniętego tego, co najważniejsze.
Zakładki Karty Produktu PrestaShop 8 i 9: Menedżer Przeciągnij i UpuśćZakładki karty produktu na miarę, porządkowane przeciąganiem.€79,00
Jakie zakładki według typu produktu
Trzy układy, zależnie od charakteru katalogu.
Produkt techniczny. Parametry, kompatybilność, dokumentacja, gwarancja i serwis. Opis sprzedażowy zostaje krótki i rozwinięty powyżej.
Odzież i moda. Opis, skład i pielęgnacja, tabela rozmiarów, dostawa i zwroty. Tabela rozmiarów nie powinna siedzieć w zakładce, tylko obok selektora, a zakładka może zawierać wersję szczegółową.
Produkt spożywczy lub kosmetyczny. Opis, skład i alergeny, wartości odżywcze lub lista składników, przechowywanie, pochodzenie. Uwaga: informacje obowiązkowe muszą pozostać dostępne przed zakupem, co zakładka umożliwia, ale nie mogą być trudne do znalezienia.
Kolejność
Trzy zasady.
Pierwsza zakładka jest otwarta domyślnie i widzi ją niemal każdy odwiedzający. Kolejne ogląda malejący ułamek. Na początku umieść więc to, co usuwa najczęstszą obiekcję w danej kategorii.
Kolejność podąża za ścieżką decyzji, a nie za administracyjnym porządkiem pól. Opis, potem weryfikacja techniczna, potem uspokojenie, potem logistyka.
Kolejność może zależeć od kategorii. Przy produktach technicznych parametry idą przed opisem. Przy dekoracjach odwrotnie.
Puste zakładki
Problem systematyczny, gdy konfigurację stosuje się do całego katalogu: zakładka «Dokumentacja» wyświetlana przy produktach, które jej nie mają.
Oczekiwane zachowanie to automatyczne ukrycie każdej zakładki bez treści. Rzecz oczywista, a rzadko wdrożona, bo konfigurację robi się produkt po produkcie w prostych przypadkach i globalnie w pozostałych.
Przewidź też sytuację odwrotną: treść wpisana, ale żadna zakładka jej nie przyjmuje, przez co informacja jest niewidoczna.
Ile zakładek
Maksymalnie cztery do pięciu. Powyżej kumulują się dwa efekty: etykiety nie mieszczą się już w jednej linii, a odwiedzający przestaje je czytać.
Jeśli masz więcej treści, pytanie brzmi nie «jak dodać zakładkę», tylko czy ta treść w ogóle powinna być na karcie. Pełna instrukcja lepiej nadaje się do pobrania niż na szóstą zakładkę.
Link bezpośredni do zakładki
Przydatny i tani szczegół: możliwość wskazania konkretnej zakładki linkiem.
Przydaje się w trzech sytuacjach: link «zobacz opinie» obok oceny na górze karty, odesłanie z e-maila obsługi klienta i link z artykułu blogowego do sekcji technicznej produktu.
Technicznie wymaga to, żeby każda zakładka miała identyfikator, a skrypt otwierał właściwą zaraz po wejściu na stronę.
Moduł Zakładki Karty Produktu dla PrestaShop obsługuje tę konfigurację na PrestaShop 8 i 9: tworzenie własnych zakładek z kolejnością ustawianą przeciąganiem, konfiguracja według kategorii produktów, treść obecna w HTML dla zachowania indeksowalności, automatyczne ukrywanie pustych zakładek i przełączanie na akordeon na telefonie.