Sklep internetowy PrestaShop 1.7.6 – nasza realizacja

26 listopada 2019 | Kamil Bolek

Najnowsza wersja silnika PrestaShop 1.7.6 to zastrzyk nowych funkcjonalno艣ci oraz poprawa stabilno艣ci systemu. Dzi艣 pochylimy si臋 nad sklepem Maski Do Sportu, kt贸ry zosta艂 wykonany w oparciu o wspomniany system. Oczywi艣cie nie zabrak艂o w nim kilku naszych autorskich rozwi膮za艅, cho膰 nie wszystkie by艂yby mo偶liwe do wdro偶enia, gdyby nie du偶e mo偶liwo艣ci jakie daje najnowsza PrestaShop.

Sklep zosta艂 wykonany w standardzie Mobile First, czyli ze szczeg贸ln膮 dba艂o艣ci膮 o u偶ytkownik贸w smartfon贸w. Wiele os贸b bagatelizuje klient贸w kupuj膮cych na telefonach i nie przyk艂ada szczeg贸lnej uwagi na mobiln膮 wersj臋 strony, a niestety w dzisiejszych czasach podej艣cie takie jest niedopuszczalne. Statystyki jasno bowiem pokazuj膮, 偶e na ten moment blisko po艂ow臋 ruchu na sklepach stanowi膮 urz膮dzenia mobilne. Warto wi臋c czym pr臋dzej zastanowi膰 si臋 nad dopracowaniem mobilnej wersji strony, a artyku艂 ten niech stanowi dla Ciebie cenn膮 dawk臋 inspiracji. Zaczynamy!

Strona g艂贸wna

Slider

Na g贸rze tradycyjnie znajduje si臋 tak zwany slider. To na nim prezentowane s膮 aktualne promocje, lista nowo艣ci, konkursy itp. Domy艣lny slider PrestaShop zosta艂 przez nas nieco zmodyfikowany. Wdro偶one zosta艂y dwie funkcjonalno艣ci:

Mo偶liwo艣膰 swipowania

Czyli mo偶liwo艣膰 przesuwania slid贸w palcem. To uk艂on w stron臋 u偶ytkownik贸w smartfon贸w, kt贸rzy na ten moment stanowi膮 54% wizyt na sklepie.

Responsywne zdj臋cia

Pod艂u偶ne zdj臋cie dobrze prezentuje si臋 na komputerach. Je艣li natomiast przegl膮dasz stron臋 na smartfonie, slajd taki jest ma艂o czytelny. Tutaj z pomoc膮 przychodz膮 responsywne zdj臋cia, kt贸re s膮 prezentowane w r贸偶nych wersjach 鈥 dla komputer贸w pod艂u偶ne, a dla smartfon贸w kwadratowe.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Banery produktowe

Na stronie g艂贸wnej nie zabrak艂o r贸wnie偶 box贸w prezentuj膮cych dane kategorie produktowe. W Panelu PrestaShop zosta艂y stworzone kategorie 鈥濵aski antysmogowe do 100 z艂鈥 oraz 鈥濵aski antysmogowe do 150 z艂鈥. Nast臋pnie, kategorie te zaprezentowali艣my na stronie g艂贸wnej, dodatkowo wzbogacaj膮c o grafiki przedstawiaj膮ce produkt.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Tekst pod SEO

Na dole strony nie zabrak艂o oczywi艣cie tekstu pod SEO (pozycjonowanie). Zosta艂y zawarte w nim s艂owa kluczowe oraz linki do danych kategorii.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Kategoria produkt贸w

Zdj臋cie kategorii

Na g贸rze strony znalaz艂a si臋 tradycyjnie nazwa kategorii. To domy艣lne rozwi膮zanie stosowane przez silnik PrestaShop 1.7.6, ale te偶 przez wi臋kszo艣膰 sklep贸w internetowych. Dodatkowym elementem wzbogacaj膮cym walory wizualne jest umiejscowienie zdj臋cia kategorii w formie t艂a pod tekstem.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Lista produkt贸w 鈥 zmiana domy艣lnego uk艂adu z PrestaShop 1.7.6

Je艣li mowa o smartfonach, produkty w standardowej wersji PrestaShop 1.7.6 wy艣wietlaj膮 si臋 pojedynczo w danej linii. M贸wi膮c inaczej 鈥 w jednej linijce jest jeden produkt. Podej艣cie takie jest ju偶 jednak nieco przestarza艂e, a prawie wszystkie nowoczesne sklepy internetowe prezentuj膮 w jednej linijce dwa produkty. Zabieg ten skraca ilo艣膰 przesuni臋膰 palcem w celu przejrzenia ca艂ej kategorii, dzi臋ki czemu u偶ytkownik mniej si臋 m臋czy przegl膮daj膮c list臋 towar贸w. Id膮c tym tropem, zmodyfikowali艣my schemat prezentowania produkt贸w w kategorii, i r贸wnie偶 postawili艣my na wy艣wietlanie dw贸ch produkt贸w w jednym wierszu.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Karta produktu

Zdj臋cie produktu

Domy艣lny rozmiar zdj臋cia na komputerach zosta艂 zwi臋kszony z 452×452 pikseli do 500×500 pikseli. Niby niewiele, ale r贸偶nica jest dostrzegalna, szczeg贸lnie na niewielkich laptopach z ekranami o ma艂ej rozdzielczo艣ci.

W przypadku smartfon贸w zdj臋cia produktu zosta艂y ca艂kowicie przebudowane, zgodnie z aktualnymi standardami. Tym samym wdro偶one zosta艂y nast臋puj膮ce usprawnienia w stosunku do domy艣lnego rozwi膮zania na PrestaShop 1.7.6:

Rozszerzenie zdj臋cia na ca艂y ekran

Zdj臋cia na smartfonach nie s膮 niestety tak du偶e jak na komputerach. Trudno dostrzec pewne szczeg贸艂y produktu, kt贸re na wi臋kszych ekranach s膮 wyra藕nie widoczne. Maj膮c to na uwadze, tak skonstruowali艣my galeri臋 zdj臋膰 produktu, aby fotografie wype艂nia艂y ca艂膮 szeroko艣膰 ekranu.

Obs艂uga swipowania zdj臋膰 produktu

Czyli to samo co we wcze艣niej wspomnianym sliderze 鈥 poprzez przesuni臋cie palca w lewo lub prawo mo偶emy przechodzi膰 na poprzednie lub nast臋pne zdj臋cie.

Wska藕nik po艂o偶enia

Zaraz pod zdj臋ciem znajduj膮 si臋 niewielkie kropki, wskazuj膮ce kt贸re w kolejno艣ci zdj臋cie produktu ogl膮damy. To bardzo ciekawa metoda, pozwalaj膮ca u偶ytkownikowi nadzorowa膰 swoje po艂o偶enie. Rozwi膮zanie tego typu stosuje r贸wnie偶 np. Instagram.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Informacja o dostawie i metodach wysy艂ki

Klienci lubi膮 by膰 informowani o kosztach i metodach dostawy jeszcze przed dodaniem produktu do koszyka. Odpowiedzi膮 na t臋 potrzeb臋 by艂o umieszczenie szczeg贸艂贸w zwi膮zanych z dostaw膮 na karcie przegl膮danego produktu. Klient znajdzie informacj臋 o:

  • dost臋pno艣ci towaru
  • czasie dostawy
  • metodach wysy艂ki
  • kosztach dostawy
Slider na stronie g艂贸wnej - PrestaShop realizacja

Lista dodatkowych produkt贸w

Na karcie produktu warto wy艣wietla膰 klientom produkty, kt贸re mog膮 ich zainteresowa膰. Dzi臋ki temu poruszanie si臋 po stronie jest sprawniejsze, a szansa na sprzeda偶 wzrasta. Niekiedy jest r贸wnie偶 tak, 偶e klient wchodzi z reklamy na dany produkt (np. koszula), a kupuje co艣 zupe艂nie innego (np. spodnie).

Lista produkt贸w zosta艂a podzielona na trzy kategorie:

  • produkty warte dokupienia (tzw. Cross-Selling)
  • podobne produkty z tej samej kategorii
  • ostatnio przegl膮dane produkty

Ponadto, zgodnie z obecnymi standardami, produkty na smartfonach prezentowane s膮 w postaci horyzontalnej listy. Rozwi膮zanie to pozwala zredukowa膰 wysoko艣膰 strony, dzi臋ki czemu poruszanie si臋 po sklepie staje si臋 艂atwiejsze. Z tej metody korzysta mi臋dzy innymi Facebook, czy Google.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Warto doda膰, 偶e ka偶da z wymienionych wy偶ej list dost臋pna w PrestaShop 1.7.6 w standardzie, dzi臋ki wbudowanym modu艂om. Z naszej strony poczynili艣my jedynie modyfikacje zwi膮zane ze wspomnianym horyzontalnym u艂o偶eniem element贸w na smartfonach.

Sekcja z opiniami

W g贸rnej cz臋艣ci strony wy艣wietlana jest 艣rednia ocena przegl膮danego produktu, wraz z liczb膮 ocen. Klikni臋cie w ten element powoduje przeniesienie u偶ytkownika na d贸艂 strony, gdzie znajduje si臋 sekcja po艣wi臋cona recenzjom. W tym miejscu klient mo偶e przeczyta膰 opinie innych klient贸w, oraz doda膰 swoj膮 po zrealizowaniu zakupu.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Rozwi膮zanie to jest r贸wnie偶 uk艂onem w stron臋 SEO, bowiem regularnie dodawane opinie tworz膮 now膮 tre艣膰 na stronie, co pozytywnie wp艂ywa na pozycjonowanie. Ponadto, je艣li dana osoba korzysta w wyszukiwarki Google by znale藕膰 okre艣lony produkt, link do sklepu z wdro偶onym systemem opinii b臋dzie dodatkowo wzbogacony o 艣redni膮 ocen臋 produktu, czyli nic innego jak ikony gwiazdek. To z kolei wp艂ywa pozytywnie na CTR (wsp贸艂czynnik klikni臋膰), a ten ma r贸wnie偶 wp艂yw na SEO.

Koszyk oraz sk艂adanie zam贸wienia

Intuicyjno艣膰, prostota i usuni臋cie zb臋dnych element贸w

Sk艂adanie zam贸wienia to proces, kt贸ry powinien przebiega膰 sprawnie i wymaga膰 od klienta jak najmniejszego wysi艂ku. Nikt nie lubi bowiem skomplikowanych, wielokolorowych formularzy.

Pierwszym krokiem by艂o usuni臋cie menu i stopki, oraz zast膮pienie ich okrojonymi wersjami. Na etapie sk艂adania zam贸wienia elementy te s膮 zazwyczaj zb臋dne. Z tej metody korzysta przyk艂adowo Allegro.

Slider na stronie g艂贸wnej - PrestaShop realizacja

Na stronie sk艂adania zam贸wienia usun臋li艣my zb臋dne pola. W PrestaShop 1.7.6 (i starszych wersjach) zaliczy膰 do takich mo偶emy:

  • pytanie o dat臋 urodzenia
  • zapisywanie na oferty partnerskie
  • pytanie o kraj (omawiany sklep sprzedaje wy艂膮cznie na terenie Polski, zatem pole to jest zb臋dne)

Pomoc w poprawnym uzupe艂nieniu wymaganych p贸l

B艂臋dnie uzupe艂nione przez klienta pola uniemo偶liwiaj膮 mu niekiedy przej艣cie do dalszego etapu. W takich sytuacjach warto u偶ytkownika poinformowa膰 w przejrzysty spos贸b co powinien poprawi膰.

W standardowym silniku PrestaShop 1.7.6 niestety nie wszystkie pola s膮 wymagane. Jednym z nich jest numer telefonu. Klient mo偶e go nie uzupe艂nia膰, aby sfinalizowa膰 zam贸wienie. Praktyka pokazuje, 偶e jest to spore utrudnienie dla os贸b obs艂uguj膮cych sklep PrestaShop, bowiem brak uzupe艂nionego telefonu w wi臋kszo艣ci przypadk贸w uniemo偶liwia zam贸wienie kuriera. Rozwi膮zaniem tego problemu by艂o zmiana pola numeru telefonu z opcjonalnego na wymagany. Dzi臋ki temu ilo艣膰 zam贸wie艅 z brakuj膮cym numerem telefonu spad艂a do zera.

Ponadto, wprowadzone zosta艂o sprawdzanie poprawno艣ci kodu pocztowego (jak klient zapomni dopisa膰 ostatni膮 cyferk臋, wy艣wietla si臋 ostrze偶enie) oraz weryfikacja numeru ulicy (je艣li klient wpisz臋 nazw臋 ulicy bez jej numeru, wy艣wietla si臋 komunikat ostrzegawczy).

Slider na stronie g艂贸wnej - PrestaShop realizacja

Mam nadziej臋, 偶e nasza realizacja na silniku PrestaShop 1.7.6 przypad艂a Ci do gustu. Poruszone w tym artykule funkcjonalno艣ci mo偶esz wdro偶y膰 r贸wnie偶 we w艂asnym sklepie PrestaShop. 呕ycz臋 Ci udanej optymalizacji!

Sklep internetowy PrestaShop 1.7.6 – nasza realizacja Sklep internetowy PrestaShop 1.7.6 – nasza realizacja4.5 (90%) g艂os贸w:2 5 2 Sklep internetowy PrestaShop 1.7.6 – nasza realizacja
Zapytaj o darmow膮 wycen臋 sklepu internetowego. Porozmawiajmy. Bez zobowi膮za艅.