Gdzie znajdują się te ustawienia
Te ustawienia konfiguruje się osobno dla każdego rynku, a w obrębie danego rynku wpływają na wszystkie strony jednocześnie. Otwórz kreator, wybierz rynek za pomocą zakładki rynku (ikona flagi kraju) w lewym pasku bocznym, a następnie kliknij zakładkę Ustawienia (ikona koła zębatego). Zmiany dotyczą wybranego rynku i wchodzą w życie po kliknięciu przycisku Opublikuj. Pełną listę wszystkich ustawień znajdziesz w artykule Przewodnik po ustawieniach kreatora.
Schematy kolorów
Storeep korzysta z palety obejmującej do 9 schematów kolorów. Każda sekcja, blok i komponent w Twoim sklepie odwołuje się do jednego z tych schematów za pomocą jego numeru (od 1 do 9). Zmiana kolorów schematu natychmiast aktualizuje każdą sekcję, która z niego korzysta, na wszystkich stronach.
Role kolorów w obrębie każdego schematu
Każdy schemat definiuje następujące role kolorów, wszystkie ustawiane jako wartości szesnastkowe (hex):
- Tło: główny kolor tła sekcji.
- Tło wewnętrzne: subtelnie zabarwione tło używane w kartach i zagnieżdżonych obszarach treści w obrębie sekcji.
- Kolor nagłówków: kolor tekstu nagłówków.
- Kolor tekstu treści: kolor tekstu akapitów.
- Kolor wyróżnionego tekstu: zaakcentowany kolor tekstu używany dla cen, etykiet oszczędności oraz wartości liczników odliczania. Zwykle najciemniejszy lub najbardziej wyrazisty odcień palety.
- Kolor odnośnika: domyślny kolor hiperłącza.
- Kolor odnośnika po najechaniu: kolor hiperłącza, gdy kupujący najedzie na nie kursorem.
- Kolor obramowania: kolor obramowań elementów i linii oddzielających.
- Kolor konturu: kolor pierścieni fokusu, podświetleń wyboru klawiaturą oraz konturów akcentujących, które muszą wyróżniać się bardziej niż zwykłe obramowania.
- Kolor cienia: kolor cieni elementów (zwykle z pewną przezroczystością).
- Tło przycisku głównego: kolor wypełnienia przycisków głównych.
- Tekst przycisku głównego: kolor etykiety na przyciskach głównych.
- Obramowanie przycisku głównego: kolor obramowania przycisków głównych.
- Tło przycisku głównego po najechaniu: kolor wypełnienia przycisku głównego po najechaniu kursorem.
- Tekst przycisku głównego po najechaniu: kolor etykiety przycisku głównego po najechaniu kursorem.
- Obramowanie przycisku głównego po najechaniu: kolor obramowania przycisku głównego po najechaniu kursorem.
- Tło przycisku pomocniczego: kolor wypełnienia przycisków pomocniczych.
- Tekst przycisku pomocniczego: kolor etykiety na przyciskach pomocniczych.
- Obramowanie przycisku pomocniczego: kolor obramowania przycisków pomocniczych.
- Tło przycisku pomocniczego po najechaniu: kolor wypełnienia przycisku pomocniczego po najechaniu kursorem.
- Tekst przycisku pomocniczego po najechaniu: kolor etykiety przycisku pomocniczego po najechaniu kursorem.
- Obramowanie przycisku pomocniczego po najechaniu: kolor obramowania przycisku pomocniczego po najechaniu kursorem.
- Tło pola formularza: kolor tła pól wprowadzania w formularzu.
- Kolor tekstu pola formularza: kolor tekstu wewnątrz pól wprowadzania w formularzu.
- Kolor obramowania pola formularza: kolor obramowania pól wprowadzania w formularzu.
- Kolor etykiety pola formularza: kolor tekstu etykiety nad polami formularza.
- Tło pola formularza po aktywacji: kolor tła pola, gdy kupujący ustawi na nim fokus lub najedzie kursorem.
Wskazówki dotyczące mocnych schematów kolorów
- W większości sekcji używaj neutralnego, jasnego koloru dla Tła, a wyraziste kolory zachowaj dla jednego schematu akcentującego, stosowanego w sekcjach hero i wezwań do działania.
- Zadbaj, aby Tło przycisku głównego wyraźnie różniło się wizualnie od Tła sekcji, ponieważ przycisk musi się czytelnie wyróżniać.
- Utrzymuj Tło wewnętrzne jako bardzo lekki odcień głównego Tła, tak aby tła kart były rozróżnialne, ale nie raziły.
- Dąż do kontrastu co najmniej 4,5:1 między Kolorem tekstu treści a Tłem oraz między Tekstem przycisku głównego a Tłem przycisku głównego.
Typografia
Cztery role czcionek sterują typografią na wszystkich stronach. Każda rola jest przypisana do rodziny czcionek z dostępnej biblioteki.
- Treść: główna czcionka dla tekstu akapitów i opisów.
- Nagłówek: czcionka dla wszystkich nagłówków w całym sklepie.
- Podtytuł: czcionka dla tytułów pomocniczych i podtytułów sekcji, łącząca style nagłówka i treści.
- Akcent: stylistyczna czcionka dla cen, etykiet i dekoracyjnych akcentów.
Dostępne czcionki to między innymi: 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 oraz Acme.
W sklepach z treścią po arabsku czcionki są automatycznie parowane z odpowiadającymi im odpowiednikami arabskimi: na przykład Inter jest parowany z Cairo, a Poppins z Tajawal. Nie musisz osobno wybierać czcionki arabskiej.
Szerokość strony
Globalne ustawienie Szerokość strony kontroluje maksymalną szerokość głównej siatki treści w pikselach. Sekcje ustawione na szerokość Strona są ograniczone do tej wartości; sekcje ustawione na Pełna zawsze rozciągają się na cały obszar widoku, niezależnie od tego. Dostępne wartości: 900, 1000, 1100, 1200 (domyślnie), 1300 oraz 1400 px. Na obszarach widoku węższych niż wybrana szerokość sekcje automatycznie zmniejszają się, aby wypełnić 100% ekranu.
Logo
Logo ustawia się w bloku logo sekcji Nagłówek oraz w bloku O nas w stopce. Kliknij blok logo w panelu sterowania, a następnie kliknij + Dodaj media lub + Dodaj obraz, aby przesłać logo z urządzenia lub wybrać je z biblioteki multimediów. Po przesłaniu ustaw szerokość wyświetlania (20–300 px) i wysokość (20–300 px); drugi wymiar skaluje się automatycznie, zachowując proporcje.
Favicon
Favicon ustawia się w sekcji Ustawienia → Identyfikacja wizualna w kreatorze. Kliknij pole favicon i prześlij obraz (zalecany: obraz kwadratowy). Favicon pojawia się na kartach przeglądarki i w zakładkach.
Obraz tła strony
Również w sekcji Ustawienia → Identyfikacja wizualna: opcjonalnie możesz ustawić obraz tła dla całej strony. Skonfiguruj sposób jego skalowania (Wypełnienie pokrywa cały obszar widoku, Dopasowanie mieści obraz w jego obrębie) oraz to, czy się powtarza (tworzy mozaikę), czy pozostaje pojedynczym obrazem za przewijaną treścią.
Globalny niestandardowy kod CSS i JavaScript
W przypadku zaawansowanych dostosowań, których nie da się osiągnąć standardowymi ustawieniami, Ustawienia udostępniają pole Globalny CSS (do 1000 znaków) oraz pole Globalny JS (do 1000 znaków). Kod CSS wprowadzony tutaj jest wstrzykiwany na każdej stronie sklepu; kod JS wprowadzony tutaj uruchamia się na każdej stronie. Korzystaj z nich oszczędnie i preferuj sekcję Niestandardowy kod w przypadku dostosowań dotyczących konkretnej strony.