Polski Blog TemplateMonster

40+ Przykładów stylowego designu strony Koszyka

40+ Przykładów stylowego designu strony Koszyka

Strona Koszyka jest ważna częścią każdego e-sklepu i jedną z najbardziej trudnych do zaprojektowania. W tym artykułu chcieliśmy sprawdzić, w jaki sposób sprzedawcy podchodządo designu takich stron i co powinny zawierać naprawdę dobre strony Koszyka.

Musisz być bardzo uważny do szczegółów podczas projektowania Koszyka, ponieważ przyszły sukces e-sklepu zależy bezpośrednio od tego, jak dobrze doprowadzisz klientów do etapu realizacji transakcji. Więc, co powinna posiadać idealna strona? Najlepiej byłoby, gdyby była wyposażona w takie opcje, jak: podsumowanie produktów, pole kodu promocyjnego, różne opcji płatności i metody wysyłki, ostateczna wycena, informacji na temat polityki prywatności i zasad zwrotu, bezpłatnych produktów, przycisk kontynuowania zakupów lub przejście do finalizacji zakupu itd.

Ponieważ głównym celem każdej strony koszyka zakupów jest doprowadzenie klienta do kasy, w jaki sposób można to zrobić bardziej efektywnie? Obecnie sprzedawcy internetowi najczęściej wykorzystują takie metody jak:

Dodatkowo, napisy na przycisku Koszyka mogą się różnić: od prostego "Koszyk" - do "Przejdź do opłaty". Dodatkowe ubezpieczenie Koszyka stało się szczególnie popularne, ponieważ zwiększa zaufanie do strony i wiarygodność sklepu o 50%.

Kiedy użytkownicy decydują się na oplatę zamówienia, muszą otrzymać ostateczną listę wybranych pozycji, a także opcji dotyczących metody płatności. Możesz zauważyć, że nie wszystkie strony Koszyka na poniższej liście zawierają logo karty kredytowej obok opcji płatności, ale wyświetlenie tego elementa byłoby jednak bardzo wygodne. Ponadto warto wziąć pod uwagę - dobry Koszyk musi zapewniać bezpieczne płatności aby nie tylko zapewniać klientom bezpieczne transakcje, ale być zgodnym ze standardami bezpieczeństwa.

Biorąc pod uwagę wszystkie te aspekty, byłoby o wiele lepiej z punktu widzenia klienta, stworzyć wygondą i piękną stronę Koszyka. Poniżej znajdziesz przykłady udanego designu tej strony w różnych popularnych e-sklepach.


1. Yoox.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/1-yoox.jpg?x56506" />

2. AE.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/2-ae.jpg?x56506" />

3. Store.Nike.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/3-nike.jpg?x56506" />

4. FaucetFace.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/4-faucetface.jpg?x56506" />

5. DeathWishCoffee.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/5-deathwishcoffee.jpg?x56506" />

6. Store.Apple.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/6-apple.jpg?x56506" />

7. Gucci.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/7-gucci.jpg?x56506" />

8. Skinny-Teatox.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/8-teatox.jpg?x56506" />

9. SurfDome.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/9-surfdome.jpg?x56506" />

10. RalphLauren.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/10-ralphlauren.jpg?x56506" />

11. MarcJacobs.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/11-markjacobs.jpg?x56506" />

12. Shop.AcneStudios.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/12-acne.jpg?x56506" />

13. Shop.Guess.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/13-guess.jpg?x56506" />

14. JuicyCouture.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/14-juicy-couture.jpg?x56506" />

15. Shop.Puma.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/15-puma.jpg?x56506" />

16. TopShop.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/16-topshop.jpg?x56506" />

17. NoonCopenhagen.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/17-noon.jpg?x56506" />

18. FlatSpot.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/18-flatspot.jpg?x56506" />

19. UO.com.au

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/19-urbanoriginals.jpg?x56506" />

20. US.Burberry.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/20-burberry.jpg?x56506" />

21. Store.DolceGabbana.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/21-dolcegabbana.jpg?x56506" />

22. Triangl.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/22-triangl.jpg?x56506" />

23. NeedaBump.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/23-bump.jpg?x56506" />

24. ShopAdidas.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/24-adidas.jpg?x56506" />

25. Crocs.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/25-crocs.jpg?x56506" />

26. Case-Mate.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/26-casemate.jpg?x56506" />

27. JCrew.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/27-jcrew.jpg?x56506" />

28. CardinalCase.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/28-cardinalcase.jpg?x56506" />

29. Zappos.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/29-zappos.jpg?x56506" />

30. Shop.Mango.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/30-mango.jpg?x56506" />

31. NeimanMarcus.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/31-neimanmarcus.jpg?x56506" />

32. Fossil.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/32-fossil.jpg?x56506" />

33. Tiffany.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/33-tiffany.jpg?x56506" />

34. US.Faconnable-Store.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/34-facconable.jpg?x56506" />

35. Store-US.HugoBoss.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/35-hugoboss.jpg?x56506" />

36. USA.Tommy.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/36-tommyhilfiger.jpg?x56506" />

37. ShopBop.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/37-shopbob.jpg?x56506" />

38. FredPerry.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/38-fredperry.jpg?x56506" />

39. CharlotteRusse.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/39-charlotterusse.jpg?x56506" />

40. ShopAdam.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/40-adamlippes.jpg?x56506" />

41. BobbiBrownCosmetics.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/41-bobbibrown.jpg?x56506" />

42. TheGreetingFarm.com

<img class="aligncenter" src="https://s.tmimgcdn.com/blog/wp-content/uploads/2011/09/42-greetingfarm.jpg?x56506" />

Ważne są wszystkie aspekty projektu strony Koszyka. Oto lista, z pomocą której możesz sprawdzić, czy Twój Koszyk posiada wszystkie niezbędne elementy.

  1. Podsumowanie produktów – zdjęcie produktu, jego nazwa, dodatkowe opisy (rozmiar, kolor itp.), ilość sztuk, cena, możliwość usunięcia produktu z Koszyka lub edycja jego właściowości, takich jak rozmiar, kolor lub cena.
  2. Metody wysyłki – czy je uwzględniasz, wspominasz różnicę między opcjami, podajesz ich ceny?
  3. Pole dla kodu promocyjnego – jeśli zezwolasz na używanie kodów promocyjnych, upewnij się, że strona Koszyka jest posiada odpowiednią sekcję.
  4. Ostateczna wycena – koszt wszystkich produktów w koszyku + dostawa. Klienci muszą zobaczyć całkowitą kwotę, jaką muszą zapłacić za zamówienie, aby uniknąć nieprzyjemnych niespodzianek w trakcie realizacji transakcji, które mogą spowodować rezygnację z zakupu.
  5. Metody płatności – jeśli akceptujesz różne metody płatności, powinieneś uwzględnić je wszystkie. Ale pamiętaj by nie obciążać klienta zbyt dużą ilością dostępnych metod. W idealnym przypadku możesz zaoferować dwie metody płatności, które są najbardziej popularne wśród Twoich klientów. Dodawanie ikon obok opcji płatności (ikona PayPal, ikony kart kredytowych) pomoże zwiększyćpoziom zaufania do sklepu.
  6. Bezpieczne płatności – dodaj informacji na ten temat na stronie Koszyka. Jest to dodatkowy znak, że klienci mogą Ci ufać.
  7. Polityka prywatności i zwrotów – pamiętaj o dołączeniu linków do tych stron. Zaleca się również, aby były otwierane jako wyskakujące okienka (nie jako nowe strony z zakładkami), aby klient nie opuszczał strony Koszyka.
  8. Produkty polecane – oferowanie produktów polecanych do zamówienia pomoże zwiększyć średnią ilość sprzedaż. Pamiętaj jednak, że aby zmaksymalizować efekt, produkty muszą naprawdę pasować do zamówienia, a nie te, które pozostają niesprzedane w Twoim sklepie. Lepszym sposobem jest oferowanie rabatu na takie produkty. Ale pamętaj, że cena produktów polecanych powinna być mniejsza niż 50% ceny wybranego produktu. Dzięki temu klienci będą czuli się komfortowo.
  9. Przycisk/link kontynuowania zakupów – jest to bardzo ważny link, ponieważ umożliwia klientom dalsze wypełnianie koszyka.
  10. Link do finalizacji opłaty – jest to najważniejszy przycisk na stronie Koszyka. Twoim zadaniem jest zwrócenie na niego uwagi klienta. Można odznaczyć ten przycisk jaskrawym kolorem lub wybrać dla niego trochę większy rozmiar, niż dla innych przycisków na stronie sklepu. Wykorzystaj CTA-tekst jako napis na przycisku. Naprzykład, przy pomocy przycisku "Bezpieczne zamówienie" możesz podnieść zaufanie do swojej witryny.

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: 40+ Best Shopping Cart Page Design Templates


* * *

P.S. Aby stworzyć najlepszy design strony Koszyka musisz eksperymentować. Używaj różnych napisów, kolorów, rozmiarów przycisków itd. Dobrym doradcą do oceny Twojej pracy może stać się narzędzie Google Website Optimizer.