Case study · Sklep Shopify
Kitsune Performance
Sklep z częściami performance i warsztat tuningowy na Shopify: ponad 25 tysięcy produktów dopasowanych do konkretnych aut. Przebudowaliśmy motyw tak, żeby klient szybko znalazł części do swojego auta, zapytania trafiały prosto do systemu warsztatu, a zespół zmieniał treści sam.
- 25 583
- produktów w katalogu
- 40 638
- wariantów
- 2 619
- kolekcji
- 2 626
- przekierowań URL
- 47
- menu nawigacji
- 70
- szablonów stron, produktów i kolekcji
Duży sklep, który latami rósł warstwami.
Sklep i warsztat w jednym miejscu, dziesiątki tysięcy części do konkretnych aut. Motyw obrastał wklejonym kodem, kopiami i wyłączonymi sekcjami, aż każda zmiana zaczęła wymagać programisty.
- 01Klient szuka po aucie, nie po kategoriiCzęść musi pasować do marki, modelu i generacji. Natywne menu Shopify ma trzy poziomy, a tu potrzeba więcej.
- 02Zapytanie zamiast koszykaWydech na wymiar albo serwis to nie produkt z ceną. Zapytanie musi trafić do warsztatu z kompletem danych o aucie.
- 03Kod wklejony w treśćLandingi marek żyły jako surowy HTML w polach Custom Liquid. Zmiana jednego zdania wymagała programisty.
- 04Skala ponad ręczną pracęPonad 2,6 tysiąca kolekcji potrzebuje opisów i spójnej struktury. Pisanie ich po kolei nie wchodzi w grę.
Własna warstwa na gotowym motywie.
Motyw bazowy został, a na nim powstały własne sekcje, bloki, skrypty i ponad 80 nowych ustawień. Każda zmiana w plikach motywu jest oznaczona w kodzie.
Jeden moduł do wszystkich zapytań
Kontakt, karta produktu, landingi i wycena wysyłają zgłoszenie do systemu warsztatu. Bez JavaScriptu ten sam formularz trafia do skrzynki Shopify.
Formularz składany w edytorze
Do trzech kroków, siedem typów pól i pola zależne od wybranej usługi. Zespół zmienia pytania bez programisty.
Zgłoszenie nie ginie
Jasne komunikaty walidacji, zdjęcia auta, numer zgłoszenia. Przy błędzie zamiast fałszywego „wysłano” pojawia się WhatsApp z gotowym opisem sprawy.
Mega menu do pięciu poziomów
Marka, model, generacja. Głębsze poziomy doczytują się z osobnych menu, więc zespół zarządza nimi w panelu Shopify.
Części do Twojego auta
Trzy listy na stronie głównej: zmiana marki czyści model i generację, a wyniki pokazują się dopiero dla konkretnego auta.
Jedna sekcja na 2,6 tys. kolekcji
Sama rozpoznaje kategorię, markę albo model auta i dobiera opis, popularne modele i kafle kategorii. Zastąpiła trzy sekcje z wklejonym kodem.
Jeden graf firmy w JSON-LD
Dane warsztatu z ustawień motywu zasilają JSON-LD na całej stronie. Produkty z ceną na zapytanie nie pokazują w Google „0 zł”.
17 landingów edytowalnych w panelu
Wklejony HTML zamieniony na sekcje, w których każdy tekst, link i obraz zmienia się w edytorze. Wygląd bez zmian.
Od marki do generacji w trzech kliknięciach.
49 marek, około 280 modeli i 39 osobnych menu generacji. Shopify pozwala na trzy poziomy menu, więc kolejne doczytujemy po nazwie, na desktopie i w menu mobilnym.
- BMW
- Audi
- Mercedes-Benz
- Porsche
- Volkswagen
- Ford
- Seria 1
- Seria 2 / M2
- Seria 3 / M3
- Seria 4 / M4
- Seria 5 / M5 / i5
- X3 / X3M / iX3
- Seria 3 E36
- Seria 3 E46
- Seria 3 E90 / E91 / E92 / E93
- i kolejne generacje
Od wyboru auta do wyceny w systemie warsztatu.
- 01AutoMarka, model i generacja w menu albo w wyszukiwarce na stronie głównej.
- 02Produkt lub usługaPrzy cenie „na zapytanie” zamiast ceny od razu formularz, telefon i WhatsApp.
- 03FormularzKroki, pola zależne od usługi, zdjęcia auta i walidacja z jasnymi komunikatami.
- 04ZgłoszenieWebhook do systemu warsztatu z numerem referencyjnym. Awaryjnie skrzynka Shopify.
- 05WycenaZapytanie ląduje w Kitsune Garage i od razu ma status i historię.
- 06PomiarZdarzenie generate_lead w GA4 i w Shopify, więc widać, które kampanie dają zapytania.
Sklep, w którym klient trafia do swojego auta.
Od marki do generacji bez przeładowania strony.
Menu Shopify kończy się na trzecim poziomie, a tu generacje doczytują się z osobnych menu. Na telefonie ta sama struktura działa jako akordeon w szufladzie menu.
Trzy listy zamiast przekopywania kategorii.
Marka, model, rocznik. Zmiana marki czyści niższe listy, a pole rocznika odblokowuje się tylko tam, gdzie sklep ma osobne generacje.
Każda z 2,6 tys. kolekcji ma własną treść.
Sekcja sama rozpoznaje, że to kolekcja modelu auta, i składa opis, popularne kategorie, marki i kafle kategorii z produktów. Bez pisania tekstu dla każdej kolekcji ręcznie.
Podaj auto i telefon, resztę ustalimy w rozmowie.
Formularz pyta tylko o to, czego warsztat potrzebuje do wyceny. Pola, kroki i teksty ustawia się w edytorze motywu, a zgłoszenie od razu trafia do systemu warsztatu.
Trzy krótkie kroki zamiast jednej długiej ankiety.
Nowy czy stały klient, osoba prywatna czy firma, dane auta albo zrzut ekranu z aplikacji auta, wybór usług. Pasek postępu pokazuje, ile zostało.
Zrzuty ze sklepu na żywo. Formularze wyrenderowane z kodu motywu sklepu.
Custom, który da się utrzymać.
Nowe funkcje żyją w osobnych plikach, a zmiany w motywie bazowym są oznaczone. Treści, które zmienia zespół, są w edytorze, nie w kodzie.
| Platforma | Shopify z gotowym motywem rozbudowanym o własne sekcje, bloki, snippety i ponad 80 nowych ustawień globalnych. |
|---|---|
| Formularze | Jeden moduł JS dla wszystkich formularzy: natywna walidacja z własnymi komunikatami, do 6 zdjęć, limit czasu i plan awaryjny. Działa też bez JavaScriptu. |
| Nawigacja | Mega menu i menu mobilne do 5 poziomów, doczytywane z menu Shopify. Na telefonie header chowa się przy przewijaniu bez przesuwania treści. |
| SEO | Szablonowe opisy dla tysięcy kolekcji, JSON-LD (Organization, AutoRepair, FAQPage, BreadcrumbList, Product), zastępcze opisy meta i noindex dla duplikatów. |
| Wydajność | CSS i JS strony głównej ładują się tylko na niej. Pierwszy slajd ma priorytet, kolejne ładują się leniwie, a animacje stają poza ekranem. |
| Dostępność | Obsługa prefers-reduced-motion, fokus na błędnym polu, podpowiedzi autocomplete i przycisk pauzy karuzeli. |
| Pomiar | Zdarzenie generate_lead w GA4 i w zdarzeniach klienta Shopify po każdym wysłanym zapytaniu. |
Duży sklep, który nie boi się zmian.
- 01Zapytania lądują w systemie warsztatuZ danymi auta i zdjęciami, bez przepisywania z maila.
- 02Zespół zmienia treści samLandingi, formularze i opisy kolekcji edytuje się w panelu Shopify, bez programisty.
- 03Klient znajduje części do swojego autaMarka, model i generacja w menu i w wyszukiwarce na stronie głównej.
- 04Sklep czytelny dla wyszukiwarekSpójne dane strukturalne i opisy dla tysięcy kolekcji zamiast pustych stron kategorii.