Wielowariantowość – jak przedstawić wiele opcji produktu bez przepełniania listingu i przytłaczania użytkownika? 

Taki kłopot może mieć wiele e-sklepów, które mają bogatą ofertę produktową, a dodatkowo konkretny produkt występuje w wielu wariantach – np. kolorystycznych. Odrębna karta produktu dla wariantu powoduje automatyczne wciągnięcie go na listing kategorii, który zaczyna rozrastać się do absurdalnych rozmiarów. Biorąc pod uwagę UX, to wręcz fatalne rozwiązanie. Tak byłoby w standardzie. Jak my to rozpracowaliśmy? 

Kluczowa w tym przypadku jest wielowariantowość – to najważniejsze rozwiązanie techniczne, z którego korzysta sklep Vokato. Oparliśmy je na kombinacjach – jednym z podstawowowych narzędzi PrestaShop, ale jest ono tak dalece zmodyfikowane, że w zasadzie można mówić o nowym, stworzonym od zera rozwiązaniu. 

Na tej funkcjonalności bazują produkty i zestawy produktów, które mają wiele wariantów. Dzięki niej: 

• zawartość listingu można skompresować do jednego produktu, który reprezentuje wszystkie warianty,
• warianty wywoływane są wewnątrz karty produktu, przy czym każdy z nich stanowi osobną instancję. 

Od strony wizualnej:

• widok listingu został dopracowany w szczegółach; oparty jest na zdjęciach z interaktywnymi elementami – ikonami kolorów czyli dostępnymi wariantami kolorystycznymi; najazd na ikonę koloru powoduje zmianę zdjęć produktu w jednym wariancie kolorystycznym na inny. 

Moduł SEO – dedykowane SEO dla wariantów produktów

To dalsza część naszej customowej modyfikacji wielowariantowości. Dzięki niej można tworzyć dedykowane SEO dla każdego z wariantów produktów. 

Po tym, jak ograniczyliśmy listing na stronie kategorii, a każdy z wariantów produktu wywoływany jest wewnątrz karty produktu, zadbanie o SEO stało się priorytetem. We wcześniejszym sklepie nasz Klient rozwinął pozycjonowanie każdego z wariantów i oczywiście chciał zachować te osiągi. Skorzystanie z bazowego narzędzia PrestaShop doprowadziłoby do utraty wypracowanych linków w indeksie Google, które odpowiadają wariantom. Uniemożliwiłoby też tworzenie dedykowanego SEO dla wariantu produktu.

By temu zapobiec, stworzyliśmy moduł SEO, który:

• pozwala dla każdej kombinacji produktu stworzyć dedykowane SEO – wprowadzić: unikalny tytuł, opis, przyjazny link, metadane (meta title, meta description),
• sprawia, że każdy kombinacja produktu figuruje jako niezależna instancja w kodzie strony, a na listingu jako jedna pozycja produktu wielowariantowego.

Przemyślana komunikacja wizualna wspierająca wielowariantowość – karta produktu i karta zestawu 

Wywoływanie wariantów na karcie produktu lub zestawu daje jeszcze inne korzyści. Użytkownik z poziomu karty może przeglądać i wybierać wszystkie dostępne opcje produktu, bardzo płynnie przemieszczać się pomiędzy wariantami, porównywać je. Wspiera to przemyślana i dopracowana w detalach komunikacja wizualna, w której duży nacisk położyliśmy na UX.  

Przekaz wizualny jest bardzo klarowny, przy tak dużej liczbie elementów.

Na karcie produktu: 

• wykorzystaliśmy ikony kolorów; po kliknięciu prezentowany jest produkt w wybranym wariancie,
• dodatkowo zastosowaliśmy harmonijkę – dostępne warianty są zwinięte, jeśli nie mieszczą się w jednym wierszu; jego kliknięcie wywołuje rozwinięcie wszystkich dostępnych opcji.

Na karcie zestawu:

• sekcja opcje kolorystyczne – zaprezentowana w formie małych zdjęć ułożonych w wierszu,
• sekcja produkty w zestawie – maksimum opcji wyboru w estetycznej, prostej formie, przyjaznej użytkownikowi; elementy zestawu są zaprezentowane w przejrzysty sposób – ze zdjęciem i niezbędnymi informacjami; nazwy elementów zestawu są jednocześnie linkami prowadzącymi na ich kartę produktu; ta sekcja może mieć dużo bardziej rozbudowaną formę, pozwalającą zaprezentować dodatkowe opcje personalizowania produktu (np. wybrać kolor nóg krzesła);  

Duży nacisk został położony na sposób prezentacji produktów i informacji o nich. Na karcie produktu wykorzystywane są:

• zdjęcia 360⁰ (opcja wgrania ich dla każdego wariantu produktu),
• pliki svg – rozwinęliśmy podstawową sekcję cech produktu; dzięki opcji wgrania pliku svg dodatkowe informacje o produktach są przedstawione w bardziej estetyczny i przyjazny sposób – jako ikony informacyjne, a nie suchy tekst.

Inteligentne sugerowanie zestawów i innych produktów

W wielu e-sklepach up selling, cross selling czy prezentowanie produktów z tej samej kategorii mają charakter przypadkowy. Tak działają obsługujące je moduły w swoim podstawowym zakresie. Wyświetlane przedmioty nie są powiązane z tym, czym faktycznie zainteresowany jest użytkownik. Potencjał sprzedażowy tych narzędzi jest w dużej mierze marnowany lub niewykorzystywany w pełni. 

Ale działanie tych modułów można zmodyfikować. Można zoptymalizować je tak, by rzeczywiście korespondowały z indywidualnymi potrzebami zakupowymi użytkownika, szły za jego wyborami, ułatwiały mu poruszanie się w bogatej ofercie produktowej, a tym samym zwiększały szanse na zakup lub podniesienie wartości koszyka. 

Jak to zrobiliśmy? 

• Inteligentne sugerowanie zestawów – to nasza customowa modyfikacja modułu Advanced Pack 5  stworzona dla Vokato; jeśli Klient sklepu przegląda produkty, które występują również w zestawach, zobaczy je na karcie produktu w sekcji ‘produkty w zestawach’; co tutaj najważniejsze – sugerowane zestawy będą dotyczyć konkretnego wariantu – koloru produktu, który w tym momencie przegląda; to, co się wyświetli nie jest przypadkowe, a ściśle powiązane z wyborem Klienta; rekomendowane zestawy dla danego produktu filtrują się na bazie wybranego już wcześniej koloru;
• Produkty w tej samej kategorii – podobnie jest z tą sekcją; użytkownikowi zostaną przedstawione produkty o parametrach podobnych do tego, którym właśnie jest zainteresowany – np. jeśli ogląda zestaw stół + 2 krzesła, nie zobaczy zestawów z większymi stołami czy większą ilością krzeseł, ale jeszcze więcej opcji produktu, który już wybrał.

Filtry SEO – dedykowane SEO dla filtrów wyszukiwarki produktów

Filtry SEO to dodatkowa funkcjonalność SEO dedykowana kategorii produktów – stworzona, by móc pozycjonować kategorie produktów o podobnych cechach. Klasyczne pozycjonowanie wymaga utworzenia kategorii i podkategorii niższych rzędów, by wypozycjonować np. krzesła czerwone glamour welurowe. O ile w kontekście SEO to świetne rozwiązanie, to dla użytkownika końcowego, szczególnie jeśli mowa o UX, wręcz fatalne. Drzewo kategorii rozrosłoby się do absurdalnych rozmiarów, a ten problem chcieliśmy przecież wyeliminować, wprowadzając wielowariantowość. 

Nasza funkcjonalność pozwala dla wybranego wyfiltrowania tworzyć dedykowane:

• adres url, tytuł (h1), metadane, opis górny i dolny canonical.

Pozycjonowanie grup produktów o podobnych cechach 

Wszystkie wymienione elementy są tworzone na bazie filtra, a nie drzewa kategorii. Dzięki temu możemy pozycjonować oddzielnie grupy produktów posiadające podobne cechy np. krzesła czerwone kubełkowe lub zielone welurowe itd. Dla filtra generowana jest podstrona, która ma zestaw swoich ustawień, niezależny od strony kategorii. Pozycjonujemy tylko to, co faktycznie chcemy pozycjonować i tylko wtedy, kiedy filtr jest zdefiniowany pod pozycjonowanie. 

GA4 – analityka SEO na zaawansowanym poziomie

• Analityka GA4 to zdecydowany must have. Ale tutaj trzeba wiedzieć, że duże znaczenie ma poziom jej wdrożenia. Badanie samych wejść na stronę jest jedynie podstawą, często niewystarczającą. Wdrożenie dla Vokato jest dużo bardziej zaawansowane, analizie podlega wiele zdarzeń. Przeprowadziliśmy je według szczegółowych wytycznych SEO. W przypadku PrestaShop wdrożenie GA4 wymaga dopracowania. 

Współdzielone stany magazynowe – zaawansowana funkcjonalność dla produktów, które użytkownik może konfigurować

• Sklep Vokato daje swoim Klientom możliwość konfiguracji niektórych produktów – np. do siedzisk w różnych wariantach kolorystycznych można dobrać nogi także w różnych wariantach (drewniane czarne, metalowe itd.). Taka opcja wymagała stworzenia zaawansowanego narzędzia, które umożliwia kontrolowanie stanów magazynowych poszczególnych elementów używanych do stworzenia produktu. 

Personalizowany widget prezentujący opinie o produkcie

• W tym rozwiązaniu połączyliśmy opinie pochodzące z TrustMate z modułem opinii PrestaShop, tworząc spersonalizowany widget. Dzięki niemu, opinie z obu źródeł wyświetlane są w jednej sekcji (otagowane źródłem), a warstwę wizualną samej sekcji mogliśmy spersonalizować tak, żeby odpowiadała estetyce strony. 
• Przeprowadziliśmy również import opinii ze starego sklepu, dostosowując je do specyfiki  wielowariantowości – opinie wyświetlają się dla wszystkich wariantów produktu. Napisaliśmy i wdrożyliśmy widget zliczający je. Nowo wystawiane opinie są dodawane na stronę automatycznie, w oparciu o cron’a (łącznie z aktualizacją zmian w ich treści lub ich usunięciem). 

HTML Blocks – nasz moduł wykorzystany w kolejnym sklepie

• Po raz kolejny wykorzystaliśmy napisany przez nas moduł HTML Blocks. Okazuje się, że to bardzo przydatne, uniwersalne narzędzie. HTML Blocks umożliwia łatwe edytowanie wielu elementów graficznych, z których budować można całe podstrony lub określone sekcje. Sklep Vocato korzysta z niego w bardzo szerokim i różnorodnym zakresie. 

Kalkulacja wysyłek pod kontrolą

• Meble są bardzo specyficznym produktem, jeśli chodzi o ich wysyłkę. Jak najbardziej precyzyjna kalkulacja ceny dostawy przy ogromie zmiennych i różnic w kosztach przesyłki nie jest łatwą sprawą. Dużo czasu poświęciliśmy na analizę tego zagadnienia – dla naszego Klienta była to jedna z priorytetowych kwestii do rozwiązania. W grę wchodził bardzo zaawansowany kalkulator do analizy zawartości koszyka z wszelkimi opcjami związanymi z optymalnym pakowaniem produktów. Mogliśmy go zrobić, ale zarzuciliśmy tę opcję ze względu na wysokie koszty wdrożenia i duży poziom skomplikowania w obsłudze takiego narzędzia. Znaleźliśmy inne rozwiązanie, bardziej optymalne pod względem kosztów wdrożenia i efektów końcowego działania. Zmodyfikowaliśmy standardowe dla PrestaShop mechanizmy kalkulacji wysyłki, dodając pewne pola i dostosowując do potrzeb Klienta sposób kalkulacji wysyłek. Efekt jest naprawdę zadowalający.