19.3.2024

Na co zwrócić uwagę projektując stronę z listą produktów w Shopify?

Strona z listą produktów lub Product Listing Page (PLP) to jeden z głównych widoków sklepu internetowego, na który trafiają nowi i powracający klienci. Zdradzimy Ci zasady projektowania tego rodzaju strony i opowiemy Ci, jak dążyć do jego optymalizacji. Zaczynajmy.

Nie tak dawno omówiliśmy kwestię projektowania strony głównej, a także poruszyliśmy kwestię optymalizacji karty produktu w Shopify. W tym artykule zajmiemy się stronę z listą produktów. Dobrze zaprojektowana strona tego rodzaju może przyczynić się do wzrostu konwersji lub wartości zamówienia. Omówimy, jak zadbać o taką stronę i podzielimy się naszymi sztuczkami, które zwiększają CTR tej strony.

Strona z listą produktów Shopify - co to jest?

Strona z listą produktów zawiera wszystkie produkty w kategorii, kolekcji Shopify lub tagu. Produkty zazwyczaj mieszczą się na kafelkach. Użytkownik, który przegląda taką stronę, widzi zdjęcie lub film o prezentowanym produkcie i krótki opis. Po kliknięciu na kafelek przechodzi do karty produktu.

Jak wygląda taka strona? Zobaczmy na przykładzie. Tworząc sklep dla marki modowej na Shopify mamy wiele interesujących przykładów szablonów do użycia w naszym sklepie (zobacz: Które szablony Shopify pasują do sklepów fashion?). Wejdźmy w podgląd jednego z nich, np. darmowego Debut. Po tym, jak klikniemy w menu na kategorie „New Arrivals”, widzimy stronę z listą produktów.

Oto jak wygląda strona z listą produktów na przykładzie darmowego szablonu Shopify Debut; strona jasno informuje nas, ile jest produktów w danej kategorii i pozwala nam na sortowanie i filtrowanie produktów, a także przejście na podstronę z produktem

Strona z listą produktów jest ważna dla sklepu i wzrostu sprzedaży. Na taką ze stron trafiają klienci na różnym etapie swojej ścieżki zakupowej. Odwiedzają ją nowi i powracający klienci, ponieważ pozwala zapoznać się z ofertą sklepu, rozejrzeć się niezdecydowanym użytkownikom, a nawet znaleźć produkt - być może taki, dla którego odwiedzili witrynę.

Szablon Shopify Debut w panelu edycji projektu sklepu

Aby śledzić efektywność strony, zainstaluj jedno z narzędzi analitycznych, które pokazuje, co przykuwa uwagę odwiedzających, np. HotJar lub śledź kliknięcia i współczynnik odrzuceń za pomocą Google Analytics. Takie obserwacje pomogą Ci dowiedzieć się, czy strona spełnia swoje zadanie.

Jak zaprojektować stronę z listą produktów w Shopify?

Jeśli korzystasz z szablonu pobranego ze strony Shopify lub twój sklep został zaprojektowany przez naszą agencję, to twoim jedynym zadaniem jest jego optymalizacja w trakcie rozwoju sklepu (zobacz: Tego unikaj wprowadzając zmiany w szablonie Shopify). Jednak jeśli projektujesz stronę z listą produktów samodzielnie, zwróć uwagę na następujące aspekty.

Umieść produkty w odpowiedniej kategorii

Chcesz zaprojektować funkcjonalną i przejrzystą stronę z listą produktów? Zanim skupisz się na rozmieszczeniu elementów, zaplanuj podział produktów na kategorie lub kolekcje.

Załóżmy, że produkujesz kosmetyki dla zwierząt. Jak będzie wyglądał podział produktów w sklepie? Czy podstawowym podziałem będzie rozróżnienie na zwierzę, dla którego tworzysz kosmetyki? A może skupisz się jedynie na rodzaju produktu (tj. produkty do higieny, akcesoria, itd.)?

Lista produktów nie powinna być przypadkowa. Z pewnością nie umknęło to twojej uwadze w trakcie przeglądania innych sklepów internetowych. Np. oglądając sklepy modowe, zazwyczaj rozróżnia się na ubrania dla kobiet, mężczyzn oraz dzieci, a wszystkie z nich należą do odpowiedniej podkategorii np. koszulki, spodnie, akcesoria, a także są podzielone według kolekcji, w której się znalazły.

Ponadto sklepy internetowe zazwyczaj uwzględniają kategorie z nowościami, promocjami, produktami na wyprzedaży, outletem i bestsellerami. Klienci, którzy lubią szukać ofert specjalnych, mogą wejść na stronę z listą produktów o obniżonej cenie. Z kolei inni poczują się skuszeni podstroną, która pokazuje, jakie produkty kupują inni.

Toys’R’Us to ogromny sklep, dlatego nikogo nie dziwi, że ma dużo stron z listami produktów. Zwróć uwagę na podział produktów. W sklepie możesz znaleźć zabawki z podziałem na typ i wiek dziecka. Przeczytaj case study Toys’R’Us, który przenieśliśmy z Magento na Shopify

Od czego zacząć planowanie kategorii w sklepie?

  • przeprowadź badania UX - specjaliści UX stosują specjalne ćwiczenie zwane sortowaniem kart; dzięki temu ćwiczeniu są w stanie przekonać się na własne oczy, w jaki sposób użytkownik przypisałby produkty do kategorii w sklepie Shopify; przeczytaj więcej w artykule Co musisz wiedzieć o badaniach UX w e-commerce?;
  • zobacz, co robi konkurencja - analiza konkurencji służy nie tylko analizie pozycjonowania marki, patrząc na konkurencje możesz zwrócić uwagę na podział produktów w sklepie online;
  • pomyśl, w którym kierunku chcesz się rozwijać - być może w tej chwili masz mało produktów i nie widzisz sensu w skrupulatnym podziale produktów, jednak w przyszłości sytuacja może się zmienić; przy planowaniu kategorii, weź pod uwagę następny krok w rozwoju biznesu.

Zwykły arkusz w Excelu wystarczy do planowania kategorii w sklepie, a w Internecie znajduje się pełno wskazówek na ten temat. Poszukaj informacji na temat architektury informacji w e-commerce.

Zezwól na filtrowanie

Podział na kategorie ma wpływ na to, jakie produkty znajdują się na stronie z listą. Co zrobić, gdy tych produktów jest dużo i użytkownik nie ma czasu (lub chęci) na przeglądanie witryny? Z pomocą przychodzi filtrowanie produktów.

Większość szablonów Shopify ma wbudowane filtrowanie produktów. Jeśli budujesz szablon od zera, uwzględnij filtr produktów ze względu na:

  • cenę (rosnąco)
  • cenę (malejąco)
  • alfabetycznie (od A do Z)
  • alfabetycznie (od Z do A)
  • od najnowszych produktów
  • od najstarszych produktów
  • od najpopularniejszych
  • od najbardziej polecanych

Filtry związane z ceną i nowością są najbardziej popularne. Jeśli nie wiesz, jakie filtry ustawić, zobacz, jak robią to sklepy o dużym budżecie, które mają dedykowany zespół projektantów np. Answear, Zalando lub zapytaj użytkowników twojego sklepu o zdanie.

303 Avenue ma aż 8 filtrów, które są ukryte pod etykietą „Sortuj” u góry strony z listą produktów (przeczytaj case study 303 Avenue)

Zadbaj o to, aby użytkownik wiedział, na której stronie się znajduje

Im więcej produktów, tym łatwiej o zgubienie się na stronie, a w konsekwencji opuszczenie jej bez dokonania zakupu. Upewnij się, że klient wie, w którym miejscu jest na stronie i ile produktów zostało do obejrzenia.

Osiągniesz to, dzięki umieszczeniu kategorii z lewej strony oraz dzięki paginacji stron. Najłatwiej wytłumaczyć to na przykładzie. Poniżej przedstawiamy zrzut ekranu ze strony sklepu, który pomogliśmy stworzyć - Kokosek. Z lewej strony jest lista kategorii z pogrubioną kategorią, w której właśnie się znajdujemy. Sklep wykorzystuje również paginację, czyli numerowanie stron, dzięki temu użytkownik czuje większy komfort w trakcie korzystania ze strony, a sama strona ładuje się szybciej.

Kokosek to sklep internetowy dla najmłodszych. Zobacz case study.

Paginacja nie jest konieczna, gdy kategoria ma zaledwie kilka produktów, jednak przy większych kategoriach jest bardziej praktyczna. Jeśli nie chcesz stosować paginacji, możesz dodać do strony przycisk „Do góry” (“Back to Top”), który wyświetla się w prawym dolnym rogu po zescrollowaniu w dół i prowadzi użytkownika z powrotem na górę strony.

Ponownie odwiedzamy sklep Toys’R’Us. Sklep nie ma paginacji na stronach z listą produktów, ale stosuje strzałkę, po której kliknięciu użytkownik przenosi się na górę strony

Spraw, aby cena i nazwa były widoczne

Kafelki produktów powinny informować klienta o tym, jak produkt się nazywa i ile kosztuje (czasem nazwa zawiera typ produktu np. plakat). Dzięki temu użytkownicy sklepu łatwiej dostrzegą produkty, który ich interesują.

Niektóre sklepy stosują też skrócone opisy produktów. Oprócz nazwy i ceny dodają markę lub opisują, czym jest produkt np. szary płaszcz z wełny Merino X, zazwyczaj taka sama nazwa widnieje na karcie produktu.

Oprócz ceny i nazwy produktu, 303 Avenue pokazuje też dostępne warianty kolorystyczne, a po pokierowaniu myszką na kartę, widzimy też dostępne rozmiary. Ciekawi Cię, jak inne sklepy fashion podchodzą do strony z produktami? Zobacz nasz post o sklepach fashion na Shopify.

Pozwól użytkownikowi dostosować ilość produktów na stronie

Jedną z często stosowanych praktyk UX na stronie z listą produktów jest umiejscowienie u góry opcji, dzięki której możemy zmienić układ kafelków na stronie np. z czterech lub trzech na dwa, a nawet jeden. Dzięki temu użytkownicy widzą zdjęcia w przybliżeniu lub oddaleniu.

Nie jest to konieczne dla sklepów sprzedających kosmetyki lub zapachy, jak np. Bulk Homme lub Gya Labs, ale dla marek lifestyle lub fashion, gdzie liczy się prezentacja produktu, może to mieć wpływ na zatrzymanie klienta na stronie. Zobacz na przykładzie sklepu, który pomogliśmy otworzyć - Osnowa.

Subtelny przycisk w lewym, górnym rogu pozwala użytkownikowi na zmianę układu strony; w tym momencie włączyliśmy układ przybliżony

Użyj etykiet, aby zwiększyć sprzedaż

Etykiety są świetnym sposobem na zdobycie uwagi osoby przeglądającej sklep i przekonaniem jej na przejście na kartę produktu i dowiedzenie się więcej. Pisaliśmy o tym w polecanych aplikacjach Shopify dla sklepów fashion. Etykieta „bestseller”, „wyprzedaż” lub „ostatnie rozmiary” na zdjęciu produktowym z pewnością wyróżni produkt na tle pozostałych.

Sklep może wykorzystać też etykiety, które poinformują klienta, że nie warto przenosić się na kartę produktu. Np. etykieta „wyprzedany” da klientowi znak, że produktu już nie ma w ofercie. Z kolei „nowy” da klientowi znak, że sklep się rozwija.

Sklep, któremu pomagaliśmy przy developmencie - Attire the Studio - stosuje delikatne etykiety, na produktach, które zostały wyprzedane (Przeczytaj, na czym polegała nasza współpraca)

Zachęć do umieszczenia na liście ulubionych lub dodania do koszyka

Strona z listą produktów to świetne miejsce do zachęcenia użytkownika, aby kupił produkt lub dodał wybrany produkt do listy życzeń. To wszystko da się osiągnąć na kafelku z produktem. Kto wie? Może to podniesie twoją konwersję? Klient będzie mógł w spokoju przejrzeć produkty, które przypadły mu do gustu i zdecydować, które z nich chce zamówić.

Zauważ, że u góry każdego kafelka z produktem w sklepie Toys’R’Us znajdują się dwie ikony. Klikając serduszko, dodamy produkt do listy ulubionych, a wózek z zakupami oznacza, że chcemy dodać produkt do koszyka. Proste, co nie?

Zadbaj o SEO

Efektywny projekt sklepu dba również o twoją widoczność w wynikach wyszukiwania. W końcu SEO to jedna z efektywnych strategii przyciągnięcia klienta na stronę. Google zwraca uwagę na zawartość witryny, a strona z listą produktów to jej duży element. Wyszukiwarki indeksują wszystko i dla nich podział na kategorie, paginacja i szybkość ładowania strony ma znaczenie. Google również zwraca uwagę na aspekty UX.

Jeśli chcesz dowiedzieć się więcej o SEO sklepów, przeczytaj nasz wpis o tym, jak zadbać o pozycjonowanie sklepów na Shopify.


Potrzebujesz pomocy w tworzeniu lub optymalizacji sklepu na Shopify?

To już wszystko, co dla Ciebie przygotowaliśmy odnośnie tworzenia stron z listingiem produktów. Pamiętaj, że wprowadzając zmiany, warto obserwować stronę i pytać użytkowników o zdanie. Jeśli potrzebujesz pomocy w zarządzaniu techniczną stroną sklepu na Shopify, zwróć się do nas. Jesteśmy tu, aby Ci pomóc.

Więcej: https://wecanflyagency.com/services/growth/shopify-ux-usability-audit

Zacznijmy od rozmowy

Idealnym pierwszym krokiem będzie krótka rozmowa, w trakcie której opowiesz nam przed jakim wyzwaniem stoisz.

WYŚLIJ ZAPYTANIE

Być może zainteresuje Cię również

Nie ważne jak byśmy się nie starali, zawsze znajdzie się grupa klientów, którzy opuszczą sklep bez finalizacji zakupu. Problem zaczyna się, gdy to my - osoby, które zarządzają sklepem - nieświadomie przyczyniamy się do liczby porzuconych koszyków w sklepie. Zobaczmy, na co zwracać uwagę, aby rozwiązać problem porzuconych koszyków w sklepie na Shopify.

Karta produktu to jedna z najważniejszych części składowych sklepu internetowego. Jej zadanie jest proste - dostarczyć potencjalnemu klientowi wszystkie przydatne informacje, które skłonią go do zakupu. Czy twoja karta produktu spełnia to zadanie? Zobacz, jak ją zoptymalizować.