Realizacja · Ratujesz24

Ratujesz24 - odświeżony sklep ze sprzętem, który ratuje życie

Sklep z ponad 1200 produktami stał na builderze Breakdance. Odświeżyliśmy warstwę wizualną i UX według wytycznych klienta oraz jego identyfikacji, a sam builder zastąpiliśmy dedykowanym motywem WordPress i WooCommerce napisanym w czystym PHP: własne tokeny kolorów i typografii, komplet szablonów sklepu od siatki produktów po koszyk, kasę i panel klienta.

Bezpłatna wycena Zobacz sklep klienta

1200+

produktów w katalogu

Od opatrunków i apteczek po defibrylatory AED i fantomy szkoleniowe.

115

kategorii i podkategorii

59 w części otwartej i 56 w osobnym drzewie B2B dla jednostek budżetowych.

śladów buildera w kodzie

Breakdance zniknął ze strony głównej, sklepu, karty produktu i koszyka.

100

SEO i Best Practices

Oba obszary w Lighthouse bez uwag, przy zerowym przesunięciu layoutu.

Klient

Sprzęt ratowniczy, szkolenia i zabezpieczenia medyczne

Ratujesz24 sprzedaje profesjonalny sprzęt ratowniczy - apteczki, defibrylatory AED, torby medyczne, materiały opatrunkowe i sprzęt szkoleniowy - a przy tym prowadzi szkolenia z pierwszej pomocy i zabezpiecza medycznie wydarzenia. Klientami są zarówno osoby prywatne, jak i służby oraz jednostki budżetowe, które kupują na innych zasadach. Zakres naszych prac: odświeżenie UX i UI według wytycznych klienta, dedykowany motyw WordPress i WooCommerce oraz komplet szablonów sklepu.

Realizacja / schemat

Spójna droga do zakupu.

Ratujesz24 · WooCommerce

produktów w katalogu: 1200+
motyw WooCommerce: Własny
adresy produktów: Zachowane

Schemat zakresu realizacji · nie jest nagraniem sklepu

Wyzwanie

Odświeżyć wygląd, nie gubiąc sklepu po drodze

Przy katalogu tej wielkości przebudowa od zera to ryzyko, którego nikt nie potrzebuje. Zadanie brzmiało: nowa warstwa wizualna i lepszy UX, ale w ramach istniejącej marki i bez ruszania asortymentu.

	Sklep na builderze	Dedykowany motyw Ratujesz24
Wygląd	Ograniczony tym, co potrafi builder	Identyfikacja klienta przełożona na tokeny motywu
Szablony sklepu	Składane z sekcji buildera	Własne pliki PHP: siatka, produkt, koszyk, kasa, konto
Style	Generowane przez builder na każdej podstronie	Trzy arkusze motywu: tokeny, komponenty, warstwa strony
Zmiana koloru marki	Klikanie po ustawieniach każdej sekcji	Jedna wartość tokenu dla całego sklepu
Asortyment	Bez zmian	Bez zmian - katalog i adresy zostają na miejscu

Co zrobiliśmy

Pięć obszarów prac

Od przełożenia identyfikacji na tokeny, przez komplet szablonów WooCommerce, po osobną ścieżkę dla jednostek budżetowych.

Schemat ścieżki zakupu z ilustracyjnymi produktami. Nie jest screenshotem sklepu ani odwzorowaniem asortymentu.

Identyfikacja klienta przełożona na tokeny motywu

Czerwień marki jest jedynym kolorem akcji, a motyw trzyma ją w pełnej rampie od 50 do 900 - tak samo jak kolory tekstu, nagłówków i teł. Nad rampami siedzi warstwa semantyczna: tło, tło wyniesione i zagłębione, kolor treści, akcent, obramowania, plus komplety statusów (sukces, błąd, ostrzeżenie, informacja) z osobnym tłem i tekstem, żeby komunikaty koszyka i kasy zawsze miały czytelny kontrast. Typografia to modularna skala od nagłówka 3,4 rem w dół, z jednym miejscem na zmianę bazowego rozmiaru. Zmiana odcienia marki w całym sklepie to dziś podmiana jednej wartości.

Builder zastąpiony czystym PHP

Breakdance zniknął z warstwy front-endu: sprawdziliśmy stronę główną, listing sklepu, stronę kategorii, kartę produktu, koszyk, dział szkoleń i blog - na żadnej z nich nie ma już ani jednego odwołania do buildera. Motyw ładuje style w ustalonej kolejności: tokeny, komponenty, warstwa strony, do tego dwa własne skrypty - nawigacja i leniwe ładowanie obrazów. Sklep dostał więc przewidywalny, czytelny kod zamiast znaczników generowanych przez narzędzie.

Komplet szablonów WooCommerce

Motyw obsługuje cały sklep, a nie tylko stronę główną: siatkę produktów z kartami, stronę kategorii, kartę produktu, koszyk, kasę i panel klienta. Dzięki temu wygląd nie urywa się w połowie ścieżki zakupowej - klient widzi tę samą warstwę wizualną od wejścia na stronę aż po potwierdzenie zamówienia. Płatności obsługuje Przelewy24, wysyłkę Flexible Shipping, a wyszukiwanie w katalogu wyszukiwarka AJAX podpowiadająca produkty już podczas pisania.

UX strony głównej ułożony pod decyzję zakupową

Nagłówek prowadzi wyszukiwarką i paskiem kategorii, zaraz pod hero idzie pas zaufania (najlepsza firma szkoląca 2020-2025, wysyłka tego samego dnia, 100% pozytywnych opinii), a dalej sekcje, po które klienci wracają najczęściej: AED i szafki, Wyprzedaż i Nowości. Niżej logotypy instytucji, które kupują w sklepie, sekcja najczęstszych pytań i formularz kontaktowy. Zamiast jednej długiej listy produktów - kilka wejść dopasowanych do tego, po co ktoś przychodzi.

Osobna ścieżka dla jednostek budżetowych

Służby, szkoły i jednostki budżetowe kupują inaczej niż klient detaliczny, więc sklep prowadzi dwa równoległe drzewa kategorii: 59 kategorii w części otwartej i 56 w części B2B, z własnymi gałęziami defibrylacji, apteczek, materiałów opatrunkowych, ratownictwa taktycznego i sprzętu szkoleniowego. Do tego dane strukturalne dla wyszukiwarek: Organization, WebSite z akcją wyszukiwania, WebPage, BreadcrumbList, FAQPage z sześcioma pytaniami i ImageObject.

Efekt

Co klient dostał do ręki

Sklep wyglądający zgodnie z własną identyfikacją, a nie z możliwościami buildera
Jedna warstwa wizualna na całej ścieżce: od strony głównej po koszyk, kasę i panel klienta
Ponad 1200 produktów i 115 kategorii na miejscu - żaden adres nie zmienił się przy odświeżeniu
Rozdzielone ścieżki: część otwarta i osobne drzewo B2B dla jednostek budżetowych
Zmiana koloru czy rozmiaru tekstu w całym sklepie z jednego pliku z tokenami
SEO i Best Practices po 100/100 w Lighthouse, przy zerowym przesunięciu layoutu

Stack

Na czym to działa

Sklep

WordPressWooCommercededykowany motywPHP

Front

CSS custom propertiestokeny + komponentylazy loadingJSON-LD

Sprzedaż

Przelewy24Flexible Shippingwyszukiwarka AJAX

Marketing

Google Tag ManagerMailerLitekatalog Facebooka

Zobacz sklep ratujesz24.pl