Spis treści
Czym jest Shoper Storefront?
Shoper Storefront to nowa technologia szablonów i mechanizm działania sklepów internetowych na platformie Shoper. W praktyce oznacza to coś więcej niż zwykły wygląd strony – to kompletny ekosystem funkcji, które ułatwiają budowę i prowadzenie e-sklepu. Kluczowym elementem jest Visual Editor z edycją typu drag-and-drop, dzięki któremu sklep można tworzyć jak z klocków: wybierać spośród ponad 70 modułów, dostosowywać układ do różnych urządzeń oraz personalizować kolory i fonty – wszystko bez konieczności kodowania.
Sam mechanizm nie jest rewolucją na rynku – przypomina rozwiązania znane m.in. z Webflow czy innych popularnych kreatorów. Można więc założyć, że 35 000 godzin pracy programistów i specjalistów UX, o których wspomina Shoper, zostało dobrze zainwestowane, ale też mocno inspirowane tym, co już sprawdziło się w branży.
Zalety Shoper Storefront dla sprzedawcy i kupującego
Poniżej wymieniam zmiany, które moim zdaniem są najbardziej istotne – widoczne od razu i trudne do przeoczenia. To właśnie one najlepiej pokazują różnicę między starymi szablonami, a nowym podejściem Storefront. Dzięki nim sklep zyskuje nowoczesny wygląd, lepsze doświadczenie zakupowe, a właściciel większą kontrolę nad jego funkcjami i wyglądem.
Shoper Visual Editor
Nowy Visual Editor to serce Storefrontu i największa zmiana względem starych szablonów. Każdy element sklepu (np. cena produktu, lista kategorii czy zwykły obrazek) działa w nowym Storefront jako osobny moduł. Można je dowolnie układać w elastycznej siatce – złożonej z sekcji, wierszy i kolumn – co daje sprzedawcy nie tylko większą swobodę projektowania, ale też realny wpływ na konwersję. Dzięki temu układy stron powstają w intuicyjny sposób: przeciągasz i upuszczasz elementy dokładnie tam, gdzie chcesz, tworząc strukturę dopasowaną do potrzeb klientów.
Wygląd interfejsu — Shoper Visual Editor
W starych szablonach RWD (Responsive Web Design) układ strony był znacznie bardziej ograniczony – nagłówek, lewa kolumna, centrum, prawa kolumna i stopka. Teraz te granice praktycznie znikają: sekcje mogą się przenikać, a układ można budować od podstaw w zupełnie inny sposób, bez sztywnego trzymania się starych ram.
To rozwiązanie daje ogromną elastyczność: możesz szybko edytować moduły, tworzyć ich różne wersje (np. inne „promocje” na stronie głównej i w karcie produktu), a nawet w prosty sposób dostosować nagłówek i stopkę. Całość została zaprojektowana tak, by oszczędzać czas i uwolnić kreatywność, zamiast ograniczać się do schematycznego szablonu.
Elementy strony jako moduły szablonu
W Storefront każdy element strony jest osobnym modułem – od galerii zdjęć, przez opis produktu, aż po cenę czy nazwę. Dzięki temu możesz swobodnie przestawiać je i układać według własnej wizji, bez konieczności ingerencji w kod.
Chcesz zmienić miejsce miniaturek zdjęć produktu? Wystarczy edycja modułu „Galeria zdjęć”. Potrzebujesz przenieść opis obok fotografii albo wyciągnąć nazwę produktu na całą szerokość strony? To tylko kwestia przeciągnięcia modułu w odpowiednie miejsce. Taka elastyczność pozwala tworzyć unikalne układy kart produktów i całych podstron – dopasowane zarówno do charakteru sklepu, jak i potrzeb klienta.
Duplikowanie elementów szablonu
Funkcja duplikowania pozwala jednym kliknięciem skopiować dowolny moduł, kolumnę, wiersz czy całą sekcję – wraz z ich pełnymi ustawieniami. Dzięki temu nie trzeba odtwarzać konfiguracji od zera, co znacząco przyspiesza pracę i otwiera nowe możliwości w projektowaniu sklepu.
Duplikowanie elementów w Storefront
To rozwiązanie świetnie sprawdza się np. przy tworzeniu sliderów dostosowanych do różnych urządzeń czy przy budowaniu sekcji z kategoriami produktowymi. Zamiast projektować wszystko od nowa, wystarczy skopiować gotowy element i wprowadzić drobne zmiany – podmienić obrazek, tekst albo kolor. Duplikowanie nie tylko oszczędza czas, ale też ułatwia testowanie różnych wariantów wyglądu i układu sklepu.
Mobile first – pełna kontrola nad wersją mobilną sklepu
Dziś ponad 70% użytkowników przegląda sklepy internetowe na smartfonach. To oznacza, że w praktyce najważniejszą wersją Twojego sklepu jest ta mobilna. Storefront od początku został zaprojektowany w podejściu mobile first, dzięki czemu daje pełną kontrolę nad tym, jak sklep wygląda i działa na różnych ekranach.
Każdy element – sekcja, wiersz, kolumna czy moduł – może być osobno skonfigurowany pod kątem urządzeń. Możesz zdecydować, czy dany baner ma być widoczny tylko na desktopie, a na smartfonach zastąpi go inna, pionowa grafika. Możesz zmienić liczbę produktów w wierszu na liście kategorii, ukryć treści mniej istotne w mobilnym widoku albo całkowicie przeorganizować układ, żeby sklep na telefonie był bardziej intuicyjny i szybki w obsłudze.
W efekcie wersja mobilna sklepu nie jest jedynie „pomniejszoną kopią” desktopu, ale pełnoprawnym widokiem, zaprojektowanym specjalnie pod potrzeby klientów. To z kolei zwiększa szansę, że projekt przyciągnie i utrzyma ich zainteresowanie, a konwersję podniesie odpowiednia prezentacja ceny i produktów.
Edycja wersji mobilnej sklepu
Wbudowany edytor grafik
Storefront wprowadza coś, co dla przeciętnego sprzedawcy może okazać się naprawdę wygodne – wbudowany edytor grafik. Nie jest to może rewolucja w skali całego rynku (podobne funkcje ma, chociażby darmowy WordPress), ale w kontekście codziennej pracy nad sklepem to spora oszczędność czasu.
W starej technologii RWD każda zmiana obrazu – wykadrowanie, zmniejszenie rozmiaru czy poprawa kontrastu – wymagała użycia zewnętrznego programu graficznego i ponownego wgrywania pliku na serwer. Teraz wszystko można zrobić bezpośrednio w panelu Shopera.
Edytor pozwala m.in. na skalowanie, obracanie i kadrowanie zdjęć, ale też na bardziej zaawansowaną obróbkę: zmianę ekspozycji, jasności, nasycenia czy nawet dodanie winiety i filtrów podobnych do tych znanych z Instagrama. Dodatkowo można wstawić ramki, dorysować elementy (linie, strzałki, kształty), zamazać fragmenty zdjęcia czy nanieść tekst. W razie pomyłki łatwo cofniesz zmiany albo przywrócisz obraz do pierwotnej wersji.
To rozwiązanie nie zmienia działania sklepu w sposób fundamentalny, ale znacząco upraszcza codzienną obsługę – szczególnie dla osób, które nie chcą korzystać z dodatkowych narzędzi graficznych i wolą szybkie poprawki „na miejscu”.
Wygląd nowego edytora do edycji grafik
Szybkość ładowania
Jedną z kluczowych zalet Storefrontu jest jego wydajność. Nowy silnik i zoptymalizowany kod sprawiają, że strony sklepu ładują się błyskawicznie – co potwierdzają niezależne testy wydajności Core Web Vitals.
Dla klientów oznacza to wygodniejsze i płynniejsze zakupy, a dla sprzedawcy – lepsze pozycje w Google, wyższą konwersję i realne korzyści w postaci większej sprzedaży. To pokazuje, że szybkość działania stron sklepu może realnie wpływać na liczbę zamówień.
Koszyk – lepszy wygląd i większe możliwości
Koszyk to jeden z najważniejszych elementów każdego sklepu internetowego – bo niezależnie od tego, co klient ogląda i dodaje do koszyka, aby cokolwiek kupić, musi przez niego przejść. W Storefront wreszcie doczekał się dużych zmian.
Wygląd koszyka w Shoper Storefront
Od teraz strony koszyka można edytować tak samo, jak inne podstrony – dodawać nowe moduły, usuwać zbędne czy zmieniać ich kolejność. To nie tylko poprawa wyglądu, ale też większa elastyczność w dostosowaniu procesu zakupowego.
Największą nowością jest możliwość przebudowy tradycyjnego, dwuetapowego koszyka na wersję jednoetapową. Kluczowe moduły – jak dane do zamówienia, wybór dostawy i płatności czy zgody i podsumowanie – możesz umieścić już na pierwszej stronie procesu. Dzięki temu zakupy stają się szybsze, wygodniejsze i mniej frustrujące dla klientów, a sam koszyk wreszcie działa tak, jak oczekuje większość marek z branży e-commerce. Dodatkowo możliwość personalizacji wpływa na korzyści – prostszy koszyk to większa sprzedaż.
Dla porównania – w starych szablonach RWD podobny efekt dało się uzyskać jedynie przez dodatkowo płatne modyfikacje albo aplikacje, których działanie często nie było idealne. W Storefront jest to natywna funkcja, stabilna i dostępna od razu.
Dostępność zgodna z WCAG
Storefront został zaprojektowany z myślą o dostępności i spełnia wymagania EAA (Europejskiego Aktu o Dostępności) oraz wytycznych WCAG 2.2 na poziomie AA – czyli wyżej, niż formalnie wymaga tego prawo (WCAG 2.1). Szablon przeszedł zewnętrzny audyt, a nowe moduły są testowane z użyciem czytników ekranu, takich jak VoiceOver.
Co to oznacza w praktyce?
- Zakupy możliwe z klawiatury – klient może wyszukać produkt, wybrać warianty, dodać do koszyka i złożyć zamówienie bez użycia myszki, z pełną widocznością focusa i bez „pułapek” w modalach.
- Lepsza nawigacja – menu, breadcrumbs i kolejność elementów są dostosowane do czytników i klawiatury, co ułatwia poruszanie się osobom z niepełnosprawnościami.
- Czytniki ekranu – poprawna hierarchia nagłówków, alternatywne opisy obrazów, komunikaty kontekstowe („cena 154 zł”), a elementy dekoracyjne są pomijane, by nie wydłużać niepotrzebnie odczytu.
- Kontrast – domyślne kolory w szablonie spełniają wymogi WCAG (min. 4,5:1 dla tekstu, 3:1 dla nagłówków i elementów interfejsu). Dotyczy to także przycisków kluczowych dla konwersji, jak „Dodaj do koszyka” czy „Zamów i zapłać”.
W porównaniu do starych szablonów RWD, które dostosowano tylko do podstawowych wymogów WCAG 2.1, Storefront idzie znacznie dalej – zapewnia pełniejszą obsługę czytników ekranu, bardziej intuicyjną nawigację i zgodność z europejskimi standardami. To nie tylko spełnienie wymogów prawnych, ale też realna szansa na dotarcie do szerszego grona klientów, w tym osób z niepełnosprawnościami.
Więcej o tym, jak przygotować sklep na wymogi dostępności cyfrowej przeczytasz na naszym blogu.
Otwórz się na wszystkich klientów!
Nie ważne, czy Twój sklep działa jeszcze na starych szablonach RWD, czy już na Storefront – popraw jego dostępność i skorzystaj z naszej wtyczki accessMate.
Nie tylko zalety: słabsze strony Storefront
Brak łatwej edycji kodu JS
W starych szablonach RWD można było w prosty sposób wstrzykiwać własny kod JavaScript i manipulować DOM-em. W Storefront ta możliwość została mocno ograniczona – nadal istnieje, ale wyłącznie w sklepach na wersji Premium. To nie tylko zmiana techniczna, ale też biznesowa: Shoper w ten sposób wyraźniej różnicuje licencje, zachęcając do wyboru droższych pakietów.
Widoczny brak niektórych zakładek w interfejsie w przypadku korzystania z Shoper Storefront
Wygląd tego samego elementu interfejsu na starym szablonie RWD
Warto dodać, że pewne modyfikacje wciąż są możliwe, jednak próg wejścia jest tutaj znacznie wyższy – wymaga większych umiejętności technicznych i nie jest już tak szybkie czy intuicyjne, jak w starych RWD.
Brak dostępu do plików .tpl
W starych szablonach RWD kluczowym narzędziem były pliki .tpl. Działały trochę jak „trytytki” – może nie wyglądały najlepiej, ale pozwalały spinać i modyfikować praktycznie wszystko: od kart produktowych, przez listy produktów, aż po wpisy blogowe. Dzięki temu możliwości edycji były niemal nieograniczone.
W Storefront tej opcji już nie ma. Z jednej strony oznacza to koniec pełnej swobody w ręcznym dostosowywaniu wyglądu i działania szablonu. Z drugiej – trzeba pamiętać, że edycje .tpl miały swoją ciemną stronę: jeśli taki plik został nadpisany, wypadał z aktualizacji i trzeba było go pilnować oraz poprawiać ręcznie. W nowym podejściu Shoper eliminuje ten problem, ale kosztem większej zamkniętości i ograniczenia ingerencji w kod.
Nowa technologia = wyższy próg wejścia
Zmiana technologii w Storefront oznacza również konieczność nauki od nowa wielu elementów. Sprzedawcy i developerzy dostali kolejną dokumentację – nie do końca spójną – którą trzeba przejrzeć, żeby sprawnie poruszać się w nowym środowisku.
Dodatkowym wyzwaniem jest zmiana samej technologii szablonów: dotychczasowe pliki .tpl oparte na składni Smarty zostały zastąpione przez pliki oparte na Twig. To oznacza, że wcześniejsze doświadczenia i wypracowane rozwiązania nie zawsze można przenieść 1:1, a wdrażanie nowych funkcjonalności wymaga czasu i dodatkowej pracy.
Struktura plików w Storefront — Twig, tylko do odczytu.
Chaotyczne przejście na nowy Storefront
Koniec szablonów RWD odbył się w dość chaotyczny sposób – bez wcześniejszych informacji i konkretnego planu dla partnerów. Z dnia na dzień stare szablony zostały wyłączone ze sprzedaży, co zaskoczyło klientów oraz uderzyło w partnerów, którzy nie byli przygotowani na taki scenariusz.
Pośpiech we wdrożeniu Storefront skutkował licznymi błędami i bugami, a początkowo brakowało nawet możliwości wykonania kopii zapasowej szablonu. Choć obecnie wiele problemów zostało poprawionych i z miesiąca na miesiąc Storefront działa coraz lepiej, to jednak wśród części partnerów pozostał niesmak i pytanie, czy Shoper zachował się lojalnie wobec swojego ekosystemu.
Dla wielu firm współpracujących z Shoperem była to szczególnie dotkliwa sytuacja – spora część partnerów „żyje” wyłącznie z projektowania sklepów, aplikacji czy szablonów dla tej jednej platformy. Każda większa zmiana technologiczna, wprowadzona bez wcześniejszego przygotowania i jasnej komunikacji, oznacza dla nich nie tylko dodatkową pracę, ale też realne koszty, które trudno odzyskać. Właśnie dlatego uważam, że w biznesie – zwłaszcza w branży e-commerce – dywersyfikacja jest kluczowa. Nie tylko źródeł przychodu, ale i technologii, z których się korzysta. Uzależnienie się od jednego dostawcy zawsze niesie ryzyko, że jedna decyzja „z góry” może zachwiać całym modelem biznesowym.
Podsumowanie
Mimo że Storefront miał swoją premierę już ponad rok temu i powstało na jego temat kilka artykułów, ja celowo wstrzymałem się z publikacją własnego tekstu. Chciałem zobaczyć, w którą stronę pójdzie to rozwiązanie i jaki realny wpływ będzie miało zarówno na samą platformę Shoper, jak i cały ekosystem – sprzedawców, partnerów i klientów.
Pisanie laurki nie jest w moim stylu, dlatego w tej beczce miodu musiała się znaleźć też łyżka dziegciu. Storefront bez wątpienia jest dużym krokiem naprzód: szybszy, elastyczniejszy i bardziej dostępny niż stare szablony. Jednocześnie jego wprowadzenie nie obyło się bez potknięć i kosztów, które odczuli zarówno sprzedawcy, jak i partnerzy.
Dla osób, które dopiero zaczynają przygodę z e-commerce i chcą postawić własny sklep, Storefront może stać się realnym ułatwieniem – prostszym w obsłudze, bardziej intuicyjnym i dającym szybki efekt. Ale w przypadku bardziej zaawansowanych rozwiązań, jak np. konfiguratory produktów czy nietypowe funkcjonalności na karcie produktowej, nowa technologia oznacza większe wymagania techniczne, a co za tym idzie – większe nakłady pracy i wyższe koszty wdrożenia.
Dziś można powiedzieć, że Storefront to mocny fundament pod rozwój Shopera, ale jednocześnie rozwiązanie, które jeszcze dojrzewa. Dla sprzedawcy oznacza prostsze zarządzanie i lepsze doświadczenie klienta. Dla dewelopera – konieczność nauki nowych narzędzi i dostosowania się do innego środowiska. Dla partnerów – początkowy chaos, który wystawił ich lojalność na próbę.
Czy to „hit” czy „kit”? To zależy od perspektywy. Z biznesowego punktu widzenia Storefront był koniecznym krokiem, by Shoper mógł konkurować z globalnymi standardami. Ale dla wielu użytkowników to nadal narzędzie, które wymaga szlifów i dopracowania. Jedno jest pewne: to kierunek, którego Shoper już nie cofnie – więc warto się mu przyglądać i sprawdzać, jak będzie ewoluował w kolejnych miesiącach i latach.
Własny sklep na Shoperze?
Zrobimy to za Ciebie! Nie tylko zbudujemy Twój sklep, ale też zajmiemy się jego promocja w Google, na Facebooku i Instagramie.
