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.

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.

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