Edycja szablonu w dużym edytorze - JS oraz CSS

Adrian Zblewski · Founder GrowCommerce · Platynowy Partner Shoper

Edycja kodu CSS w Shoperze

Po przejściu do widoku edycji modułów w edytorze tradycyjnym (Czyli "Wygląd i treści" -> "Wygląd sklepu" -> "Obecny" lub "Twoje szablony graficzne") możesz odnaleźć duży edytor HTML / CSS / JS.

Jest to o tyle istotne, że w starym systemie plików (dostępnym jako Własny styl CSS) nie możesz edytować szablonu. Wiąże się to z nowym systemem plików, gdzie nasz główny plik szablonu jest niejako "wypchnięty" ze sprawdzania. Stary edytor nie poradzi sobie z weryfikacją zawartości naszego pliku i przy próbie zapisu zwraca błąd "Błąd skladniowy LESS zaczynający się od linii 1".  Praktyczne wskazówki zebraliśmy w poradniku „Nowe ciasteczka na Shoperze”.

W takiej sytuacji musimy skorzystać z dużego edytora. 

Wybierz w prawym górnym rogu "Więcej" -> "Edytor HTML / CSS".  

W nowo otwartym widoku edytora znajdź po lewej folder "styles" -> i praktycznie na samym dole "user.css" Rozwinięcie tego wątku znajdziesz w artykule „Zanim zaczniesz modyfikować szablon na Shoperze”.

Po kliknięciu znajdziesz całe bogactwo wyciągniętych zmiennych do edycji oraz miejsce na doklejenie własnego kodu CSS.

Gdzie edytować CSS — podsumowanie

W szablonach RWD masz w praktyce dwa miejsca na własne style: stary edytor „Własny styl CSS” oraz duży edytor HTML / CSS z plikiem user.css. Przy szablonach opartych na nowym systemie plików ten pierwszy zgłasza błąd składniowy LESS, więc właściwym miejscem jest user.css. Jeśli chcesz wejść głębiej, przeczytaj „Shoper i Omnibus”.

Jak bezpiecznie dopisać własny kod

Zanim cokolwiek zmienisz, zduplikuj aktywny szablon i pracuj na kopii. Selektor elementu, który chcesz zmienić, znajdziesz w przeglądarce: kliknij element prawym przyciskiem i wybierz „Zbadaj” (lub naciśnij F12). Nową regułę dopisz na końcu pliku user.css — reguły niżej w pliku nadpisują wcześniejsze o tej samej wadze.

/* 2026-10 — większy tekst w opisie produktu */
.selektor-z-narzedzi-przegladarki {
  font-size: 16px;
  line-height: 1.6;
}

Opisuj każdą zmianę komentarzem z datą i celem. Po kilku miesiącach nikt nie pamięta, po co dodano daną regułę, a przy aktualizacji szablonu taki opis oszczędza godziny szukania.

RWD a Storefront

Opisany sposób dotyczy szablonów RWD i edytora tradycyjnego. W szablonach Storefront większość wyglądu ustawiasz w edytorze wizualnym, a zmiany w kodzie warto skonsultować z autorem szablonu, żeby nie stracić ich przy kolejnej aktualizacji. Po każdej zmianie sprawdź sklep na telefonie i desktopie, odświeżając stronę bez pamięci podręcznej (Ctrl+F5). Pełny obraz tematu znajdziesz w przewodniku „Najlepsze szablony Shoper Storefront 2026 — porównanie cen i modułów”.

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