Projekt strony produktu w PrestaShop: dobre praktyki konwersji

Ostatnio sprawdzono: czerwiec 2026 — weryfikacja pod kątem PrestaShop 1.7, 8 i 9. Poniższe ścieżki szablonów, hooki i lokalizacje w panelu administracyjnym są aktualne; w PrestaShop 9 adresy URL produktów domyślnie nie zawierają już ścieżki kategorii, co ma znaczenie przy zmianie nazw produktów (omówione w sekcjach o widoku mobilnym i strukturze dolnej części strony).

Strona główna najczęściej przyciąga uwagę projektantów, ale to strona produktu najbardziej interesuje kupujących. To ostatni ekran, jaki odwiedzający widzi, zanim kliknie „Dodaj do koszyka” albo cofnie się do poprzedniej strony. W większości sklepów PrestaShop jest to zarazem jedna z najbardziej zaniedbanych części sklepu — skonfigurowana raz przy instalacji motywu i później już nietykana. Ten poradnik dotyczy jednej konkretnej rzeczy: projektu tej strony. Nie fotografii, nie copywritingu, nie wyboru widżetu zaufania — każdy z tych tematów omawiamy niżej osobno — lecz decyzji układowych, które przesądzają o tym, czy klient już zainteresowany produktem może bez tarcia dotrzeć do przycisku zakupu.

„Projekt” nie oznacza tutaj upiększania strony. Chodzi o kolejność elementów, o to, co widać nad linią przewijania, jak wzrok przechodzi od ceny do przycisku oraz których plików szablonów i ustawień motywu PrestaShop trzeba dotknąć, aby cokolwiek zmienić. Jeśli układ jest zły, nawet strona pełna świetnych zdjęć i dobrze napisanego tekstu będzie słabo konwertować, bo klient nigdy nie dotrze do miejsca, które naprawdę decyduje.

Co dokładnie oznacza „projekt strony produktu” w PrestaShop

W sklepie PrestaShop 1.7, 8 lub 9 stronę produktu renderuje kontroler product, a całość składana jest z kilku szablonów Smarty znajdujących się w themes/your-theme/templates/catalog/ — przede wszystkim z product.tpl, przy czym prawy obszar zakupowy budują fragmenty szablonów z katalogu catalog/_partials/ (rozpoznasz tam product-add-to-cart.tpl, product-prices.tpl, product-variants.tpl, product-flags.tpl). Układ dwóch kolumn — „zdjęcia po lewej, boks zakupowy po prawej” — używany w większości sklepów to domyślny układ motywu Classic. Warto to wiedzieć, bo niemal każda zmiana projektowa, którą zechcesz wprowadzić, sprowadza się do edycji szablonu w tym katalogu, zmiany pozycji hooka albo ustawienia w panelu administracyjnym — a nie do tajemniczego problemu wymagającego pełnego redesignu.

Hooki, które kontrolują elementy wyświetlane wokół głównego boksu zakupowego, będą używane najczęściej: displayProductActions i displayProductPriceBlock znajdują się wewnątrz obszaru zakupowego, displayProductAdditionalInfo jest tuż pod nim, displayProductExtraContent zasila dolne zakładki produktu, a displayFooterProduct odpowiada za bloki pod produktem. Co to oznacza w praktyce? Gdy chcesz umieścić odznakę, szacowany czas dostawy albo komunikat uspokajający klienta w konkretnym miejscu, wybierasz hook — zamiast edytować pliki motywu i liczyć, że następna aktualizacja ich nie nadpisze. Dobrze zbudowany moduł podpina się pod te hooki zamiast rozgałęziać Twój product.tpl, i właśnie dlatego zmiany projektu przetrwają aktualizacje.

Jeśli chcesz zmienić kolejność modułów trafiających do obszaru zakupowego, zamiast przepisywać szablon, najszybsza ścieżka prowadzi przez panel administracyjny: Wygląd → Pozycje pokazuje każdy moduł przypięty do danego hooka i pozwala przeciągać go wyżej lub niżej. To tam naprawiasz problem typu „moduł spycha mój przycisk poniżej pierwszego ekranu” bez dotykania choćby jednego pliku .tpl.

Boks zakupowy nad linią przewijania to jedyna decyzja projektowa, która zawsze ma znaczenie

Wszystko, czego kupujący potrzebuje do podjęcia decyzji, powinno być widoczne bez przewijania: nazwa produktu, cena, główne zdjęcie, wybór wariantu, informacja o stanie magazynowym/dostępności i przycisk Dodaj do koszyka. To jedna zasada projektowa, która przetrwała każdą modę na redesign. Jeśli odwiedzający musi przewinąć opis na 500 słów, żeby znaleźć cenę, istotna część osób po prostu wyjdzie — odczytają komunikat „ten sklep każe mi się męczyć”, zanim przeczytają choćby jedno zdanie Twojego tekstu.

W motywie Classic PrestaShop boks zakupowy jest już umieszczony wysoko, ale trzy rzeczy najczęściej spychają go w dół albo psują układ:

• Zbyt duża kolumna zdjęć. Jeśli zdjęcia produktów są przesyłane w niespójnych proporcjach, kolumna galerii robi się wysoka i wypycha boks zakupowy poza ekran na mniejszych laptopach. Popraw wymiary zdjęć u źródła — omawiamy to w artykule o fotografii produktowej w e-commerce — zamiast maskować problem doraźnymi poprawkami CSS.
• Ściana tekstu w krótkim opisie. PrestaShop wyświetla krótki opis (pole Podsumowanie, description_short) bezpośrednio w kolumnie zakupowej. Ogranicz go do dwóch lub trzech linijek korzyści; długi opis powinien znaleźć się niżej. Dobre napisanie tego krótkiego pola to osobna umiejętność — zobacz jak pisać opisy produktów, które rankują i konwertują.
• Moduły ustawione nad przyciskiem. Każdy moduł podpięty pod displayProductActions albo blok ceny spycha przycisk w dół. Sprawdź, co faktycznie uruchamia się w tym miejscu.

Hierarchia wizualna: gdzie wzrok powinien trafić, krok po kroku

Skuteczna strona produktu prowadzi wzrok po zamierzonej ścieżce: najpierw zdjęcie (potwierdza „tak, to jest rzecz, której szukam”), potem nazwa i cena (dwa fakty decydujące o dalszym zainteresowaniu), następnie wariant i stan magazynowy (czy mogę kupić dokładnie tę wersję?), a na końcu przycisk. Opinie, dostawa i komunikaty budujące zaufanie działają jako sygnały wspierające wokół tego kręgosłupa — nigdy nie powinny rywalizować z nim o pierwsze spojrzenie.

Najczęstszy błąd projektowy polega na nadaniu elementom drugorzędnym pierwszoplanowej wagi wizualnej. Ogromny baner „DARMOWA DOSTAWA” nad nazwą produktu, krzykliwa karuzela cross-sellingowa zanim klient w ogóle zdecyduje się na ten produkt, automatycznie odtwarzany film przejmujący uwagę — każdy z tych elementów odciąga wzrok od głównej ścieżki. Test jest brutalnie prosty: otwórz stronę produktu, spójrz na nią przez sekundę i odwróć wzrok. Czy potrafisz powiedzieć, jak nazywa się produkt, ile kosztuje i gdzie jest przycisk? Jeśli nie, Twoja hierarchia walczy sama ze sobą.

Decyzje o rozmieszczeniu, które realnie wpływają na wynik

Większość pracy nad projektem strony produktu polega na ustaleniu, gdzie powinno znaleźć się kilka kluczowych elementów. To decyzje dotyczące szablonu lub hooków, a dla większości sklepów istnieje właściwy układ, który sprawdza się konsekwentnie:

Komunikat zaufania pod przyciskiem zasługuje na osobną uwagę, bo to najskuteczniejsza i najłatwiejsza poprawka projektowa na całej stronie: jeden wiersz z informacją o zasadach zwrotu, akceptowanych metodach płatności i sygnale bezpieczeństwa, umieszczony dokładnie tam, gdzie wzrok klienta jest w momencie wahania. Forma wizualna tych sygnałów — i to, czy naprawdę budują zaufanie, czy tylko dodają bałagan — to osobny temat; zobacz artykuł o odznakach zaufania oraz szersze omówienie tego, czy Twój sklep wygląda wiarygodnie.

Organizacja dolnej części strony: zakładki czy jedna długa strona

Pod boksem zakupowym znajduje się szczegółowa część strony — długi opis, specyfikacje, opinie, informacje o dostawie. Tutaj decyzja projektowa dotyczy struktury: jedna długa strona do przewijania zakopuje wszystko, co znajduje się za pierwszym ekranem, natomiast dobrze zbudowane zakładki pozwalają osobie szukającej szczegółów przejść od razu do specyfikacji albo opinii. Motyw Classic PrestaShop już domyślnie umieszcza opis i kartę danych w zakładkach; pytanie brzmi, czy potrzebujesz więcej sekcji (instrukcja montażu, gwarancja, rozmiarówka) niż dwie natywne zakładki. To osobny temat z własną ścieżką modułową — artykuł zakładki produktu: dodawanie specyfikacji, poradników i treści własnych pokazuje dokładnie, jak dodać własne zakładki bez edycji plików motywu. Jeśli chcesz dodawać te sekcje z panelu administracyjnego zamiast z szablonu, nasz moduł Product Extra Info Tabs podpina się pod displayProductExtraContent i pozwala łączyć zakładki globalne dla całego katalogu (jedna zakładka „Dostawa” wspólna dla wszystkich produktów) z zakładkami przypisanymi do konkretnych produktów, dzięki czemu dolna część strony pozostaje uporządkowana bez utrzymywania osobnej wersji motywu, którą następna aktualizacja mogłaby nadpisać.

Jedna zasada projektowa dla dolnej części strony obowiązuje niezależnie od wybranej struktury: nie pozwól, aby widżet opinii z nieskończonym przewijaniem ciągnął się bez końca, bo spycha stopkę — z polityką zwrotów, danymi kontaktowymi i sygnałami zaufania — trwale poza zasięg. Podziel opinie na strony, aby strona produktu miała koniec.

Widok mobilny to osobny projekt, nie ta sama strona pomniejszona

W typowym sklepie PrestaShop ponad połowa ruchu na stronach produktów pochodzi z urządzeń mobilnych, a układ działający na komputerze nie zacznie automatycznie działać na telefonie. Dwukolumnowy układ z dużego ekranu zwija się do jednej kolumny, a kolejność tej kolumny staje się teraz decyzją projektową, którą trzeba podjąć świadomie. Jeśli zrobisz to dobrze, strona będzie sprawiała wrażenie natywnej; jeśli źle, cena wyląduje pod zdjęciem zajmującym cały ekran, a przycisk gdzieś daleko poza zasięgiem.

• Kolejność stosu: zdjęcie, nazwa, cena, wariant, przycisk — potem opis. Decyzja zakupowa musi być dostępna przy minimalnym przewijaniu.
• Galeria przesuwana gestem: obszar zdjęć powinien przesuwać się poziomo, a nie wymuszać pionowej listy miniatur, która zjada ekran, zanim pojawi się cena.
• Przyklejony przycisk Dodaj do koszyka: stały dolny pasek z ceną i przyciskiem utrzymuje akcję zakupu w zasięgu niezależnie od tego, jak głęboko klient przewinie specyfikacje i opinie. To najważniejszy wzorzec projektowy dla urządzeń mobilnych.
• Sekcje zwijane: opis, specyfikacja i opinie jako akordeony, pokazujące pierwsze linijki z przełącznikiem „czytaj więcej”, dzięki czemu strona ma rozsądną długość na małym ekranie.

Jeśli budujesz przyklejony pasek mobilny samodzielnie, jest to niewielki blok w pliku product.tpl motywu potomnego, który ponownie wykorzystuje te same fragmenty szablonów ceny i dodawania do koszyka, które renderuje główny boks zakupowy, widoczne tylko na małych ekranach. Chodzi o to, aby ponownie wykorzystać istniejące fragmenty szablonów, a nie duplikować kod znaczników, dzięki czemu przyszła zmiana bloku ceny zaktualizuje oba miejsca naraz:

{* themes/your-child-theme/templates/catalog/product.tpl — sticky mobile buy bar *}
<div class="mpr-sticky-buy d-md-none">
  {block name='product_prices'}
    {include file='catalog/_partials/product-prices.tpl' product=$product}
  {/block}
  {block name='product_add_to_cart'}
    {include file='catalog/_partials/product-add-to-cart.tpl' product=$product}
  {/block}
</div>

/* custom.css — pin it to the bottom on phones only */
.mpr-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1030; background: #fff;
  padding: .5rem .75rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

(Klasa narzędziowa Bootstrap d-md-none ukrywa go od szerokości tabletu w górę, więc wersja na komputerze zachowuje normalny przycisk w standardowym przepływie strony.)

Decyzje projektowe, które po cichu kosztują Cię konwersje

Kilka popularnych decyzji „projektowych” aktywnie działa przeciwko stronie. Żadna z nich nie dotyczy gustu — każda usuwa realny powód, dla którego gotowy do zakupu klient opuszcza stronę:

• Automatycznie odtwarzany film produktu. Spowalnia stronę, zużywa dane mobilne i przejmuje główną ścieżkę wizualną. Zamiast tego pokaż przycisk odtwarzania. (Jeśli film naprawdę sprzedaje Twój produkt, właściwy sposób wdrożenia omawiamy w artykule o integracji YouTube dla filmów produktowych.)
• Wyskakujące nakładki „klienci oglądali także”. Przerywają decyzję w najgorszym możliwym momencie. Cross-selling powinien żyć na stronie, poniżej pierwszego ekranu, tam gdzie jego miejsce — strategię opisujemy w artykule o cross-sellingu i upsellingu.
• Ukrywanie ceny za komunikatem „poproś o wycenę”. W sklepie B2C to natychmiast traci większość odwiedzających. Jeśli Twój model naprawdę tego wymaga, pokaż przynajmniej zakres cenowy, aby strona nie była ślepą uliczką.
• Krzykliwe, puste pole kuponu. Zwrócenie uwagi na pole rabatowe, do którego klient nie ma kodu, wysyła go do Google na poszukiwania — a część osób już nie wróci.

Szybkość strony to ograniczenie projektowe, nie dodatek na koniec

Strony produktów należą do najcięższych stron w sklepie PrestaShop — ładują się tu galeria, JavaScript wariantów, opinie i moduły cross-sellingowe. Projekt, który wygląda perfekcyjnie, ale renderuje się na telefonie przez cztery sekundy, już stracił klienta, o którego uwagę walczył cały układ. Traktuj budżet wydajności jako część projektu: celuj w Largest Contentful Paint poniżej 2,5 sekundy na urządzeniach mobilnych i utrzymuj stronę w tym limicie, leniwie ładując zdjęcia cross-sellingu i opinii poniżej pierwszego ekranu, odkładając moduły opinii do momentu, gdy klient przewinie w ich okolice, wstępnie ładując pierwsze zdjęcie produktu i bezlitośnie ograniczając liczbę skryptów firm trzecich (czat, mapy ciepła, analityka), które wpuszczasz na stronę.

Skąd wiedzieć, czy Twój projekt naprawdę konwertuje

Opinie o projekcie są tanie; jedyny uczciwy werdykt daje jedna metryka: współczynnik dodania do koszyka na stronie — odsetek odwiedzających stronę produktu, którzy dodają produkt do koszyka. Panel administracyjny PrestaShop nie poda tej wartości bezpośrednio: Statystyki → Najlepiej sprzedające się produkty pokazują liczbę sprzedanych sztuk i wyświetlenia strony dla produktu (przydatny wskaźnik sprzedanych sztuk na wyświetlenie), a lista Zamówienia → Koszyki pokazuje koszyki w trakcie tworzenia, ale rzeczywisty współczynnik dodania do koszyka pochodzi z analityki. Niezależnie od źródła zasada jest ta sama: zmieniaj jedną rzecz naraz — przenieś komunikat zaufania, skróć krótki opis, popraw kolejność stosu w widoku mobilnym — i obserwuj tę samą metrykę na wystarczającym ruchu, aby widzieć realny trend, a nie tygodniowy szum. Zmiana układu, która „wydaje się lepsza”, ale nie rusza żadnej liczby, jest tylko przestawianiem mebli.

Strona produktu PrestaShop o wysokiej konwersji nie jest po prostu ładniejszą stroną — to strona, na której główna ścieżka (zdjęcie, nazwa, cena, wariant, przycisk) jest dostępna jednym spojrzeniem, sygnały wspierające znajdują się dokładnie tam, gdzie potrzebuje ich wzrok, układ mobilny jest zaprojektowany na własnych zasadach zamiast odziedziczony po układzie na komputerze, a całość renderuje się szybko. Gdy ta architektura jest właściwa, zdjęcia, tekst i widżety zaufania dodane później pracują mocniej, bo klient wreszcie ma szansę je zobaczyć.

Najczęściej zadawane pytania

Czy powinienem edytować product.tpl bezpośrednio, aby zmienić układ strony produktu?

Tylko w motywie potomnym i tylko wtedy, gdy hook albo ustawienie w panelu administracyjnym nie wystarcza. Bezpośrednia edycja product.tpl w motywie nadrzędnym oznacza, że następna aktualizacja motywu nadpisze Twoją pracę. Czystsza kolejność jest taka: najpierw użyj Wygląd → Pozycje, aby zmienić kolejność podpiętych modułów, potem użyj modułu, który podpina się pod właściwy hook, a dopiero na końcu dodaj nadpisanie szablonu w themes/your-child-theme/templates/catalog/, aby przetrwało aktualizacje.

Gdzie krótki opis faktycznie pojawia się na stronie produktu?

Pole Podsumowanie (description_short) renderuje się w kolumnie zakupowej przy cenie, nad linią przewijania — nie w dolnych zakładkach. Właśnie dlatego musi pozostać krótkie: dwie lub trzy linijki korzyści. Pełny Opis renderuje się niżej, zwykle w zakładce. Wklejenie tego samego długiego tekstu w oba miejsca to najczęstszy powód, dla którego boks zakupowy zostaje wypchnięty poza ekran.

Dlaczego moduł wyświetla się nad przyciskiem Dodaj do koszyka i jak go przenieść?

Jest podpięty pod displayProductActions albo displayProductPriceBlock, które renderują się w obszarze zakupowym. Przejdź do Wygląd → Pozycje, znajdź ten hook i przeciągnij moduł poniżej elementów, które muszą być pierwsze — albo odepnij go, jeśli w ogóle nie powinien znajdować się nad przyciskiem. Edycja szablonu nie jest potrzebna.

Czy PrestaShop ma wbudowany przyklejony mobilny pasek Dodaj do koszyka?

Motyw Classic domyślnie go nie zawiera. Dodajesz go albo przez moduł podpinający się do strony produktu, albo przez niewielki blok w motywie potomnym, który ponownie wykorzystuje istniejące fragmenty szablonów ceny i dodawania do koszyka (pokazane wyżej), aby nie duplikować kodu znaczników. To najważniejsza mobilna zmiana na tej stronie, więc warto zrobić ją porządnie, a nie przez skopiowany przycisk.

Czy w PrestaShop 9 adres URL produktu zmienił się w sposób, który wpływa na pracę nad projektem?

Tak — PrestaShop 9 domyślnie usuwa kategorię z adresu URL produktu, więc slug jest generowany wyłącznie z nazwy produktu. Nie zmienia to układu strony, ale oznacza, że zmiana nazwy produktu może wygenerować nowy przyjazny URL i zerwać linki przychodzące, jeśli nie ma przekierowania. Jeśli utrzymujesz strukturę kanoniczną i przekierowania podczas migracji, dedykowane narzędzie takie jak nasz moduł SEO Revolution pomaga kontrolować slug i przekierowania, aby zmiana nazwy po cichu nie kosztowała Cię pozycji w wynikach wyszukiwania.