Case study · Rowery i sprzęt sportowy
Nowy frontend, który na telefonie ładuje się w 1,4 s.
Dwa sklepy na jednej instalacji Magento przeszły z Lumy na Hyvä. Strona ładuje się na telefonie w 1,4 s.
- Klient
- Sprint Rowery: nowy frontend sklepu na Hyvä
- Zakres
- E-commerce
Klient
Jak przejąć sklep z sześcioma motywami i ponad 120 modułami?
Sprint Rowery sprzedaje rowery i sprzęt sportowy w sklepie internetowym i w salonach. Jest autoryzowanym dealerem Trek z salonami w Białymstoku, Warszawie i Kielcach. Na jednej instalacji Magento 2 działają dwa sklepy firmy: sprint-rowery.pl i roweroza.pl.
Instalację przejęliśmy w sierpniu 2024 roku, z dużym długiem technologicznym: sześć motywów od trzech różnych dostawców i ponad 120 modułów dopisanych przez kilkanaście firm, bez dokumentacji. W takim stanie każda zmiana była droga, a przewidywalność była niska. Nowy frontend uruchomiliśmy w lutym 2026 roku.
Problem
Wolna strona i drogie zmiany
Sklep działał na Lumie, domyślnym frontendzie Magento. Luma pochodzi z 2015 roku i działa tak: przeglądarka pobiera stronę, a dopiero potem dokłada do niej skrypty i uruchamia elementy interaktywne. Klient widzi stronę, która wygląda na gotową, ale jeszcze nie reaguje. Na telefonie widać to najbardziej. Do tego sklep działał na wersji Magento, która od kwietnia 2025 roku nie dostawała już poprawek bezpieczeństwa.
Lumę można optymalizować latami, ale każda kolejna poprawka daje coraz mniej. Zaproponowaliśmy więc nie kolejną łatkę, tylko nowy frontend na Hyvä.
Dlaczego Hyvä
Tańsza każda kolejna zmiana
Hyvä to frontend dla Magento napisany od nowa, na dzisiejszych narzędziach. Korzysta z niego ponad 7 000 sklepów, a my mamy status Hyvä Silver Partner. Różnicę najlepiej widać na jednej małej funkcji: pasku „ile brakuje do darmowej dostawy” w koszyku. W Lumie to pięć plików. W Hyvä dwa.
5Luma
plików do utrzymania
Pokaż 5 plików
view/frontend/layout/checkout_cart_index.xml
<referenceContainer name="content">
<block name="sprint.free.shipping"
class="Magento\Framework\View\Element\Template"
template="Sprint_FreeShipping::bar.phtml"/>
</referenceContainer>view/frontend/templates/bar.phtml
<div id="sprint-free-shipping"></div>
<script type="text/x-magento-init">
{"#sprint-free-shipping": {"Magento_Ui/js/core/app": {"components": {
"sprintFreeShipping": {
"component": "Sprint_FreeShipping/js/view/bar",
"template": "Sprint_FreeShipping/bar",
"threshold": <?= (int) $block->getThreshold() ?>
}
}}}}
</script>view/frontend/web/js/view/bar.js
define([
'uiComponent',
'ko',
'mage/translate',
'Magento_Customer/js/customer-data'
], function (Component, ko, $t, customerData) {
'use strict';
return Component.extend({
defaults: { template: 'Sprint_FreeShipping/bar', threshold: 0 },
initialize: function () {
this._super();
var cart = customerData.get('cart');
this.message = ko.computed(function () {
var left = this.threshold - (cart().subtotalAmount || 0);
return left <= 0 ? '' : $t('Brakuje %1 zł do darmowej dostawy')
.replace('%1', left.toFixed(2));
}, this);
}
});
});view/frontend/web/template/bar.html
<!-- ko if: message() -->
<p class="sprint-free-shipping" data-bind="text: message"></p>
<!-- /ko -->view/frontend/web/css/source/_module.less
.sprint-free-shipping {
.lib-css(background, @color-gray95);
border-left: 3px solid @color-orange-red1;
margin: 0 0 @indent__s;
padding: @indent__xs @indent__s;
}2Hyvä
pliki do utrzymania
Pokaż 2 pliki
view/frontend/layout/checkout_cart_index.xml
<referenceContainer name="content">
<block name="sprint.free.shipping"
class="Magento\Framework\View\Element\Template"
template="Sprint_FreeShipping::bar.phtml"/>
</referenceContainer>view/frontend/templates/bar.phtml
<div x-data="{
threshold: <?= (int) $block->getThreshold() ?>,
subtotal: 0,
get left() { return this.threshold - this.subtotal }
}"
@private-content-loaded.window="subtotal = $event.detail.data.cart.subtotalAmount || 0"
x-show="left > 0"
x-cloak
class="mb-3 border-l-4 border-orange-500 bg-gray-100 px-3 py-2">
<span x-text="'<?= $escaper->escapeJs(__('Brakuje %1 zł do darmowej dostawy')) ?>'
.replace('%1', left.toFixed(2))"></span>
</div>Przy dziesięciu takich funkcjach to 50 plików wobec 20. Mniej plików to mniej godzin przy każdej zmianie i mniej miejsc, w których coś może się zepsuć. Dlatego migracja nie zwraca się w dniu wdrożenia, tylko z każdą kolejną zmianą.
Hyvä nie załatwia wszystkiego. Moduły z własnym frontendem trzeba przepisać i to jest największa pozycja w wycenie. Kiedy przepisanie się opłaca, a kiedy nie, opisaliśmy w artykule Hyvä dla Magento: kiedy przepisanie frontendu się zwraca.
Co zrobiliśmy
Od porządków do aktualizacji
01 Porządek w modułach i motywach
Kod od 18 różnych firm uporządkowaliśmy: 76 starych modułów usunęliśmy albo zastąpiliśmy, 35 napisaliśmy od nowa. Z sześciu motywów zostały dwa, po jednym na sklep, oba na Hyvä.
02 Nowy frontend na Hyvä
Przepisaliśmy całą warstwę, którą widzi klient: stronę główną, listy produktów, kartę produktu, koszyk i konto.
03 Hyvä Checkout
Proces zakupowy przeszedł na Hyvä Checkout razem z frontendem: z dwóch kroków do jednej strony.
04 Aktualizacja Magento do 2.4.8
Sklep działał na Magento Open Source 2.4.4, którego wsparcie, a z nim poprawki bezpieczeństwa, skończyło się w kwietniu 2025 roku. Następnym krokiem po wdrożeniu nowego frontendu była aktualizacja Magento do wersji 2.4.8 oraz modułów zewnętrznych.
Frontend
Nowy frontend na Hyvä
Przepisaliśmy całą warstwę, którą widzi klient. Hyvä nie korzysta z szablonów Lumy, więc nową wersję dostał każdy moduł z własnym wyglądem, m.in. filtry, wyszukiwarka, porównywarka produktów i integracje sprzedażowe.
Motyw roweroza.pl dziedziczy wygląd po sprint-rowery.pl i zmienia tylko to, czym sklepy się różnią: stopkę, dane kontaktowe i kilka układów stron. Drugi sklep nie wymaga więc osobnego utrzymania, bo poprawka w sprint-rowery.pl trafia od razu do obu.
Proces zakupowy
Hyvä Checkout: z dwóch kroków do jednego
Standardowy proces zakupowy w Magento ma dwa kroki: najpierw dostawa, potem płatność z podsumowaniem. W Sprint Rowery to teraz jedna strona. Dane do wysyłki, sposób dostawy i płatność są w jednym formularzu, a obok stale widać podsumowanie zamówienia z kwotą do zapłaty.
Uprościliśmy też zakup na fakturę. Klient wpisuje NIP, a nazwa firmy i adres uzupełniają się same z bazy GUS.
- Zakup bez zakładania konta
- Paczkomaty InPost
- Punkty odbioru DPD
- Płatności Przelewy24
- Zakup na raty
- Faktura z danymi firmy z GUS
Dlaczego jeden krok
Im dłuższy proces zakupowy, tym więcej osób rezygnuje przed zapłatą
70%
koszyków w sklepach internetowych zostaje porzuconych
17%
rezygnuje, bo proces był za długi lub skomplikowany
18%
rezygnuje, bo sklep kazał założyć konto
35%
możliwy wzrost konwersji po poprawie procesu zakupowego
Źródło: Baymard Institute (dane z 2025 roku). Odsetki rezygnacji dotyczą osób, które naprawdę chciały kupić.
>70%więcej zamówień rok do roku
Od marca do sierpnia 2026, czyli przez sześć miesięcy po wdrożeniu, sklep przyjął o ponad 70% więcej zamówień niż w tych samych miesiącach 2025 roku. Porównujemy te same miesiące, bo sprzedaż rowerów jest sezonowa. Wzrost widać w każdym z tych miesięcy, nie tylko tuż po starcie.
Wzrostu nie przypisujemy w całości migracji. Równolegle, razem z zewnętrzną agencją, wprowadzaliśmy w kodzie sklepu zmiany poprawiające widoczność w Google, a na sprzedaż pracowały też asortyment, ceny i marketing klienta.
Rezultaty
Co zostaje po migracji
Szybka strona u prawdziwych klientów
Na telefonie główna treść pojawia się po 1,4 s, a strona reaguje na kliknięcie w 179 ms. To pomiar od prawdziwych użytkowników (Chrome UX Report, 29 sierpnia 2026), nie jednorazowy test. Google ocenia szybkość sklepu jako dobrą na telefonach i na komputerach.
Jedna poprawka dla dwóch sklepów
Z sześciu motywów zostały dwa, oba na Hyvä. Poprawka w sprint-rowery.pl trafia od razu do roweroza.pl.
Mniej plików przy każdej zmianie
Przy dziesięciu funkcjach takich jak pasek darmowej dostawy to 50 plików w Lumie wobec 20 w Hyvä.
