Karty produktów w Shoperze szyte na miarę - jak przerobiłem je od zera

Karta produktu to moment, w którym przeglądanie zamienia się w zakup. Klient już nie szuka - patrzy na konkret: zdjęcie, cena, przycisk. To na liście kategorii i w wynikach decyduje, czy w ogóle kliknie dalej. A w większości sklepów na Shoperze ta karta wygląda dokładnie tak samo, bo jest gotowym elementem szablonu. Te same proporcje, ten sam przycisk, ten sam układ, który ma konkurencja obok.

Od jakiegoś czasu schodzę coraz głębiej w design Shoper Storefront. Nie w to, co widać w panelu, tylko w to, jak ten front jest zbudowany pod spodem - i co da się w nim zrobić lepiej, niż przewiduje motyw. Karta produktu była naturalnym kolejnym krokiem. Przebudowałem ją od zera: nowocześniej, lżej i szybciej, na żywym sklepie. Opiszę, co się zmieniło i dlaczego to nie jest „kosmetyka”.

Domyślna karta to kompromis, nie wybór

Gotowa karta w Shoperze jest poprawna i nijaka jednocześnie. Działa, ale niczego nie sprzedaje. Kilka rzeczy zwłaszcza kłuło w oczy:

• Zdjęcia rozjeżdżały się w pionie. Produkty mają różne proporcje, a karta dopasowywała wysokość obrazka do zdjęcia. Efekt: nierówna siatka, w której oko nie ma się o co zaczepić.
• Cena promocyjna ginęła. Przekreślona „stara” cena i rabat albo się nie pokazywały, albo lądowały w osobnej linijce, daleko od ceny aktualnej. Klient nie widział, że to okazja.
• Przycisk był tłem, nie wezwaniem. Szary, mały, taki sam jak wszystko dookoła.

To nie są błędy - to świadome kompromisy szablonu, który ma pasować do każdego sklepu. Problem w tym, że „pasować do każdego” znaczy „nie być skrojonym pod żaden”.

Co zmieniłem

Przebudowa była w całości po stronie frontu sklepu, bez dotykania jego silnika. Karta jest teraz jedna, wspólna - ta sama w kategoriach, w wyszukiwarce, w „polecanych” i „niedawno dodanych”. Najważniejsze zmiany:

• Zdjęcie zawsze w kwadracie. Niezależnie od proporcji oryginału produkt jest wpisany w równy kwadrat i nigdy nie jest rozciągany. Siatka wreszcie wygląda jak siatka.
• Cena promocyjna w jednej linii. Cena aktualna, obok przekreślona regularna i bursztynowa pigułka z rabatem - od razu widać, że to okazja. Pod spodem osobno „najniższa cena z 30 dni”, bo tego wymaga prawo i nie wolno tego mylić ze „starą ceną”.
• Wyrazisty przycisk z ikoną koszyka, pełnej szerokości, w kolorze marki. Plus mikrokopia „darmowa dostawa od 199 zł” tuż nad nim - drobny sygnał zaufania w miejscu, gdzie zapada decyzja.
• Bestsellery wyróżnione ciemną kartą, żeby wybijały się z siatki bez krzykliwych naklejek.
• Badge’y Promocja i Bestseller mieszczą się w jednej linii także na wąskim ekranie - wcześniej na telefonie potrafiły się rozjechać i zasłonić zdjęcie.

To wszystko jest czystym SSR-em - żadnego dodatkowego JavaScriptu doczytywanego po stronie klienta. Karta przychodzi z serwera gotowa, więc widzi ją tak samo użytkownik, jak i robot wyszukiwarki.

Szybciej, nie wolniej

Najważniejsza zmiana jest niewidoczna gołym okiem. Domyślnie sklep ładował do każdej miniatury obrazek 500×500 px, niezależnie od tego, że na telefonie karta ma ~170 px szerokości. Czyli kilkukrotnie więcej danych, niż faktycznie trzeba.

Przerobiłem to na responsywne obrazki: przeglądarka dostaje listę rozmiarów (200, 300, 400, 520 px) i sama pobiera ten, który pasuje do ekranu i gęstości pikseli. Telefon bierze mały i lekki, desktop z ekranem Retina większy. Na liście z kilkunastoma produktami to realnie kilkaset kilobajtów mniej do pobrania - czyli szybsze pierwsze wrażenie tam, gdzie najbardziej boli, na komórce i słabszym zasięgu.

To ten sam typ myślenia, który opisywałem przy naprawianiu zamulającego mega-menu i przy budowie własnej wyszukiwarki: platforma daje ramy, a różnicę robi inżynieria w środku tych ram. Ładny wygląd i lekkość to nie dwa osobne cele - tu wyszły z tej samej zmiany.

„Szyte na miarę” znaczy spójne i własne

Najczęstsza pułapka przerabiania szablonu to łatanie jednego miejsca i zostawianie reszty po staremu. Dlatego zależało mi, żeby karta była jedna i żeby ta sama logika działała wszędzie - na liście kategorii, w wynikach wyszukiwania, w sliderach z polecanymi. Klient nie ma czuć, że trafił na trzy różne sklepy w obrębie jednej domeny.

To jest dokładnie ta robota, której nie widać w gotowym motywie, dopóki ktoś nie wejdzie w kod i nie poskłada tego pod konkretny sklep. Cały dzień zszedł na detalach, które z osobna wyglądają błaho: dlaczego przycisk na produkcie z wariantami zwijał się do małego kwadracika, dlaczego tytuł na telefonie był za gruby, dlaczego pod jednym typem karty pojawiał się szary pasek. Każdy z osobna drobiazg. Razem - różnica między sklepem „z szablonu” a sklepem, który wygląda na przemyślany.

Po co to komuś, kto liczy konwersje

Bo karta produktu to jeden z tych elementów, które najtrudniej przypisać do wyniku, a najmocniej go ruszają. Nikt nie napisze, że „wasza karta jest brzydka” - po prostu nie kliknie. To się nie pojawi w żadnym raporcie jako przyczyna, a realnie zjada krok między obejrzeniem produktu a dodaniem do koszyka.

I tu domyka się to, czym zajmuję się na co dzień. Pomiar, tagowanie i Google Ads pokażą dokładnie, gdzie klienci odpadają - ale jeśli odpadają na karcie produktu, bo jest wolna albo nijaka, to żaden najlepszy tracking tego nie naprawi. Ta sama staranność, którą wkładam w server-side tracking na Shoperze, opłaca się też na froncie sklepu. Dane mówią, gdzie jest dziura. Front decyduje, czy ją załatasz.

Podsumowanie

Karta produktu w Shoperze nie musi wyglądać jak u wszystkich. Da się ją przebudować od zera - nowocześniej, z czytelną ceną promocyjną, z wyrazistym przyciskiem - i przy okazji odchudzić, bo responsywne obrazki to mniej danych i szybsze ładowanie. Wszystko po stronie frontu, bez ruszania silnika sklepu i bez kompromisu na SEO.

Coraz mocniej wchodzę w przebudowę frontu Shoper Storefront właśnie dlatego: na tej platformie da się zbudować nowoczesny sklep szyty na miarę, jeśli ktoś zechce zajrzeć głębiej niż panel administracyjny. A potem zmierzyć, czy faktycznie sprzedaje lepiej. Takie karty i inne elementy frontu przebudowuję też na zlecenie.

Szablon ma być punktem startu, nie metą. Różnicę robi to, ile czasu ktoś poświęci na detale, których klient nigdy świadomie nie zauważy - a mimo to poczuje.