DB Nutrition to sklep internetowy z suplementami, przygotowany w ośmiu wersjach językowych i z obsługą wielu walut. To była jedna z bardziej rozbudowanych realizacji e-commerce, bo oprócz samego sklepu trzeba było zadbać o tłumaczenia, strukturę produktów, indeksowanie, płatności, dostawy, reguły wysyłek i wygodny proces zakupowy.
Każdy produkt posiada własne opakowanie, które również zostało przez nas zaprojektowane jako osobna część identyfikacji produktowej.
Zobacz też: #DBNutrition-Opakowania
SCREEN: strona główna DB Nutrition
Sklep przygotowany pod sprzedaż w kilku krajach
Od początku było jasne, że to nie będzie zwykły sklep w jednej wersji językowej. DB Nutrition potrzebowało platformy, która pozwoli sprzedawać produkty w kilku językach, kilku walutach i z odpowiednio przygotowaną strukturą treści.
Strona została wdrożona w ośmiu wersjach językowych. To oznaczało nie tylko przetłumaczenie widocznych tekstów, ale też dopilnowanie drobnych elementów sklepu: kategorii, komunikatów, breadcrumbs, przycisków, opisów produktów i elementów checkoutu.
SCREEN: przełącznik języków
Strona główna z szybkim przejściem do sklepu
Na stronie głównej pojawiło się hero z przyciskiem prowadzącym bezpośrednio do sklepu. Przy e-commerce z suplementami ważne było, żeby użytkownik szybko przeszedł do produktów, bez szukania głównej ścieżki zakupowej.
Niżej dodaliśmy sekcję bestsellerów, która pokazuje najlepiej sprzedające się produkty. To naturalne miejsce dla osób, które nie wiedzą jeszcze, od czego zacząć, ale chcą zobaczyć najpopularniejsze pozycje.
Karty produktów z szybkim dodaniem do koszyka
Produkty na stronie głównej i w kategoriach zostały przygotowane tak, żeby maksymalnie skrócić ścieżkę zakupową. Po najechaniu na produkt użytkownik może dodać go do koszyka albo skorzystać z szybkiego podglądu w prawym górnym rogu.
SCREEN: karta produktu z hoverem
Szybki podgląd pozwala sprawdzić najważniejsze informacje bez przechodzenia na osobną stronę produktu. To małe usprawnienie, ale przy większym sklepie pomaga szybciej porównywać produkty i podejmować decyzje.
Wysuwany koszyk z rekomendacjami
Koszyk otwiera się jako panel wysuwany z prawej strony. Dzięki temu użytkownik nie musi od razu opuszczać strony, na której aktualnie przegląda produkty.
SCREEN: wysuwany koszyk
W koszyku pojawiła się też sekcja „klienci wybierali również”, która pozwala zaproponować dodatkowe produkty i podbić wartość zamówienia. To prosty element sprzedażowy, ale dobrze pasuje do sklepu suplementowego, gdzie użytkownicy często kompletują kilka produktów naraz.
Z koszyka można przejść do zamówienia albo otworzyć pełną stronę koszyka, jeśli użytkownik chce spokojnie przejrzeć zawartość przed finalizacją.
Sekcja z opiniami i benefitami zakupowymi
Na stronie głównej pojawiła się sekcja opinii klientów oraz cztery krótkie komunikaty wspierające decyzję zakupową: szybka wysyłka, bezpieczne płatności, bezpieczne zwroty i pomoc online.
To elementy, które pomagają zmniejszyć niepewność przed zakupem. Szczególnie w sklepie międzynarodowym użytkownik chce szybko wiedzieć, czy płatność jest bezpieczna, jak działa wysyłka i czy w razie potrzeby może liczyć na kontakt.
Stopka z kontaktem, socialami i newsletterem
Stopka została przygotowana jako miejsce na podstawowe informacje o firmie, logo, numery telefonów, adres e-mail oraz linki do Facebooka, Instagrama i TikToka.
SCREEN: stopka DB Nutrition, sekcja opinii klientów
Dodaliśmy też sekcję pomocy i kontaktu, przydatne odnośniki oraz zapis do newslettera. Dzięki temu użytkownik na końcu strony nadal ma jasne przejścia: do kontaktu, regulaminów, social mediów albo zapisu na komunikację marketingową.
Kategorie i produkty w wielu językach
Sklep posiada różne kategorie produktów, a każda z nich została przygotowana w wersjach językowych. Przy takiej realizacji ważne było, żeby użytkownik w każdym języku miał spójne doświadczenie: od kategorii, przez kartę produktu, aż po koszyk i checkout.
SCREEN: strona kategorii produktów
Dużo pracy zajęło dopilnowanie tłumaczeń w miejscach, które często są pomijane: breadcrumbs, nazwy kategorii, komunikaty systemowe i elementy związane z nawigacją sklepu.
To ważne również pod SEO. Jeśli sklep ma działać w kilku krajach, struktura językowa musi być poukładana, a nie tylko „przetłumaczona na froncie”.
Strona produktu z dodatkowymi sekcjami
Strony produktów zostały rozbudowane o dodatkowe sekcje, które lepiej pasują do suplementów niż standardowy opis WooCommerce.
Oprócz podstawowego opisu produktu dodaliśmy m.in. sekcje dotyczące sposobu użycia, składników oraz wartości odżywczej. Treści zostały przeformatowane tak, żeby były czytelniejsze niż zwykły długi blok tekstu.
SCREEN: strona produktu
SCREEN: sekcja z sformatowanym opisem
Dzięki temu użytkownik może szybciej znaleźć informacje, które są ważne przy zakupie suplementu: jak stosować produkt, co zawiera i jakie ma wartości odżywcze.
Wielowalutowość
W headerze pojawił się przełącznik waluty, ponieważ sklep został przygotowany do sprzedaży w różnych walutach. To kolejny element, który pomaga dostosować sklep do klientów z różnych krajów.
SCREEN: przełącznik waluty w headerze
Przy wielojęzycznym e-commerce sama zmiana języka nie wystarcza. Użytkownik powinien móc zobaczyć również ceny w odpowiedniej walucie i przejść przez zakup w możliwie naturalny sposób.
Płatności, dostawy i integracje
Sklep został zintegrowany z Przelewy24, InPostem oraz DHL-em. Dzięki temu użytkownik może wybrać wygodną metodę płatności i dostawy, a sklep obsługuje najważniejsze scenariusze zakupowe.
Dodatkowo wdrożyliśmy reguły wysyłki zależne m.in. od wagi, wymiarów i wartości zamówienia. Przykładowo, przy odpowiedniej wartości koszyka może zostać uruchomiona darmowa wysyłka.
Rozbudowane reguły wysyłki
Jedną z bardziej technicznych części projektu była konfiguracja reguł wysyłki. Wykorzystaliśmy do tego Flexible Shipping Methods, ale sam proces wymagał przygotowania wielu zasad i zależności.
Reguły obejmowały różne warunki: wagę, wymiary, cenę zamówienia i typ dostawy. Część konfiguracji wymagała pracy na strukturach JSON, żeby dało się poprawnie przygotować i zaimportować złożone zasady.
To była praca, której użytkownik końcowy nie widzi, ale bardzo mocno wpływa na działanie sklepu. Jeśli reguły dostawy są źle ustawione, problemy pojawiają się dopiero przy zamówieniu. Dlatego ta część musiała być dopięta dokładnie.
Dużo pracy pod spodem
Z zewnątrz sklep ma wyglądać prosto: wybierasz produkt, dodajesz do koszyka, wybierasz dostawę i płacisz. Pod spodem trzeba było jednak połączyć wiele elementów: języki, waluty, tłumaczenia, produkty, opisy, breadcrumbs, dostawy, płatności i reguły zamówień.
SCREEN: checkout
To właśnie takie realizacje pokazują, że e-commerce nie kończy się na ładnej stronie produktu. Duża część pracy dzieje się w szczegółach, które mają działać poprawnie w każdym kraju, języku i scenariuszu zakupowym.
Co finalnie powstało?
W ramach tej realizacji przygotowaliśmy wielojęzyczny sklep internetowy DB Nutrition z suplementami oraz pełną konfigurację procesu zakupowego.
Zakres obejmował:
- sklep internetowy z suplementami,
- wdrożenie ośmiu wersji językowych,
- tłumaczenie treści sklepu,
- tłumaczenie kategorii i breadcrumbs,
- przygotowanie struktury pod SEO,
- wielowalutowość,
- przełącznik waluty w headerze,
- stronę główną z hero i bestsellerami,
- karty produktów z dodaniem do koszyka po hoverze,
- szybki podgląd produktu,
- wysuwany koszyk,
- rekomendacje produktów w koszyku,
- stronę koszyka,
- checkout,
- kategorie produktów,
- rozbudowane strony produktów,
- sekcje: sposób użycia, składniki, wartość odżywcza,
- przeformatowanie opisów produktów,
- integrację z Przelewy24,
- integrację z InPostem,
- integrację z DHL-em,
- konfigurację reguł wysyłki,
- obsługę darmowej wysyłki zależnej od wartości koszyka,
- pracę na regułach w JSON,
- stopkę z kontaktem, socialami i newsletterem,
- powiązanie z projektami opakowań produktów.
To była jedna z tych realizacji, w których najwięcej pracy ukrywa się pod prostym zakupowym flow. Użytkownik widzi sklep w swoim języku, ceny w odpowiedniej walucie i wygodny proces zamówienia. Za tym stoją tygodnie konfiguracji, tłumaczeń, testów i dopinania szczegółów.
