Fischkaufhaus.de – relaunch sklepu i aktualizacja PrestaShop z 1.6 do 8

Po tym, jak w sierpniu 2015 roku przejęliśmy opiekę nad istniejącym sklepem internetowym Fischkaufhaus.de, mogliśmy wspólnie z Müritzfischer świętować liczne sukcesy. Zintegrowano m.in. nową rubrykę z ponad 100 przepisami na dania z ryb, przeprowadzono ulepszenia OnPage i wydajności oraz zbudowano i rozwinięto newsletter marketing. Oprócz dwóch wyróżnień nagrodą Shop Usability Award 2016 i 2017 zdecydowanie największym sukcesem jest to, że obroty na przestrzeni lat wzrosły wielokrotnie.

Ówczesnym systemem sklepowym był PrestaShop 1.6. Tym samym rozwój systemu sklepu znalazł się w technicznym ślepym zaułku, ponieważ aktualizacja z 1.6 do 1.7 nie była już możliwa bez przeszkód — zbyt wiele elementów w rdzeniu systemu uległo zmianie, a Fischkaufhaus.de już wtedy był indywidualnie zaprojektowany i rozwijany.

Tak mijały lata, a relaunch sklepu był wciąż odkładany. Jednak pod koniec 2022 roku Müritzfischer zdecydowali się na relaunch sklepu. Zaleciliśmy, aby sklep — przy zachowaniu PrestaShop — zaprojektować i opracować całkowicie od nowa, ale już w świeżo wydanej wersji 8 (właściwie 1.8 … jednak ze względów komunikacyjnych PrestaShop zdecydował się najwyraźniej na liczbę całkowitą).

Dla nas pozostanie przy PrestaShop miało sens, ponieważ zmiana systemu przy relaunchu jest bardzo ryzykowna, a migracja treści niezwykle wymagająca. Poza tym ryzyko ogromnej utraty widoczności w wyniku zmiany adresów URL byłoby bardzo wysokie.

Sami przeprowadziliśmy już z PSD-Tutorials.de kilka relaunchy ze zmianą systemu:

1. z PHPNuke na vBulletin
2. z vBulletin na Zend-Framework z Xenforo
3. z Zend-Framework z Xenforo — wydzielenie Zend i aktualizacja do samodzielnego oprogramowania forum Xenforo

Podobnie TutKit.com został stworzony w pierwszej wersji w oparciu o framework PHP CodIgniter, a następnie przeszedł relaunch z całkowicie nowym developmentem na frameworku PHP Laravel. Wiemy, o czym mówimy, gdy rozmawiamy o zagrożeniach i ryzykach związanych z relaunchami.

Istnieje wiele przykładów, w których relaunch projektów zakończył się poważną porażką. Na przykład sklep Redcoon, który dziś już nie istnieje. Relaunch frankfurt.de kosztował 1,4 mln euro i skutkował utratą 50% widoczności. Relaunch przeszły także boerse-online.de i macwelt.de. Oto obraz pokazujący, jak zmieniła się widoczność po relaunchu według indeksu widoczności Sistrix.

Właśnie takiego (nie)udanego relaunchu sklepu należało oczywiście uniknąć.

Na co zwrócić uwagę przy relaunchu sklepów internetowych?

Relaunch sklepu internetowego, takiego jak fischkaufhaus.de, wymaga kompleksowego planowania i realizacji, aby zapewnić, że nowy sklep będzie działał pomyślnie i bez zakłóceń. Opracowaliśmy przy tym checklistę, jak optymalnie postępować, aby cele relaunchu rzeczywiście zostały osiągnięte, a ryzyko utraty widoczności pozostało możliwie ograniczone.

Definicja celów i strategia przy relaunchu sklepu:

Jasne cele relaunchu Fischkaufhaus.de: poprawa user experience, zwiększenie przejrzystości, rozbudowa oferty treści, modernizacja designu, wzrost obrotów i wartości koszyka, w perspektywie łatwiejsza rozszerzalność oraz zachowanie możliwości aktualizacji.

Gruntowna analiza starego systemu przy relaunchu sklepu:

Przeprowadzenie szczegółowej analizy obecnego sklepu w celu zidentyfikowania słabych i mocnych stron. Mocną stroną była z pewnością wydajność starego sklepu. Działał po prostu szybko. Uwzględniliśmy również opinie klientów, dane analityczne i współczynniki konwersji.

Przyjazność dla użytkownika (usability):

Zapewnienie intuicyjnej nawigacji i przyjaznego dla użytkownika menu.
Wdrożenie jasnych kategorii produktów, funkcji wyszukiwania i możliwości filtrowania. Do tego checkbox dla produktów „Na stanie”. Uproszczenie struktury i unikanie duplikatów w kategoriach, a także w treściach, na przykład poprzez paginację na stronach kategorii.

Nowoczesny User Interface & Responsive Design:

Optymalizacja sklepu pod różne rozmiary ekranów i urządzenia, aby zapewnić spójne doświadczenie użytkownika.

Optymalizacja PageSpeed & czasów ładowania:

Zapewnienie szybkich czasów ładowania, ponieważ długie oczekiwanie może odstraszać odwiedzających.
Kompresja obrazów, wykorzystanie cache i kontrola wydajności serwera.

SEO-Anforderungen:

Zapewnienie, że nowy sklep jest zoptymalizowany pod kątem wyszukiwarek, aby poprawić widoczność w wynikach wyszukiwania.

1. SEO backup starego sklepu ze wszystkimi starymi adresami URL i istotnymi dla SEO (meta)danymi.
2. URL Redirect Map: stworzenie listy przekierowań adresów URL, które wymagają przekierowań 301 w wyniku usunięcia kategorii lub innych stron.
3. Dopuszczenie crawlingu środowiska deweloperskiego i zapewnienie tam wysokiej jakości OnPage już PRZED going-live

Treści i informacje o produktach:

Stosowanie jasnych, atrakcyjnych opisów produktów i wysokiej jakości zdjęć. Włączenie ocen produktów i opinii klientów w celu budowania zaufania. Mission statement, story budująca identyfikację, historia i wartości.

Migracja istniejących danych:

Zaprogramowanie narzędzia migracyjnego do importu danych klientów, danych zamówień, reguł cenowych i koszykowych, treści kategorii oraz informacji o produktach. To jedno z najbardziej wymagających wyzwań w takim projekcie.

Checkout, shipping i payments:

Oferowanie bezpiecznych opcji płatności i aktualizacja pod kątem przepisów o ochronie danych (cookie consent). Wykorzystanie certyfikatu SSL w celu zapewnienia bezpieczeństwa transakcji. Zróżnicowane koszty wysyłki w zależności od wartości koszyka i terminu dostawy (dopłata sobotnia). Integracja datepickera dla ekspresu 24h oraz połączenie z usługą kurierską Go!. Integracja płatności z różnymi dostawcami usług płatniczych.

Integracja narzędzi marketingowych:

Narzędzia do e-mail marketingu, mediów społecznościowych (Instagram/FB), Google Merchant Center/Google Shopping.

Testing & zapewnienie jakości:

Gruntowne przetestowanie nowego sklepu przed launchem w celu zidentyfikowania i usunięcia błędów oraz problemów. Przeprowadzenie testów funkcjonalnych na różnych urządzeniach i przeglądarkach. Narzędzia testowe Lambda, testy wydajności i Seobility.

Szkolenia i zaangażowanie pracowników:

Przeszkolenie pracowników z nowych funkcji i procesów, aby zapewnić bezproblemowe działanie.

Monitoring, bugfixing i dostosowania:

Regularne monitorowanie sklepu po launchu oraz analiza danych i funkcji w celu oceny wydajności. Usuwanie bugów i w razie potrzeby wprowadzanie dalszych dostosowań w reakcji na opinie klientów i dane analityczne.

Relaunch sklepu internetowego wymaga starannego planowania, realizacji i monitorowania, aby zapewnić, że nowy sklep spełni oczekiwania klientów i odniesie sukces.

Kroki od koncepcji przez development aż po go-live przy relaunchu sklepu:

1. Faza researchu

Ponieważ współpracujemy z Müritzfischer już od wielu lat, znamy ich cele oraz ich (docelowych) klientów i wiemy, jakie są wymagania, potrzeby i kluczowe kwestie. Mimo to rozpoczęliśmy intensywną fazę researchu, kompleksowo przeanalizowaliśmy sytuację konkurencyjną i zbadaliśmy najlepsze (międzynarodowe) rozwiązania branżowe w obszarze food shopów.

Nasz plik researchowy zawierał na koniec ponad 50 stron materiału dla naszego zespołu UX na temat najlepszych międzynarodowych food shopów, które funkcjonalnie, projektowo i technicznie stanowiły dla nas poprzeczkę, którą należało przeskoczyć. Wiele sklepów podobało nam się jako całość, a czasami były to tylko małe obszary lub funkcje sklepu, które nas po prostu zachwyciły albo oferowały dobrą możliwość zapewnienia zgodności z zasadą EEAT Google dotyczącą wysokiej jakości contentu itp.

2. Koncepcja wireframe przy relaunchu sklepu

Na podstawie naszych materiałów researchowych i odpowiedniego briefingu opracowaliśmy dopasowaną koncepcję dla Fischkaufhaus.de i realizacji celów relaunchu w formie prototypu wireframe. W tym koncepcyjnym kroku uzgodniliśmy wspólnie z Müritzfischer całe user experience wzdłuż customer journey (architektura informacji i interakcji, ścieżki kliknięć, call-to-actions itd.) i zaprojektowaliśmy strukturę, treść i układ przyszłego sklepu internetowego.

Oto przegląd, jak wygląda taka klikalna koncepcja wireframe na tym bardzo wczesnym etapie projektowania.

3. Projektowanie user interface designu dla nowego sklepu

Po tym, jak wraz z koncepcją wireframe ustalono architekturę informacji, specyfikacje interakcji i ścieżki nawigacji oraz uzgodniono je z klientem, wypełniliśmy koncepcję życiem za pomocą elementów styleguide’u, tzn. właściwych kolorów, fontów, obrazów, a także już właściwych tekstów, o ile były one dostępne w istniejącym sklepie.

Dzięki temu można poczuć przyszły sklep, a dzięki klikalnemu prototypowi online, stworzonemu w Adobe XD, klient — mimo że wszystko było jeszcze na poziomie designu — mógł już wszystko przeklikać i przekazać cenny feedback. Oto fragment koncepcji user interface designu, która dla wariantu desktopowego obejmowała 42 boardy:

Ponieważ większość klientów odwiedza sklep już z urządzeń mobilnych, przy projektowaniu user interface położono również silny nacisk na wersję mobilną, dla której stworzono kolejne 39 boardów jako klikalny prototyp.

Korporacyjny błękit został minimalnie dostosowany i odpowiada teraz również błękitowi Müritzfischer. Także font Festivo Letters, obecny wcześniej tylko w logo, jest teraz zintegrowany jako font nagłówków i tworzy w ten sposób spójną kombinację z Futurą (jako fontem tekstu ciągłego).

W niebieskich obszarach jako teksturalny pattern występuje wzór płycizn z jeziora Müritz, co stylistycznie dopełnia ogólne wrażenie user interface’u.

Po kilkugodzinnym spotkaniu i prezentacji designu przed zespołem zarządzającym klienta otrzymaliśmy od razu zgodę na development.

4. Instalacja PrestaShop 8 i migracja starych danych

W dniu publikacji nowej wersji PrestaShop 8 rozpoczęliśmy development nowego sklepu. Zainstalowano standardowy theme. Kolejnym dużym krokiem była migracja starych danych. Zdecydowaliśmy się zmigrować dane starego sklepu z PrestaShop 1.6 już na samym początku, ponieważ z jednej strony było to jedno z największych wyzwań całego projektu, a z drugiej strony mogliśmy od razu pracować na „prawdziwych” danych, czyli kategoriach, produktach, obrazach itd.

Migracja przebiegła pomyślnie i wiedzieliśmy, że w noc przed launchem musimy już tylko zaktualizować dane klientów i zamówień osobną migracją. Dobre uczucie od samego początku.

5. Development frontendu i backendu oraz programowanie indywidualnych modułów PrestaShop

Teraz należało wdrożyć nasz user interface design i stworzyć indywidualny PrestaShop. Nie tylko zaimplementowano design po stronie frontendu, ale opracowano także wiele indywidualnych modułów PrestaShop, aby zapewnić łatwą edycję wszystkich obszarów również z poziomu backendu.

Dodatkowo należało podłączyć i skonfigurować moduły wysyłki, logistyki i płatności. Zintegrowano również moduł Google Merchant Center, aby móc wystawiać produkty także w Google Shopping. Jako moduł zintegrowano też funkcję powiadomień mailowych o ponownej dostępności produktów, dzięki której klienci są automatycznie kontaktowani mailowo, gdy tylko stan magazynowy „subskrybowanych” produktów zmieni się z 0 na X. Jest to szczególnie przydatne w przypadku ryb, ponieważ niektóre gatunki są dostępne tylko przez kilka tygodni, np. specjały takie jak skrei czy belona.

6. Strukturalne i merytoryczne optymalizacje contentu (tekst i obraz) & SEO-sprint

Karta oferty została przepracowana i dostosowana do grupy docelowej. Jeśli wcześniej istniał np. podział na ryby wędzone regionalne i ryby wędzone międzynarodowe, to teraz wyroby wędzone są zebrane w jednej kategorii … podobnie jak ryby świeże, mrożonki i tak dalej. Kto wie na pewno, że pstrąg pochodzi z akwakultury, a karmazyn nie jest rybą regionalną, lecz poławianą na Atlantyku. Są więc rzeczy, które dla rybaków są ważne i oczywiste, ale dla konsumentów nie mają aż takiego znaczenia.

Dzięki połączeniu kategorii można było usunąć ponad 20 z nich, a menu zbudować w sposób bardziej zorientowany na klienta. Ponadto poniżej sekcji hero dostępne jest teraz filtrowanie oparte na ikonach z najważniejszymi kategoriami (tutaj z owocami morza w stanie hover).

W kategoriach dodano teksty wprowadzające, a poniżej widoku produktów zintegrowano sekcję FAQ oraz przepisy na dania z ryb dopasowane do poszczególnych gatunków. Przepracowano także funkcje filtrowania i sortowania, a na koniec zintegrowano filtr „Na stanie”.

Przepracowano również same strony produktowe. Zdjęcie produktu jest wyświetlane w większym rozmiarze, a sekcja ze szczegółami produktu, wartościami odżywczymi, alergenami itd. została w widoku uporządkowana. Podczas przewijania call-to-action (przycisk: Do koszyka) pozostaje w polu widzenia. Dodatkowo dodano kolejną sekcję „Warto wiedzieć” z kilkoma kluczowymi faktami.

Jednym z największych ulepszeń, które w istotny sposób przyczyniło się do obniżenia wskaźnika porzuceń, jest poprawiona struktura checkoutu. Zbędne sekcje zostały ukryte, a wszystko zoptymalizowano pod kątem finalizacji zakupu.

Strona główna została rozbudowana o mission statement, sekcję social ze snippetami z Instagrama oraz kolejne informacyjne sekcje contentowe. Nawiązano również współprace z food influencerami, szefami kuchni z gwiazdkami oraz autorem książek kucharskich w zakresie wywiadów i testimoniali. Nawet Marteria, który jako zdeklarowany wędkarz regularnie przyjeżdża nad Müritz, udzielił testimonialu dla Müritzfischer.

Oprócz filmu wizerunkowego dostępne jest teraz także wideo objaśniające dotyczące pakowania i wysyłki, aby osobom, które nie znają jeszcze 24-godzinnego ekspresu chłodniczego, pomóc pozbyć się początkowych obaw.

Na stronie „O nas” chwali nas autor magazynu Stern, podobnie jak magazyn Greenpeace. Podsumowując, Müritzfischer prezentują się ze swoim nowym sklepem internetowym Fischkaufhaus.de wiarygodnie jako jeden z „top autorytetów” w obszarze food, który w inspirujący i budujący identyfikację sposób reprezentuje zrównoważoną misję na rzecz produktów regionalnych o najlepszym bilansie ekologicznym.

Za pomocą narzędzia SEO Seobility zoptymalizowano wszystkie strony, usunięto błędy techniczne, strukturalne i contentowe oraz zoptymalizowano wszystkie kategorie i produkty pod kątem istotnych keywordów. Dodano również liczne rubryki, które z jednej strony są informacyjne dla klienta, a z drugiej spełniają także cele SEO. Czy istnieje piękniejsza sekcja SEO niż ta, która jako SEO-slideshow rozwija swoje działanie na stronie głównej … 🙂

Sam ten SEO-sprint wymagał około miesiąca pracy pracowników z działów contentu i developmentu.

Dzięki optymalizacjom liczba crawlowanych stron została zredukowana z 845 w starym systemie do 478 w nowym. Wiele z nich było wcześniej jedynie duplicate content lub stronami z innych względów nieistotnymi. Dzięki temu link power sklepu rozkłada się na mniejszą liczbę stron, co jest korzystne. Tym samym wyższa jest także relewantność istniejących treści, a crawler będzie zadowolony. Swoją drogą: jestem przekonany, że taka dystrybucja wywoływanych i analizowanych stron będzie dla technicznego SEO jeszcze ważniejsza. Przez AI na strony internetowe trafia coraz więcej contentu, a crawlery nie nadążają już z indeksowaniem. Tym samym Google samo będzie też oceniać, gdzie strony są czyste dla crawlerów, a gdzie jest po prostu dużo śmieciowych danych. Im mniejszy spread, tym lepiej.

Łącznie zoptymalizowaliśmy Fischkaufhaus.de z 69 do 93 procent SEO score według Seobility. Takie narzędzie SEO służy nie tylko poprawie widoczności online w Google, lecz jest przede wszystkim narzędziem zapewnienia jakości, a tym samym zabezpieczenia ważnych czynników OnPage oraz unikania typowych błędów, które mogą zdarzyć się w procesach relaunchu.

Jakie są wyniki relaunchu sklepu Fischkaufhaus.de?

Na wstępie: przygotowaliśmy wszystko na wielki dzień relaunchu i uruchomiliśmy go w nocy z niedzieli na poniedziałek, gdy ruch na stronie jest najmniejszy, a przestój ma najmniejsze skutki. Dzięki temu mieliśmy jeszcze pięć dni roboczych w zapasie, gdyby wbrew oczekiwaniom pojawiły się większe problemy. Jeszcze przed wschodem słońca w poniedziałkowy poranek byliśmy online z nowym sklepem. Wszystko skonfigurowaliśmy na serwerze w chmurze, provider musiał już tylko przełączyć się na nowe IP i najpóźniej w porze obiadowej wszyscy odwiedzający widzieli już nowy sklep. Wszystko przebiegło bez zakłóceń. Klient był szczęśliwy. My też. Jako wynik relaunchu możemy stwierdzić:

• Osiągnięto wyraźną poprawę user experience zarówno w wersji mobilnej, jak i na komputerze.
• Poprawiono storytelling wizualny i tekstowy, a klient jeszcze wyraźniej pozycjonuje się jako regionalny dostawca z wartościami.
• Współprace ze znanymi ekspertami food (szefowie kuchni z gwiazdkami, właściciele szkół gotowania, autorzy kulinarni, food influencerzy) zwiększają wiarygodność i zaufanie do rybaków jako jednego z autorytetów w segmencie rybnym.
• Łatwość utrzymania i dalszy rozwój są zapewnione dzięki nowej linii PrestaShop 8, co w przyszłości ułatwi nam jako agencji realizację życzeń klientów.
• I najważniejsze: już po sześciu tygodniach od uruchomienia odnotowano wzrost obrotów o 17 procent w porównaniu z analogicznym okresem roku poprzedniego.

Do sklepu internetowego Müritzfischer: Fischkaufhaus.de

Jeśli także dla Państwa relaunch sklepu jest interesujący i chcą Państwo być obsługiwani przez prawdziwych profesjonalistów, zapraszamy do kontaktu z nami. Jako agencja działamy inaczej niż inne agencje e-commerce, ponieważ sami z dużym sukcesem prowadzimy własny sklep.

Update 2026: upgrade PrestaShop do wersji 9

Sklep Fischkaufhaus.de został w międzyczasie rozwinięty technicznie i zaktualizowany z PrestaShop 8 do aktualnej wersji 9. W nowym case study pokazujemy, jak przygotowano upgrade sklepu o wysokim ruchu, jakie wyzwania się pojawiły i jakie udało się osiągnąć poprawy wydajności.

👉 Do case study: Upgrade PrestaShop z wersji 8 do 9