Pełna personalizacja designu strony i sklepu internetowego: unikalny design własnymi rękami

Struktura strony: wrapper, siatka i bloki

Główna idea BooStore — strona to gotowa struktura, a nie sztywny szablon. Struktura składa się z kilku głównych bloków-wrapperów, a do środka wstawia się już wszystkie pozostałe bloki i funkcje. Zrozumienie tego schematu to pierwszy krok do pełnej personalizacji.

Kolumny zbudowane są na CSS Grid i sterowane atrybutem data-hasside. Żadnych tabel — tylko układ blokowy:

Wewnątrz #hotengine-content treść wyświetla się w bloku zależnym od typu strony. Każdy typ ma własny ID, na który wygodnie nakładać osobne style:

• Strony — #hotengine-content-page
• Katalog artykułów — #hotengine-content-blog
• Katalog produktów — #hotengine-content-shop
• Katalog producentów/kolekcji — #hotengine-content-shop

Na stronach kategorii z listą podrzędną dodawana jest klasa: .hotengine-content-shop-category, .hotengine-content-shop-collection, .hotengine-content-shop-producer, .hotengine-content-blog-category. To właśnie ten wrapper funkcyjny, który pozwala stylizować osobny dział, kategorię lub typ strony niezależnie od pozostałych.

🧱 Nagłówek strony: blok/menu z kodem HTML

Najbardziej obrazowy przykład tego, jak wszystko działa — nagłówek strony. Technicznie to zwykły Blok/Menu z pozycją Header (w nagłówku), w którym znajduje się kod HTML. Żadnej magii: otwierasz blok, widzisz kod nagłówka, edytujesz go jak zwykły HTML, a wygląd ustawiasz przez CSS.

Nagłówek szablonu Universal MobiFive Flex podzielony jest na trzy sekcje (header_section1, header_section2, header_section3), a wewnątrz każdej — własny układ. Oto kod nagłówka (przykład z szablonu demo):

Co jest co

Omówimy po sekcjach. Każda sekcja to wiersz nagłówka, a wewnątrz niej blok h_inside dzieli się na trzy części: h_inside_l (lewo), h_inside_c (centrum), h_inside_r (prawo). To właśnie ten podział daje responsywność.

Zwróć uwagę: koszyk, porównanie, ulubione, język i menu główne to nie „narysowane” przyciski, a shortcody ({HOTENGINE-SC:...}). System sam podstawia w nie gotową funkcjonalność. Dlatego nie musisz programować koszyka — wystarczy umieścić shortcode w odpowiednim miejscu układu.

Nagłówek: 3 rzędy po 3 responsywne bloki

Schematycznie nagłówek wygląda tak. Każdy rząd to sekcja, każdy prostokąt to blok h_inside_l/c/r. Na wąskich ekranach bloki w rzędzie zawijają się jeden pod drugim (flex-wrap), dlatego nagłówek pozostaje wygodny na mobile:

Jak zmienić design nagłówka

Są dwie drogi — obie bez edycji jądra platformy:

1. Przez CSS (szybko). Otwórz stronę, naciśnij F12 i inspektorem znajdź potrzebny element — na przykład .header_section2 lub .h_inside_r. Skopiuj klasę do Edytora designu → zakładki „CSS style” i ustaw własne właściwości: tło, odstępy, rozmiary, kolejność bloków.
2. Przez edycję HTML (elastycznie). Otwórz Blok/Menu nagłówka i zmień sam kod: zamień miejscami h_inside_l i h_inside_r, usuń zbędną sekcję, dodaj własny układ lub ikonę. Wszystkie klasy są zachowane — układ się nie zepsuje.

📦 Szablon jako podstawa i jego demo

Najszybsza droga do unikalnego designu — zacząć od gotowego szablonu i go dopracować. Weźmiemy na przykład uniwersalny szablon Universal MobiFive Flex (templates_universal_mobifive_flex). Jest zalecany jako podstawa właśnie dlatego, że pokazuje wszystkie główne typy budowy nagłówka i łatwo adaptuje się do każdego stylu.

Podczas instalacji szablon automatycznie:

1. Tworzy styl CSS, który podłącza plik wyglądu przez @import:

2. Tworzy bloki menu: nagłówek (header), stopkę (footer), slider strony głównej, sortowanie produktów.
3. Włącza potrzebne funkcje: ulubione, porównanie, wyszukiwarkę z autouzupełnianiem, koszyk w nagłówku.

🎨 Edytor designu i style bazowe

Cała wizualna konfiguracja zebrana jest w Edytorze designu. Składa się z zakładek — od kolorów i nagłówka do czystego CSS:

Jakie style bazowe się ładują i jak je zastąpić

Platforma najpierw podłącza style bazowe (systemowe), a już na nich nakłada się styl szablonu. Kolejność jest taka:

1. css_hotengine_require_system.css — główny styl bazowy platformy: strony, produkty, bloki i menu. To na niego „nakładają się” wszystkie Twoje style i styl szablonu.
2. css_hotengine_require_language_XX.css — style wartości tekstowych dla każdego języka (ru, ua, en, pl itd.).
3. css_hotengine_cart_table_mobile.css — tabela koszyka dla mobile.
4. templates/styles/css_hotengine_reset_base_style.css — reset głównego wyglądu okien i bloków menu (włącza się w zakładce „Treść”).
5. Style kart produktów — templates_base_styles/products/products_list1…4.css. Inny gotowy styl kart produktów dla listy wybiera się w „Katalogu stylów”, a kartę można też stylizować całkowicie po swojemu (o tym niżej).
6. Style formularzy — templates_base_styles/forms/form1…25.css (25 wariantów).
7. Styl szablonu — to, co dodaje się przy instalacji szablonu (przez @import pliku style.css).

Wszystko to zbiera się w jeden buforowany plik CSS. Każdy z tych stylów możesz zmienić na dwa sposoby:

Ustawienia karty produktu i listy

Oprócz wyboru gotowego stylu, kartę produktu można skonfigurować przez Ustawienia sklepu (Panel administracyjny → Ustawienia → Sklep, strona set_p_store). Tam ustawia się pozycję głównych bloków i zachowanie karty — to już pełna unikalna personalizacja bez kodu:

📁 Moje pliki: własne logo, tło i dowolne elementy stylu

Pełna personalizacja to nie tylko kod, ale i własne pliki. Służy do tego sekcja „Moje pliki” (Panel administracyjny → Moje pliki): można tu dodawać, przeglądać i usuwać pliki oraz tworzyć foldery. Wgrywaj własne obrazy (logo, tło, ikony, grafiki bloków) i podłączaj je w CSS lub HTML. Otwiera się tutaj: Moje pliki.

Co można wgrać i podstawić

• Własne logo i ikonę strony (favicon) — zamiast standardowych.
• Własne tło nagłówka, stopki lub całej strony.
• Obrazy dla bloków, bannerów i slidera.
• Własne ikony (w tym SVG) dla menu i przycisków.
• Własne pliki CSS i JS (podłączane przez „Bloki/Menu”).

Obróbka obrazów podczas wgrywania

Pliki przechowywane są w upload/catalog/{ID_strony}/files/. Po wgraniu skopiuj ścieżkę (kliknięcie pliku) i użyj jej w CSS lub w atrybucie src:

🗂️ Bloki/Menu: pozycje, menu, własne skrypty

„Bloki/Menu” — główne narzędzie personalizacji (nagłówek i stopka to też takie bloki). Tworzy się tu dowolne obszary treści i nawigacji. Dla każdego bloku dostępne są:

Menu główne

Menu główne można zbudować na dwa sposoby:

• Przez widget menu głównego — najszybszy sposób. Dodajesz punkty, podpunkty, punkty-kategorie katalogu i punkty-producentów, ustawiasz ikony (PNG, JPG, WEBP, SVG), kolejność (drag&drop), przypisanie do języka. Menu eksportuje i importuje się w JSON.
• Własne menu ręcznie — jeśli potrzebna szczególna logika lub układ, blok buduje się jak zwykły blok HTML.

Przez widget od razu powstaje rozwijane menu z kategoriami — to najwygodniejsze dla katalogu. W edytorze designu wybiera się wygląd listy kategorii: standardowy, okno wyskakujące, lista z kolumnami lub całkowite wyłączenie skryptu.

Własne skrypty z optymalizowanym ładowaniem

Jeśli włączysz w bloku tryb „JavaScript / CSS style”, silnik zapisze Twój kod w osobnym pliku i podłączy go z właściwym trybem ładowania:

Tak dodajesz dowolne własne skrypty, nie spowalniając ładowania. Dla stylu CSS blok zapisuje się w plik .css i podłącza jako styl. To właśnie „własne bloki menu ze skryptami” — pełna kontrola bez edycji jądra platformy.

🖼️ Stylizacja stron i siatka produktów po ID

Bloki/Menu dają ogólny szkielet, ale BooStore pozwala pójść dalej i stylizować każdą stronę osobno. Sekret w tym, że główny blok #hotengine-wrapper otrzymuje dynamiczne klasy z ID bieżącej strony lub kategorii. Oznacza to, że możesz napisać CSS, który zadziała tylko na jednej stronie, tylko w jednej kategorii lub od razu na wszystkich stronach danego typu.

Przykłady: wystylizować jedną konkretną stronę po jej ID, ustawić własne tło konkretnej kategorii sklepu lub zmienić wygląd od razu u wszystkich produktów.

Siatka produktów: jak renderuje się lista

Lista produktów ma własną zagnieżdżoną strukturę. Rozumiejąc ją, łatwo zmieniać liczbę kart w rzędzie, odstępy i wygląd kafelków. W uproszczeniu wygląda to tak:

Karty to bloki .hotengine-shop-product-list-block (domyślnie inline-block), a kontener .hotengine-shop-products-list-content ustawia je w rzędzie. Zmieniając szerokość karty i zawijanie, ustawiasz siatkę pod swój design:

Tak samo konfiguruje się kartę produktu, jej cenę, przycisk „Kup” i ikony — wszystkie mają stałe klasy, które nie zmieniają się przy aktualizacjach platformy.

🧰 Widgety i shortcody

Oprócz bloków w BooStore są widgety — gotowe elementy funkcyjne, które wygodniej trzymać w jednym miejscu i edytować przez ich edytor. Są to m.in.: okna wyskakujące, menu mobilne, slidery, stopka, widget kontaktów, Slide Menu, generatory menu kategorii/produktów/producentów/artykułów.

Shortcody — autozamiana danych

Shortcode to krótki kod, który system zamienia na rzeczywiste dane strony. Można je wstawiać w dowolny blok HTML (jak w nagłówku), na stronę, do e-maila. Główne:

Poza tym działają bbcode: [FORM:12] wstawia formularz po ID, a [MENU:...] — wygenerowane menu lub zestaw.

Widget z produktami: dowolny zestaw w dowolnym miejscu

Osobno warto wspomnieć widget produktów. Generator zbiera kod typu [MENU:shop_products_slider:...], który wyświetla zestaw produktów: slider, siatkę, mozaikę, przewijanie z autodoładowaniem. Dostępne są dziesiątki parametrów:

• Co pokazać: kategoria i podkategorie, producent, kolekcja, typ produktu, dostępność, bestsellery, rabaty, promocje, nowości, „cena obniżona”, ostatnio oglądane, ulubione, wyszukiwanie, konkretne ID, zakres ceny, język wyświetlania.
• Sortowanie: po ID, dacie, cenie, nazwie, priorytecie; rosnąco/malejąco; losowo.
• Wyświetlanie: przycisk „do koszyka”, porównanie, opis, ocena gwiazdkami, ikona ulubionych, warianty (rozmiar/kolor), lazy-loading.
• Tryby przewijania: :scroll (autodoładowanie), :carousel (karuzela), :swipe (przesuwanie), :append („Pokaż więcej”), :mosaic-sides (mozaika), :auto_width.

Przykłady wszystkich wariantów z żywym demo — na stronie „Widget z produktami”.

Widgety HTML: gotowe bloki interaktywne

W sekcji widgetów HTML są gotowe bloki z kodem, które wystarczy skopiować do bloku lub na stronę:

📱 Menu mobilne „jak aplikacja”

Menu mobilne to osobny widget, który zasługuje na uwagę. Działa jak pełnoprawna aplikacja: wysuwa się na cały ekran, z ikonami, kategoriami i filtrem. Wszystkie parametry ustawia się w jego edytorze, a jest ich bardzo wiele — wygląd można dopasować do dowolnego brandu.

Co można ustawić:

• Aktywacja: próg szerokości ekranu, przy którym menu się włącza; pokazywać zawsze; zastąpić główny przycisk lub wyświetlić osobnym panelem.
• Górny blok ikon: wyszukiwanie, język, ulubione, porównanie, koszyk, telefon, kontakty, e-mail, oddzwonienie, do 5 własnych ikon. Dla każdej — własny formularz i rozmiar okna wyskakującego.
• Kolory: tło menu i aktywnego punktu, kolor linków i ikon, przycisk i jego hover, obramowania, tło filtra, maska przyciemniająca, autoryzacja — dziesiątki parametrów kolorów.
• Punkty menu: własne linki i podpunkty oraz specjalne: close (zamknij), pusta wartość (separator), #filter (okno filtra), #form-XX (formularz po ID), #ajax_page (doładowanie treści HTML).
• Filtr wyszukiwania bezpośrednio w menu: wybierasz blok filtra — i otwiera się po kliknięciu.
• Ukrywanie elementów szablonu: logo, nagłówek, koszyk, porównanie, górny wiersz — aby interfejs był czysty.

🤖 Własny unikalny styl przez AI i inspektor

Nawet jeśli nie piszesz CSS ręcznie, unikalny design można uzyskać dzięki AI. Schemat jest prosty i działa w praktyce:

🧩 Biblioteka gotowych bloków do wstawienia na stronę

Jeśli nie chcesz tworzyć układu od zera, jest biblioteka gotowych bloków — templates_visual_blocks.html. To dziesiątki responsywnych sekcji, które można wstawić bezpośrednio na stronę lub do Bloku/Menu i od razu użyć.

Każdy blok ma przyciski „Pokaż przykład”, „Pokaż kod” i „Otwórz w nowym oknie” — można skopiować cały kod. Bloki są responsywne, a kolor sterowany jest zmiennymi CSS: wystarczy zmienić jedną zmienną, aby przemalować blok pod swój brand. Oto gotowy blok „Zalety” (4 karty z ikonami) w ciemnym motywie — dokładnie tak, jak wstawiasz go na stronę:

A tak ten sam blok wygląda na stronie — to rzeczywisty HTML wstawiony bezpośrednio do artykułu:

Szybka dostawa Dostarczamy w całym kraju w 1-3 dni kurierem

Oficjalna gwarancja Wszystkie produkty są certyfikowane i mają oficjalną gwarancję

Rabaty i promocje Stałe promocje, sezonowe wyprzedaże i osobiste kody rabatowe

Łatwy zwrot Zwrot produktu w ciągu 30 dni bez zbędnych pytań

Ten kod wstawia się bezpośrednio na stronę (w edytorze HTML) lub do Bloku/Menu. Wygląd zadaje podłączony przez @import plik style.css, a kolory — zmienne --ve-8-accent i --ve-8-accent-soft: zmieniłeś wartości — blok przemalował się pod Twój brand. Klasa hotengine-ve-darkmode przełącza blok w ciemny motyw. Ikony to zwykłe SVG z zestawu platformy, można je zastąpić własnymi.

Kolejność pracy: wybrałeś blok → „Pokaż kod” → skopiowałeś → wstawiłeś na potrzebną stronę lub do Bloku/Menu → zmieniłeś kolory, tekst i ikony. Gotowe bloki + ikony to najszybszy sposób na zbudowanie pięknego unikalnego designu, nawet bez bycia designerem.

🧰 Bloki funkcyjne menu: filtr, produkty, formularze

Oprócz bloków, które tworzysz sam, na platformie są bloki funkcyjne — gotowe moduły, które też wstawia się jako Blok/Menu lub shortcodem i które w pełni poddają się stylizacji. Oto główne:

Przykład: filtr wyszukiwania + produkty

Klasyczne połączenie dla kategorii — po lewej filtr wyszukiwania, w centrum lista produktów. Oba elementy to bloki funkcyjne i oba stylizuje się przez CSS. Najlepiej tworzyć filtr przez funkcyjne bloki menu (Bloki/Menu → Menu funkcyjne → Filtr wyszukiwania): wtedy automatycznie przypisuje się do właściwej kategorii i typu produktu, a wyświetlanie ustawia się według stron. W razie potrzeby filtr można jednak wstawić i na dowolną stronę — shortcodem lub osobnym blokiem.

A zestaw produktów wyświetla widget (generator listy produktów):

Lista produktów doładowuje się przez AJAX (/ajax_get_list_shop.php), dlatego filtr i zestawy działają szybko i bez przeładowania strony. Wszystko to zwykłe bloki, które można umieścić w dowolnej pozycji i przemalować pod swój styl.

⚡ Szybkość: personalizacja bez utraty PageSpeed

Personalizacja nie może oznaczać wolnej strony. BooStore zaprojektowano tak, aby maksymalnie wycisnąć wskaźniki szybkości nawet przy całkowicie unikalnym designie:

Szczegóły o wersji mobilnej, responsywności i optymalizacji — w artykule „Responsywny układ i menu mobilne dla sklepu internetowego”. Tam też pokazano, jak dynamiczne ładowanie skryptów i właściwa praca z obrazami dają PageSpeed 99–100.

⚠️ Częste błędy przy personalizacji

Przydatne linki

• Katalog szablonów i jak podłączyć szablon
• Biblioteka gotowych bloków i stylów
• Główny bazowy CSS platformy (css_hotengine_require_system.css)
• Baza wiedzy: główne bloki strony i edytor designu
• Dokumentacja ShortCode
• Instrukcja: Bloki/Menu
• Instrukcja: tworzenie menu mobilnego
• Widget z produktami: przykłady i kod

🛠️ Realny przykład: własny stylowy, responsywny nagłówek

Aby pokazać, jakie to proste, zbudujemy realny nagłówek od zera: trzy poziomy (górny wiersz, główny wiersz z wyszukiwarką i ikonami, menu), nowoczesny wygląd i pełna responsywność. Poniżej — on sam na żywo, potem CSS, który to robi, i kod HTML do wstawienia w Blok/Menu. W przykładzie użyto tylko dwóch shortcodów — ulubione i koszyk, aby ikony działały naprawdę.

Jak to wygląda na żywo

CSS, który to robi

Cały styl to czysty CSS. Ustawia kolory, odstępy, zaokrąglenia, wyszukiwarkę i responsywność. Skopiuj go do Edytora designu → CSS style:

HTML nagłówka — kod do wstawienia

Ten kod wstaw w Blok/Menu z pozycją Header. Ikony ulubionych i koszyka będą działać, jak w żywym przykładzie powyżej.