Standardowy wygląd karty produktowej (strony produktowej) na sklepie internetowym składa się z galerii zdjęć, krótkiego opisu, ceny, stanów magazynowych… pod którymi znajduje się miejsce na opis długi wraz zakładką na cechy służące m.in. systemowi filtracji. Pod galerią zdjęć umieszcza się długi opis produktowy, który modyfikuje się za pomocą prostego kodu HTML, tj. powiększa się czcionkę tytułu, podtytułu, wprowadza się akapity, ewentualnie wypunktowania. Taki opis produktu na stronie sklepu online królował przez dłuższy czas, nade wszystko ze względu na wolne łącza internetowe i małe możliwości modyfikacji długich opisów produktowych. Jeszcze kilka lat temu proces lepszej wizualizacji stron internetowych opierał się na grafice i treściach zamkniętych w układzie tabelarycznym. Pamiętacie stare strony internetowe? Nie lada sztuką było stworzenie pięknego układu. Graficy trudzili się nad najdrobniejszymi elementami strony WWW, jak buttony czy tła.
Rewolucja w układzie kart produktowych
Dziś możliwości są nieco lepsze, choć pojawiły się też i nowe komplikacje, zwłaszcza jeżeli weźmie się pod uwagę różnorodność wielkości urządzeń mobilnych. Na szczęście technologia programowania też poszła do przodu i pojawił się nowy język programowania struktury stron internetowych. Język CSS (kaskadowe arkusze stylów) jako dodatek do języka HTML pozwala nanosić różnego rodzaju wizualne modyfikacje do treści stron internetowych i zarazem do opisów produktowych na stronach sklepów internetowych. W połączeniu z przyspieszeniem łączy internetowych daje to praktyczny efekt w postaci stron internetowych (w tym kart produktowych) typu Landing Page… czyli długich, bogatych w opisy i zdjęcia. Jeśli dodać do tego możliwości wynikające z siatki Bootstrap, uzyskujemy responsywne strony internetowe (RWD), których układy zdjęć i opisów dostosowują się w nadany im sposób do wielkości monitorów urządzeń deskopowych i mobilnych.
Tradycyjny układ e-kart sklepowych nie jest niczym złym. Wręcz przeciwnie rozwiązanie to może być właściwe i zarazem zastosowany w sposób efektywny do prezentacji wielu produktów, zwłaszcza takich jak produkty techniczne wymagające nade wszystko przedstawienia ich specyfikacji. Tradycyjny podział strony sklepu internetowego na galerię zdjęć i długi opis produktowy znajduje też zastosowanie na sklepach, w których sprzedaje się większą ilość produktów o niższej wartości, które nie posiadają szerszych opisów, specyfikacji i innego rodzaju treści marketingowych. Nie wszystkie produkty wymagają długich opisów bogatych w materiały marketingowe i tworzenie takich opisów nie jest też opłacalne w każdym przypadku. Stworzenie indywidualnego długiego opisu produktowego bogatego w materiały reklamowe jest znacznie bardziej czasochłonne i wymaga większych nakładów wiedzy, czy środków finansowych. Tworzenie krótszych, jednolitych opisów produktowych ma tez uzasadnienie wtedy, kiedy grupę docelową sklepu internetowego stanowią mieszkańcy regionów z niższą prędkością internetu (są to zazwyczaj mieszkańcy mniejszych miejscowości i wsi korzystający z połączenia radiowego) lub aktywni użytkownicy urządzeń mobilnych korzystający najczęściej z internetu mobilnego lub Wi-Fi.
W innych przypadkach, tzn. dla produktów z wyższych półek, produktów premium lub po prostu dla produktów o wyższej wartości bezwzględnej należy budowa karty produktowe bogate w materiały reklamowe, tak treści, jak i obrazy i filmy wideo… A wszystkie te “fizyczne dowody istnienia produktów” należy odpowiednio o-kodować za pomocą języka HTML/CSS i wprowadzić do układu samo-reagującego na zmiany wielkości okna przeglądarki i monitora (za funkcję tę odpowiadają elementy siatki Bootstrap). Układy stron produktowych mogą być różnego rodzaju, od takich w których zdjęcia następują po treściach w układzie naprzemiennym lub krzyżowym, albo mieszanym, naprzemienno-krzyżowym. W zasadzie jedynym ograniczeniem design strony produktowej jest ilość materiałów reklamowych i wyobraźnia projektanta stron internetowych (kodera).
Długie i bogate w treści układy stron produktowych buduje się z wykorzystaniem dwóch rodzajów narzędzi jednego typu. Do budowy odpowiedniej struktury strony produktowej możemy skorzystać z czystego kodu HTML/CSS lub użyć w tym celu kreatora stron internetowych wbudowanego w moduł sklepu internetowego. Takie moduły posiadają już oprogramowania sklepowe zbudowane w modelu open source. Mam tu na myśli głównie wooCommerce i PrestaShop. Coraz częściej też tego typu moduły instalowane są na silnikach sklepowych dostępnych w modelu komercyjnym, jak np. IdoSell (dawniej IAI) oraz Baselinker czy Wix. Do najpopularniejszych tego typu pluginów PrestaShop należy WPBakery, a w wooCommerce są to Visual Composer, Divi i Elementor. Nic jednak nie stoi na przeszkodzie, aby samodzielnie zbudować układ typu Landing Page na stronach produktowych, wykorzystując do tego znajomość języka HTML/CSS.
Kilka uwag praktycznych
O czym należy wiedzieć przystępując do prac nad poszerzonymi opisami produktowymi? Jest kilka zagadnień, które wdzierają się w proces budowy strony typu Landing Page, a które to zagadnienia mogą być kłopotliwe dla mniej doświadczonego użytkownika języka CSS/HTML (+Bootstrap), czy kreatorów stron internetowych. Nade wszystko należy zorientować się jakie możliwości daje nam oprogramowanie sklepu internetowego, na którym pracujemy. Jeśli sklep nie jest wyposażony w żaden moduł wizualnego kreatora stron internetowych, to nie trzeba się załamywać. Ma to swoje plusy i minusy, choć obecnie więcej przemawia za korzystaniem z wizualnych kreatorów stron internetowych (poza tym, że moduły takie nieco bardziej obciążają sklep i podobnie jak same Landing Page, zmniejszają tempo otwierania się witryn sklepowych lub wymuszają potrzebę korzystania z nieco lepszego serwera). Natomiast, jeśli sklep internetowy nie posiada takiego modułu, to pozostaje nam o-kodowanie długiego opisu w edytorze strony produktowej za pomocą czystego języka HTML/CSS. Za nim jednak przystąpimy do budowy takiego układu, należy zasięgnąć opinii wsparcia technicznego sklepu internetowego (support) lub społeczności programistów zaangażowanych w rozwój danego projektu, którego rodzaju znaczniki można stosować w edytorze karty produktowej i na jakie inne problemy możemy się natknąć realizując tego typu przedsięwzięcie. Zdarza się bowiem, że dane oprogramowania sklepowe posiada swój własny język kodowania, oprogramowanie narzuca ograniczenia w stosowaniu niektórych znaczników kodu programistycznego lub niektóre zapisy i funkcje języka reagują inaczej pod wpływem oprogramowania samego sklepu internetowego. Zdarza się to nadzwyczaj rzadko, jeśli jednak mamy problem z zastosowaniem jakiejś wartości, to można spróbować użyć deklaracji !important. Kod sklepu internetowego może bowiem wymuszać przez dziedziczenie deklaracje innych wartości języka CSS dla danego elementu strony WWW.
Warto też zadbać o komfort użytkowników urządzeń mobilnych, tak smartfonów, jak i tabletów, którzy często mają wolniejszy internet. Otwarcie strony sklepowej z opisem bogatym w zdjęcia może się znacząco wydłużyć na urządzeniach mobilnych. Podobnie sprawa się ma z większą ilością kodu HTML/CSS, który też wydłuża czas otwierania się strony WWW. Najważniejsze jest jednak usunięcie zdjęć i innych mediów z układu strony produktowej dla urządzeń mobilnych. Możemy to zrobić stosując ograniczenia w zakresie działania kodu CSS poprzez użycie zapytania o media, czyli media queries. Innymi słowy należy dodatkowo inaczej o-kodować układ dla urządzeń deskopowych, a inaczej dla urządzeń mobilnych. Zdjęć z układu pozbywamy się wyłączając je z kodu poprzez zastosowanie znacznika display:none.
Kolejną ważną sprawą jest sam układ. Design długiego opisu na karcie produktowej może być w zasadzie naprzemienny, krzyżowy albo naprzemienno-krzyżowy. Jeśli chcemy, aby zdjęcia znajdowały się obok opisów (z lewej, czy z prawej strony) należy zastosować siatkę Bootstrap np. poprzez zastosowanie kodu CSS display: grid; grid-template-columns: 1fr 1fr, a strukturę kodu HTML uzupełnić o dwa znaczniki div. Ważne jest aby pamiętać, że nie można stosować układu krzyżowego jeden po drugim, jeśli nie wyłączy się zdjęć dla urządzeń lub nie zastosuje pomiędzy tymi układami układu naprzemiennego. W innym przypadku złamanie tego układu przez mniejszy ekran urządzenia mobilnego, sprawi, że zdjęcia znają się jedno pod drugim, co nie zawsze wygląda estetycznie. W układach responsywnych budowanych przy pomocy siatki Bootstrap warto korzystać z sekcji przedziałowych, chociażby linii czy akapitów oddzielających zdjęcia.
W zasadzie to tyle, jeżeli chodzi o najważniejsze aspekty tworzenia bogatych opisów produktowych na sklepach internetowych. Zalecam stosowanie tego typu rozwiązań zgodnie z myślą marketingową, wedle której w sprzedaży internetowej celowa jest prezentacja jak największej ilości tzw. fizycznych dowodów istnienia produktu. Należy pamiętać, że Internauta serfujący po virtualnych pikselach Sieci WEB nie może dotknąć i poczuć w sposób rzeczywisty tego co ogląda i kupuje, w związku z tym musimy włożyć więcej wysiłku w przekonaniu go do poczucia rzeczywistej wartości kupowanych rzeczy i usług.