Adrian Zblewski · Founder GrowCommerce · Platynowy Partner ShoperWygląd sklepu na Shoperze można stosunkowo łatwo poprawić. Możesz skorzystać z gotowych szablonów jak np. nasz Modern 3.0 lub próbować modyfikować domyślną skórkę Shopera krok po kroku.
W pierwszej kolejności musisz zadać sobie pytanie: czy Tworzyłeś już kopię domyślnego szablonu, czy też jest on "fabryczną" wersją?
Przejdź do "Wygląd i treści" -> "Wygląd sklepu" -> "Twoje szablony graficzne".
Szerszy kontekst daje przewodnik „Najlepsze szablony Shoper Storefront 2026 — porównanie cen i modułów”.
W tym miejscu znajdź Twój szablon, czyli ten oznaczony metką "Aktywny".
Jeśli metka "Aktywny" widnieje w sekcji "Style uniwersalne" to taki szablon de facto nie był modyfikowany.
Wynika to z tego, że Shoper zabrania modyfikowania tych szablonów. Żeby zmodyfikować te skórki graficzne konieczne jest wykonanie ich kopii. Wspominamy o tym, żebyś miał/a świadomość, że Twój szablon który jest w tym miejscu raczej nie był uprzednio modyfikowany - czy to przez Ciebie czy zatrudnioną agencję.
Ten wątek rozwijamy w artykule „Nowe ciasteczka na Shoperze”.
Wykonanie kopii szablonu Shoper
Po odnalezieniu aktywnego szablonu najedź na kafelek przedstawiający szablon i znajdź ikonę dwóch kwadratów. Po najechaniu są podpisane jako "Duplikuj".
Edycja kodu CSS w Shoperze
Po włączeniu w wersji live (na żywo) swojej kopii zapasowej wybierz w prawym górnym rogu "Więcej" -> "Edytor HTML / CSS".
W nowo otwartym widoku edytora znajdź po lewej Styles -> i na samym dole User.css Pomocny będzie też tekst „Edycja szablonu w dużym edytorze”.
Zjedź na sam dół kodu (jeśli jakikolwiek w środku posiadasz), dodaj na końcu za ostatnim znakiem kilka enterów, żeby zrobić sobie miejsce i wklej nasz kod.
Checklista przed pierwszą zmianą
Modyfikacja szablonu to zmiana w żywym sklepie — klienci widzą efekt od razu po zapisie. Kilka prostych nawyków chroni przed sytuacją, w której sklep przestaje poprawnie wyświetlać się w środku dnia.
Kopia szablonu to Twój punkt powrotu. Jeśli coś pójdzie nie tak, wystarczy aktywować poprzednią wersję. Zmiany wprowadzaj poza godzinami największego ruchu i po każdej sprawdź stronę główną, listę produktów, kartę produktu i koszyk — na telefonie i desktopie. Szczegóły opisujemy w tekście „Shoper i Omnibus”.
Twoje zmiany a aktualizacje Shopera
Shoper regularnie aktualizuje platformę i szablony. Własne reguły CSS, które działały latami, mogą po aktualizacji zacząć kolidować z nowym kodem — tak było z galerią na karcie produktu, którą opisujemy w tekście o naprawie galerii na karcie produktu. Dlatego komentarze przy każdej zmianie (data, cel) są tak ważne: po aktualizacji szybko ustalisz, która reguła sprawia problem.
Co zrobić samodzielnie, a co zlecić
Zmiany kolorów, odstępów i czcionek spokojnie zrobisz sam w user.css. Ostrożniej podchodź do ukrywania elementów w koszyku i procesie zamówienia, a nowe moduły czy zmiany logiki lepiej zlecić — tam błąd kosztuje utracone zamówienia.
Przeczytaj też
Adrian ZblewskiFounder GrowCommerce — Platynowy Partner ShoperFounder GrowCommerce — Platynowego Partnera Shoper z 8-letnim doświadczeniem i ponad 1020 wdrożeniami. GrowCommerce tworzy szablony rodziny Modern (Modern 3.0 Storefront), aplikacje GrowX i GrowMail — e-mail marketing dla Shopera.Wszystkie wpisy autora
