Gdzie znajdują się te ustawienia
Branding jest konfigurowany dla każdego rynku osobno i w obrębie rynku wpływa na wszystkie strony jednocześnie. Otwórz kreator, wybierz rynek za pomocą przycisku rynków (flaga kraju) na górze lewego paska bocznego, a następnie otwórz zakładkę Ustawienia (ikona koła zębatego). Ustawienia mają własne podzakładki w tej kolejności: Branding, Kolory, Czcionki, Układ, Animacje, Automatyzacje, Pola, Ikony, Ograniczenia, Kasa, Formularz kasy, Strona konserwacyjna, Własny CSS oraz Własny Javascript. Zmiany dotyczą wybranego rynku i są widoczne po kliknięciu Opublikuj. Przełączanie rynku ładuje jego własne kolory, czcionki i układ.
Schematy kolorów
Zakładka Kolory pozwala utworzyć do 9 schematów kolorystycznych. Po osiągnięciu limitu, karta dodawania zamienia się w nieaktywną plakietkę z liczbą, np. 9/9. Każda sekcja, blok i komponent odwołuje się do jednego schematu według numeru, więc zmiana kolorów w schemacie natychmiast zmienia wygląd wszystkich sekcji korzystających z niego na wszystkich stronach. Kliknij prawym przyciskiem kartę schematu, aby go zduplikować lub usunąć.
Role kolorów w każdym schemacie
Każdy schemat definiuje następujące role, wszystkie ustawiane jako wartości hex:
- Tło: główne tło sekcji.
- Tło wewnętrzne: przyciemnione tło dla kart i zagnieżdżonych treści w sekcji.
- Nagłówek: kolor tekstu nagłówków.
- Tekst: kolor tekstu akapitów i głównej treści.
- Ważny tekst: wyróżniony tekst, np. ceny i podświetlone wartości.
- Linki i Linki po najechaniu: kolor odnośnika w stanie normalnym i po najechaniu.
- Obramowanie: obramowania elementów i linie podziału.
- Obrys: pierścienie focus i akcenty, które muszą być bardziej widoczne niż obramowania.
- Cień: kolor cienia (zwykle półprzezroczysty).
- Przycisk główny: tło, tekst i obramowanie, każde z osobnym kolorem po najechaniu (łącznie 6 wartości).
- Przycisk dodatkowy: tło, tekst i obramowanie, każde z osobnym kolorem po najechaniu (łącznie 6 wartości).
- Pole formularza tło, tekst, obramowanie i etykieta: stylizacja pól formularzy.
- Tło pola po najechaniu: tło pola, gdy klient na nie najedzie.
Wskazówki do mocnych schematów
- Zachowaj neutralne, jasne Tło w większości sekcji, a wyraziste kolory zarezerwuj dla jednego schematu akcentowego w sekcjach typu hero i call-to-action.
- Ustaw Tło przycisku głównego wyraźnie odróżniające się od Tła sekcji, aby przycisk był widoczny.
- Ustaw Tło wewnętrzne jako delikatny odcień głównego Tła, by karty były czytelne, ale nie raziły.
- Zadbaj o kontrast co najmniej 4,5:1 między tekstem a tłem.
Czcionki
Zakładka Czcionki przypisuje cztery role do wybranej rodziny czcionek:
- Treść: tekst akapitów i opisy.
- Nagłówek: wszystkie nagłówki w sklepie.
- Podtytuł: drugorzędne tytuły i podtytuły sekcji.
- Akcent: stylizowana czcionka do cen, plakietek i dekoracyjnych wyróżnień.
Dostępne czcionki: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface i Acme. Dla sklepów z treściami po arabsku każda czcionka jest automatycznie parowana z odpowiednikiem arabskim, więc nie wybierasz osobno czcionki arabskiej.
Szerokość strony
W zakładce Układ znajduje się suwak Szerokość strony, który ustawia maksymalną szerokość głównej siatki treści od 900 do 1400 px co 100 (czyli 900, 1000, 1100, 1200, 1300 lub 1400; domyślnie 1200). Sekcje ustawione na Szerokość strony są ograniczone do tej wartości, a sekcje ustawione na Pełna szerokość zawsze rozciągają się na całą szerokość okna. Na ekranach węższych niż wybrana szerokość sekcje dopasowują się do 100% szerokości ekranu.
Logo
Logo ustawia się w dwóch miejscach: w bloku Logo w sekcji Nagłówek oraz w bloku O nas w stopce. Kliknij blok, a następnie użyj selektora obrazu Logo, aby wybrać grafikę z biblioteki mediów lub przesłać nową. Po wybraniu ustaw Szerokość i Wysokość wyświetlania (każda od 20 do 300 px); drugi wymiar skaluje się automatycznie, by zachować proporcje. Domyślnie logo w nagłówku ma 120 px szerokości i 50 px wysokości, a także możesz ustawić jego położenie poziome (lewo, środek lub prawo) i marginesy. Domyślnie logo w nagłówku prowadzi na stronę główną; możesz ustawić je jako dekoracyjne, wyłączając przełącznik Logo przekierowuje na stronę główną w grupie Nagłówek w zakładce Ograniczenia.
Favicon
Favicon ustawisz w zakładce Branding. Kliknij Wybierz favicon i wskaż obraz PNG, JPEG, WEBP lub ICO (zalecany rozmiar 32x32 lub 16x16 px). Favicon pojawia się na kartach przeglądarki i w zakładkach.
Obraz tła strony
Również w zakładce Branding możesz opcjonalnie ustawić Obraz tła za całą stroną sklepu (PNG, JPEG lub WEBP). Po wybraniu obrazu pojawiają się dwa ustawienia: Rozmiar (Cover wypełnia okno, przycinając w razie potrzeby; Contain dopasowuje cały obraz) oraz Powtarzanie (gdy włączone, obraz jest powielany i przewija się ze stroną; gdy wyłączone, pojedynczy obraz pozostaje nieruchomy, a treść przewija się nad nim). Użyj mocno skompresowanego obrazu, by nie spowolnić ładowania strony.
Własny CSS i JavaScript
Dla zmian, których nie da się wprowadzić standardowymi ustawieniami, zakładki Własny CSS i Własny Javascript przyjmują do 1000 znaków, które są wstrzykiwane i uruchamiane na każdej stronie sklepu. Używaj ich oszczędnie. Dla stylowania ograniczonego do jednej sekcji każda sekcja ma własną zakładkę Własny CSS w swoim panelu sterowania, co jest bezpieczniejsze niż pole ogólnosklepowe.