To tutaj dodasz własne reguły CSS i szybko dopasujesz wygląd sklepu - kolory, odstępy, czcionki i drobne detale interfejsu - bez ingerencji w treści. Sekcja ta jest przeznaczona dla najbardziej zaawansowanych użytkowników.

Zespół Selesto

26.02.2026

Wstęp

Sekcja Style CSS jest przeznaczona dla najbardziej zaawansowanych użytkowników, ponieważ pozwala bezpośrednio nadpisywać wygląd elementów sklepu. Jedna nieprawidłowa reguła może zmienić układ, czytelność lub responsywność strony, dlatego wprowadzaj zmiany etapami i testuj je na różnych urządzeniach.

Selesto daje Ci pełną kontrolę nad warstwą wizualną sklepu. Możesz całkowicie dopasować styl sklepu do swojej marki, aby wyróżnić się na tle konkurencji. Od kolorów i typografii, przez odstępy i siatkę, aż po mikrodetale interfejsu, takie jak przyciski, listy, kafelki produktów, nagłówki czy elementy nawigacji.

To rozwiązanie zapewnia bardzo szeroki zakres personalizacji, bo nie ograniczasz się do gotowych opcji w panelu. Jeśli masz konkretną wizję lub potrzebujesz „dopięcia” detali, dopisujesz własne reguły CSS i tworzysz wygląd sklepu dokładnie taki, jak chcesz - spójny, dopracowany i wyróżniający się na tle konkurencji.

Uwaga!
Selesto nie ponosi odpowiedzialności za zmiany wprowadzone w sekcji Style CSS. Korzystasz z tej funkcji na własne ryzyko.

Wygląd Selesto - Style CSS

Ograniczenia

CSS zmienia wygląd, nie logikę
Opcja ta wpływa na warstwę wizualną (kolory, odstępy, fonty, ułożenie), ale nie zmienia działania funkcji sklepu. Nie zrobisz tym nowej funkcjonalności typu: nowe pola w koszyku, nowe kroki checkoutu, automatyczne reguły, walidacje, integracje.

Zależność od struktury i klas w szablonie
Style działają na istniejących elementach i mają konkretne klasy/strukturę HTML. Jeśli w przyszłości zmieni się szablon lub HTML w aktualizacji, Twoje selektory mogą przestać działać lub zacząć wpływać na inne elementy.

Responsywność i dostępność
CSS łatwo “psuje” wersję mobilną: ukryte elementy, wyjeżdżające przyciski, złe odstępy. Zmiany mogą pogorszyć czytelność (kontrast, rozmiar fontu, focus dla klawiatury). Warto zaznaczyć, że użytkownik odpowiada za zgodność wizualną.

Wydajność
Nadmiar CSS i ciężkie efekty (filtry, cienie, animacje) mogą spowolnić renderowanie na słabszych urządzeniach, co może mieć wpływ na SEO i pozycjonowanie Twojego sklepu. Im bardziej skomplikowane reguły, tym większe ryzyko spadku płynności.

Debugowanie i utrzymanie po stronie użytkownika
Selesto nie weryfikuje poprawności ani sensu wklejanego CSS. Jeśli kod powoduje problemy, użytkownik musi umieć zidentyfikować regułę i ją cofnąć (dlatego warto wprowadzać zmiany procesem ciągłej weryfikacji drobnych zmian - poprzez iterację).

Zakres (scope) wprowadzanych zmian
Edytując style w Wygląd > Style CSS, pracujesz na plikach CSS używanych przez cały sklep. Najpierw wybierz właściwy plik, przeanalizuj jego treść, wybierz namierz odpowiednią klasę, a następnie zmień istniejące w niej reguły nadpisując je w polu Własny kod.

Alternatywnie, zmiany możesz wprowadzać z poziomu Wygląd > CMS, bezpośrednio w pełnych ustawieniach konkretnej sekcji. W tym wariancie zakres stylów jest ograniczony tylko do sekcji, w której je dodajesz, bo przypisujesz jej nadrzędną klasę CSS. Taka klasa działa jak "wrapper" - Twoje selektory zaczynają się od tej klasy, więc nie wychodzą poza dany fragment strony i minimalizują ryzyko konfliktów w innych częściach sklepu.

Dobre praktyki

Pracuj iteracyjnie i rób kopie
Zapisz kopię CSS (np. w notatniku) przed każdą większą zmianą. Wprowadzaj małe poprawki i testuj je od razu, zamiast wklejać duże bloki naraz. Jeśli coś się posypie, wróć do ostatniej działającej wersji. Alternatywnie, zawsze możesz w całości usunąć treść znajdującą się w sekcji Własny kod co przywróci w pełni działającą wersję Selesto.

Dobieraj selektory świadomie
Styluj możliwie konkretny element, a nie "wszystko naraz". Ogranicz nadpisywanie do minimum i unikaj przypadkowego wpływu na inne komponenty.

Testuj kluczowe widoki i urządzenia
Sprawdź desktop i mobile na różnych szerokościach oraz przeglądarkach. Przejrzyj newralgiczne miejsca, takie jak strona główna, lista produktów, karta produktu, koszyk i proces zamówienia. Zwróć uwagę na stany elementów, takie jak hover, active i focus.

Dbaj o czytelność i dostępność
Pilnuj kontrastu tekstu do tła oraz rozsądnych rozmiarów fontów. Nie usuwaj widocznego focusu bez zapewnienia zamiennika, bo pogarsza to obsługę klawiaturą i czytelność interfejsu.

Nie przeciążaj sklepu efektami
Ogranicz ciężkie animacje, filtry i rozbudowane cienie, bo mogą spowolnić renderowanie na słabszych urządzeniach. Utrzymuj CSS możliwie krótki, uporządkowany i nastawiony na konkretny efekt.

Edycja styli CSS z poziomu CMS

Warto też wspomnieć o możliwości dopracowania wyglądu sekcji za pomocą kodu CSS. Aby dodać własne style, przejdź do ustawień sekcji, ustaw Rodzaj edycji na Pełna, a następnie uzupełnij pole Nadrzędna klasa pomocnicza (do stylowania) i wklej reguły w obszarze Dodatkowy kod CSS.

Uwaga!
Nazwa klasy powinna być unikalna, aby uniknąć konfliktów z klasami używanymi w systemie. Na przykładzie poniżej, wykorzystując klasę ._twoja-klasa-css, delikatnie zmieniliśmy wygląd przycisku (m.in. wysokość, padding i rozmiar fontu).

Selesto - Edycja CSS z poziomu CMS

O AI słów kilka...

O ile bardzo doceniamy kreatywność i samodzielność naszych użytkowników, musimy zwrócić uwagę na kilka ważnych kwestii związanych z korzystaniem z modeli językowych w sekcji Style CSS. To narzędzie potrafi przyspieszyć pracę, ale nie zastąpi świadomości tego, co faktycznie edytujesz i jaki będzie efekt w sklepie. Podstawowa znajomość CSS jest naszym zdaniem niezbędna, aby korzystać z tej sekcji bezpiecznie. Warto też rozumieć sam proces debugowania, czyli jak krok po kroku zidentyfikować regułę, która powoduje problem, i jak cofnąć zmianę bez psucia innych elementów.

Pamiętaj, że modele językowe (np. ChatGPT, Claude Sonnet, Gemini, DeepSeek R1, LLaMA, Perplexity) generują tekst na podstawie wzorców, a nie na podstawie "zrozumienia" Twojego szablonu. W praktyce oznacza to, że potrafią halucynować, mieszać selektory, powielać istniejące reguły albo tworzyć kod, który brzmi poprawnie, ale nie pasuje do struktury Twojej strony.

Szczególnie odradzamy wklejanie do AI całych plików CSS i proszenie wprowadzenie zmian. Bardzo często odpowiedzią jest bardzo długi kod, pełen powtórzeń albo kosmetycznych zmian bez realnego efektu. Taki CSS bywa następnie niepotrzebnie przetwarzany przez przeglądarkę, co może zauważalnie spowolnić stronę, pogorszyć płynność działania i wpłynąć negatywnie na wyniki wydajności, a w konsekwencji również na SEO. Nie wspominając o problemach związanych z debugowaniem i naprawami. Z naszego doświadczenia kod dodawany przez użytkownika powinien zwykle mieścić się w kilkudziesięciu liniach. Zdarzały się przypadki wklejania tysięcy linii, co kończyło się utratą spójności wizualnej lub psuciem wielu elementów interfejsu.

Selesto nie ponosi odpowiedzialności za kod dodany przez użytkownika i nie będzie go modyfikować, debugować ani analizować.

Odpowiedzialność za wprowadzane zmiany leży po stronie użytkownika, dlatego wprowadzaj je ostrożnie i świadomie. Jeśli zależy Ci na szybkimi pewnym efekcie , utwórz zgłoszenie w panelu administracyjnym i opisz konkretną potrzebę. W wielu sytuacjach to, co można "promptować" godzinami, da się ustalić i wykonać w kilka minut po konsultacji ze specjalistą - warto rozważyć, czy taki model pracy nie będzie po prostu bardziej efektywny.