Nowy WooCommerce dla Galerii Bolesławiec: migracja, automatyzacje e-mail i SEO bez przestoju

Ręcznie zdobiona ceramika z Bolesławca, prawie 7000 produktów w katalogu, żywa lista mailingowa i sklep, który przez cały czas musiał sprzedawać. Zbudowaliśmy nowy WooCommerce obok działającego, przenieśliśmy wszystko 1:1 i dołożyliśmy to, czego wcześniej brakowało: automatyzacje e-mail, porządne SEO i checkout, który nie gubi klientów.

Galeria Bolesławiec to krakowski sklep z ceramiką bolesławiecką: kubki, talerze, komplety obiadowe, dzbanki, wszystko ręcznie malowane w charakterystyczne kobaltowe wzory. Klient przyszedł z dobrze działającym, ale starzejącym się sklepem. Chciał nowego wyglądu i nowych możliwości marketingowych, ale bez ryzyka, że w trakcie zmian straci klientów, pozycje w Google albo zaufanie subskrybentów. Tak wygląda typowy projekt z naszej oferty stron internetowych i sklepów: nowy sklep to nie tylko nowy wygląd, ale przede wszystkim bezpieczne przeniesienie wszystkiego, na czym sklep zarabia.

Punkt wyjścia

Stary sklep robił swoje, ale miał kilka problemów, które z czasem zaczęły kosztować:

• Duży, rozbudowany katalog. Prawie 7000 produktów i wariantów, 38 kategorii, 86 tagów. Z tego około 1300 pozycji jest w danym momencie dostępnych na stanie. Reszta to wzory czasowo niedostępne, które wracają przy kolejnych dostawach.
• Lista mailingowa bez automatyzacji. Ponad 1600 osób zapisanych do newslettera w MailerLite, ale sklep nie przekazywał do niej żadnych danych zakupowych. Każdy mailing szedł do wszystkich tak samo, niezależnie od tego, czy ktoś kupił wczoraj, czy nigdy.
• SEO z lukami. Żaden obraz produktu nie miał tekstu alternatywnego. Część kategorii i produktów nie miała własnych opisów meta, a opis strony głównej był ucięty w połowie zdania.
• Drobne tarcia w koszyku. Podwójna informacja o VAT, mylące komunikaty przy wyprzedanych produktach, paginacja, która przy kilkudziesięciu stronach listingu wychodziła poza ekran.

Cel był prosty do opisania i trudny do zrobienia: nowy sklep, ta sama sprzedaż w trakcie prac, zero strat po przełączeniu.

Wyzwanie: nowy sklep obok działającego

Nowy sklep budowaliśmy na osobnym środowisku testowym (stage), na tym samym hostingu co produkcja. To wygodne, ale niesie dwa poważne ryzyka.

Ryzyko 1: mail ze stage trafia do prawdziwego klienta. Środowisko testowe z kopią prawdziwych zamówień i kont klientów to bomba z opóźnionym zapłonem. Wystarczy jedna zmiana statusu zamówienia, jedno uruchomione zadanie cron albo jeden test automatyzacji, a klient, który kupił kubek pół roku temu, dostaje maila „Twoje zamówienie zostało wysłane”.

Ryzyko 2: utrata widoczności w Google. Każda migracja sklepu to ryzyko spadków: zmienione adresy, zgubione opisy meta, zduplikowana treść widoczna dla robotów, zanim nowy sklep jest gotowy.

Bezpieczny stage: cztery warstwy ochrony

Zanim przenieśliśmy jakiekolwiek dane, zabezpieczyliśmy środowisko testowe:

• Hasło przed całą stroną. Stage był niedostępny dla nikogo spoza zespołu i klienta, łącznie z robotami wyszukiwarek.
• Brak indeksowania na czterech poziomach: nagłówek HTTP, meta robots, ustawienie WordPressa i blokada w robots.txt. Nawet gdyby ktoś opublikował link, Google nie miał czego indeksować.
• Strażnik poczty. Każdy mail wysyłany przez WordPressa ze stage był przechwytywany i przekierowywany do opiekuna projektu, z oznaczeniem [STAGE] w temacie i limitem wysyłek na godzinę. Klienci sklepu nie mogli dostać żadnej wiadomości ze środowiska testowego.
• Bezpiecznik MailerLite. Integracja z newsletterem na stage mogła zapisywać kontakty wyłącznie do osobnej, testowej grupy. Każda próba zapisu do prawdziwej listy była blokowana, zanim zapytanie opuściło serwer.

Migracja danych 1:1

Produkty, kategorie, zdjęcia

Całą ofertę przenieśliśmy z działającego sklepu przez jego API, wyłącznie w trybie odczytu. Na produkcji nie zainstalowaliśmy ani jednej wtyczki i nie zmieniliśmy ani jednej linii kodu. Stary sklep sprzedawał dalej, nie wiedząc, że jest kopiowany.

• prawie 7000 produktów i wariantów, z cenami, cenami promocyjnymi, stanami magazynowymi, atrybutami i zdjęciami
• 38 kategorii z hierarchią i opisami
• dopasowanie po SKU, a gdy go brakowało, po adresie produktu, żeby ponowne uruchomienie importu aktualizowało produkty zamiast tworzyć duplikaty

Watcher cen i stanów

Budowa nowego sklepu trwała tygodniami, a w tym czasie stary sklep normalnie sprzedawał i przyjmował dostawy. Żeby stage nie rozjechał się z rzeczywistością, dołożyliśmy watcher, który na żądanie porównywał ceny i stany magazynowe z produkcją i aktualizował tylko to, co się zmieniło. W dniu przełączenia nowy sklep miał dokładnie te same ceny i stany co stary.

Klienci i historia zamówień

Przenieśliśmy konta klientów i historię zamówień, żeby stali klienci po przełączeniu widzieli w „Moim koncie” swoje wcześniejsze zakupy. Import miał potrójny bezpiecznik pocztowy: globalny strażnik poczty, wyłączone wszystkie szablony maili WooCommerce na czas importu i zdjęte wyzwalacze zmian statusów. Kilka tysięcy zaimportowanych zamówień, zero wysłanych maili.

Nowy sklep: katalog, w którym ceramikę wybiera się po wzorze

W ceramice bolesławieckiej klient rzadko szuka „kubka”. Szuka kubka w konkretny wzór: kropki, jagody, maki, konie. Dlatego nawigację zbudowaliśmy wokół dwóch osi naraz, kształtu i dekoracji, a wzory pokazujemy jako miniatury, nie jako listę nazw.

SEO: nic nie tracimy, uzupełniamy braki

Przeniesienie 1:1

Dla każdej strony, wpisu, produktu i kategorii pobraliśmy z produkcji to, co faktycznie widzi Google: tytuł, opis meta, dane Open Graph. Zapisaliśmy je w nowym sklepie bez zmian. 73 z 73 zmapowanych podstron miało po migracji identyczne dane SEO jak przed nią. Adresy produktów i kategorii zostały takie same, więc linki z Google, z maili i z social mediów działały od pierwszej minuty.

Uzupełnienie tego, czego brakowało

• Teksty alternatywne obrazów. Stary sklep nie miał ani jednego. Wygenerowaliśmy je według spójnego wzoru (nazwa produktu i opis rodzaju ceramiki), zaczynając od 150 zdjęć produktów.
• Brakujące opisy meta dla produktów i kategorii, które ich nie miały, pisane z krótkiego opisu produktu, w limicie długości wyświetlanym przez Google.
• Dane strukturalne firmy (LocalBusiness / Store): nazwa, adres sklepu w Krakowie, godziny otwarcia, telefon, akceptowane metody płatności i waluty. Google dostaje jednoznaczną informację, kim jest sprzedawca i gdzie go znaleźć.

Marketing automation: sklep rozmawia z newsletterem

To była największa nowa wartość wdrożenia. Wcześniej sklep i lista mailingowa żyły osobno. Teraz każde zamówienie zasila profil klienta w MailerLite danymi zakupowymi.

Dane, które trafiają do newslettera

Po każdym opłaconym zamówieniu profil subskrybenta aktualizuje się automatycznie o: liczbę zamówień, łączną wartość zakupów, średnią wartość koszyka, datę pierwszego i ostatniego zamówienia, status ostatniego zamówienia oraz ulubioną kategorię produktów. Dzięki temu można wysłać inną wiadomość komuś, kto kupuje co miesiąc talerze, a inną komuś, kto raz kupił kubek na prezent.

Zgoda zgodna z RODO

Przy zamówieniu i w „Moim koncie” pojawił się jeden, domyślnie niezaznaczony checkbox zgody marketingowej, wyglądem dopasowany do zgody na regulamin. Razem ze zgodą zapisujemy dowód: datę, adres IP i przeglądarkę. Jedna zgoda obejmuje newsletter, oferty i przypomnienia o koszyku, a jej treść jest opisana w polityce prywatności.

Trzy automatyzacje

• Powitanie (3 maile). Kilka minut po zapisie mail powitalny, po dwóch dniach bestsellery, po kolejnych pięciu rabat na pierwsze zakupy. Jeśli klient w międzyczasie coś kupi, sekwencja się kończy i nie dostaje rabatu, którego już nie potrzebuje.
• Porzucony koszyk. Gdy zalogowany klient ze zgodą zostawi produkty w koszyku na ponad godzinę, startuje sekwencja przypomnień (po 1 h, 24 h i 48 h). Zakup natychmiast zatrzymuje sekwencję, na dwa niezależne sposoby, żeby nikt nie dostał przypomnienia o koszyku, za który już zapłacił.
• Reaktywacja. Klienci, którzy dawno nie kupowali, dostają osobną ścieżkę z nowościami z ich ulubionej kategorii.

UX sklepu i checkoutu

Przy okazji migracji wyczyściliśmy drobne tarcia, które pojedynczo wyglądają niewinnie, ale razem kosztują konwersję:

• Checkout, który nie zostawia klienta z niczym. Jeśli w koszyku jest problem (produkt właśnie się wyprzedał, wariant bez ceny), klient nie widzi już ogólnego „Wystąpiły problemy z koszykiem”. Trafia od razu do koszyka z konkretnym komunikatem przy konkretnym produkcie.
• Niedostępne produkty znikają wszędzie. WooCommerce ukrywał wyprzedane pozycje w sklepie i kategoriach, ale nie w karuzelach na stronie głównej, w sekcji „Pasujące do zestawu” ani w podpowiedziach wyszukiwarki. Teraz ukrywa je wszędzie, a karta produktu dalej otwiera się pod swoim adresem, więc linki z Google i z maili nie prowadzą w próżnię.
• Paginacja na ludzką skalę. Przy ponad 40 stronach listingu domyślna paginacja WooCommerce wylewała się poza ekran. Wprowadziliśmy krótki format znany z dużych marketplace’ów: 1 2 3 … 15 16 17 … 42 43.
• Czytelne podsumowanie zamówienia. Usunęliśmy zdublowaną informację o VAT i ujednoliciliśmy wielkość groszy w podsumowaniu koszyka.
• Stabilny nagłówek. Usunęliśmy efekt zmniejszania nagłówka przy przewijaniu, który powodował przeskok treści.
• Delikatne animacje wejścia elementów przy przewijaniu, napisane tak, żeby nie kolidowały z efektami najechania na karty produktów.

Sklep obsługuje płatności BLIK, przelewy online, karty i płatności odroczone, wysyłkę DHL oraz integrację z BaseLinkerem, a informacja o najniższej cenie z 30 dni (dyrektywa Omnibus) działa przy każdym produkcie w promocji.

Materiały marketingowe z AI, ale z zasadami

Przy okazji wdrożenia sprawdziliśmy na prawdziwych produktach sklepu, do czego nadają się narzędzia AI do grafiki i wideo (Magnific). W sklepie z ręcznie malowaną ceramiką wzór jest produktem, więc każdy wynik porównywaliśmy z oryginałem.

Wnioski, które z tego wyciągnęliśmy:

• do zdjęć w galerii produktu tylko narzędzia wierne oryginałowi: usuwanie tła i precyzyjne powiększanie
• sceny lifestyle oznaczamy jako wizualizacje i używamy ich w marketingu, nie w karcie produktu
• jeden produkt na kadr: przy kilku produktach w jednej scenie model za każdym razem zmieniał wzór któregoś z nich
• zrzuty ekranu realizacji nigdy nie idą przez generator, AI robi wyłącznie tło mockupu

Przełączenie na produkcję

Dzień startu to najbardziej ryzykowny moment każdej migracji, więc mieliśmy go rozpisanego punkt po punkcie:

1. Plansza „Trwają prace techniczne” w stylistyce marki dla odwiedzających, ze statusem, który mówi Google, że przerwa jest chwilowa i nie należy usuwać strony z wyników. Zalogowani administratorzy widzieli w tym czasie normalny sklep i mogli go sprawdzić przed otwarciem.
2. Ostatnia synchronizacja cen i stanów.
3. Usunięcie wszystkich zabezpieczeń stage: hasła przed stroną, blokad indeksowania, strażnika poczty i testowego bezpiecznika MailerLite.
4. Przełączenie integracji newslettera na produkcyjną listę i produkcyjne automatyzacje.
5. Weryfikacja: tytuły, opisy, dane strukturalne, testowe zamówienie, mail potwierdzający, zapis do MailerLite.

Sklep wystartował i od pierwszego dnia przyjmuje zamówienia. Dalszy rozwój i bieżącą opiekę prowadzimy w ramach utrzymania i rozwoju stron.

Efekty

• Ciągłość sprzedaży. Stary sklep sprzedawał przez cały czas budowy nowego, a przełączenie zamknęło się w krótkim, zaplanowanym oknie technicznym.
• Zero przypadkowych maili. Przez cały okres prac i importu żaden klient sklepu ani subskrybent nie dostał wiadomości ze środowiska testowego.
• Kompletne dane. Prawie 7000 produktów, kategorie, konta klientów i historia zamówień przeniesione 1:1.
• SEO bez strat i z nadwyżką. Wszystkie dotychczasowe dane SEO zachowane, adresy bez zmian, a do tego teksty alternatywne obrazów, brakujące opisy meta i dane strukturalne firmy.
• Newsletter, który zna klienta. Każde zamówienie zasila profil w MailerLite, a automatyzacje pracują bez udziału zespołu sklepu.