Kolorystyki
W ustawieniach szablonu można zdefiniować różne kolorystyki i zastosować je do różnych sekcji w sklepie online za pomocą selektora kolorystyki. Kolorystyka to zbiór kolorów. W Twoim szablonie zastosowano domyślne kolorystyki, które możesz w każdej chwili zmienić w edytorze szablonów. Możesz dodać kolory swojej marki, aby zapewnić spójne zastosowanie palety kolorów w sklepie online
Na tej stronie
Ustawienia kolorystyki w szablonie
Kolorystyki są ustawieniem szablonu grupującym elementy i powiązane kolory w przejrzysty sposób. Możesz przypisywać różne kolory do poszczególnych elementów w ramach spójnej kolorystyki, którą można zastosować w szablonie za pomocą dostępnego selektora kolorystyki. Możesz opracować maksymalnie 21 kolorystyk. Możesz także sprawdzić sposób wyświetlania kolorów w podglądzie szablonu.
Ustawienie | Opis |
---|---|
Tło | Kolor jest stosowany do tła niektórych sekcji i tła przycisku konspektu. |
Gradient tła | Gradient kolorów jest stosowany do tła niektórych sekcji. Gradienty tła zastępują tło tam, gdzie jest to możliwe. |
Tekst | Kolor jest stosowany do tekstu sekcji lub bloku. |
Tło przycisku w jednolitym kolorze | Kolor jest stosowany do tła głównego przycisku. |
Przycisk z etykietą w jednolitym kolorze | Kolor jest stosowany do tekstu głównego przycisku. |
Przycisk konspektu | Kolor jest stosowany do tekstu dodatkowego przycisku i obramowania. |
Cień | Kolor jest stosowany do cieni. |
Zarządzaj swoim schematem kolorów
Kolorystykę i opcje kolorów Twojego sklepu można konfigurować w ustawieniach szablonu. W przypadku kolorów pełnych użyj selektora kolorów, aby wybrać nowy kolor lub wprowadzić wartość koloru w polu tekstowym. W polu koloru akceptowane są następujące nazwy i wartości kolorów:
- nazwy kolorów, takie jak
red
,black
lubblue
- kody kolorów RGB
- wartości kolorów szesnastkowych.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
- Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
- Kliknij ikonę koła zębatego, a następnie opcję Kolory.
- W sekcji Schematy kliknij istniejący schemat lub kliknij opcję Dodaj schemat, aby dodać nowy schemat kolorów.
- Kliknij próbkę koloru dla typu zawartości, który chcesz zmienić.
- Aby ustawić kolor, wprowadź szesnastkowy kod koloru lub wybierz kolor z selektora kolorów. Aby ustawić kolor na transparentny, usuń kod szesnastkowy z pola tekstowego.
- Kliknij opcję Zapisz.
Zastosowanie kolorystyki
Po zdefiniowaniu kolorystyki w ustawieniach szablonu możesz przypisać kolorystykę za pomocą selektora kolorystyki w sekcjach i blokach szablonu. Selektor kolorystyki jest dostępny tylko w niektórych sekcjach, blokach i ogólnych ustawieniach szablonu.

Gradienty
W niektórych szablonach możesz ustawić gradient kolorów, aby uzyskać interesujące wizualnie opcje tła. Ustawienie color_background
służy do dostosowywania właściwości tła CSS.
Selektor gradientu umożliwia wybieranie kolorów, stylu gradientu, kąta, położenia i nieprzezroczystości gradientu. Efekt opcji wybranych w selektorze gradientów jest na bieżąco pokazywany w edytorze szablonów w formie podglądu. Możesz także utworzyć tło gradientu, używając kodu CSS obejmującego sprawdzanie poprawności.
Skonfiguruj gradienty
- W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
- Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
- Kliknij ikonę koła zębatego, a następnie opcję Kolory.
- W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.
- Kliknij opcję próbki koloru gradientu, np. Gradient tła.
- Jeśli gradient nie został wcześniej ustawiony, możesz wybrać jedną z kilku wstępnie ustawionych opcji, które się wyświetlą. Aby otworzyć panel opcji, wybierz dowolny wstępnie ustawiony gradient.
- Wybierz opcje gradientu:
- Masz do wyboru dwa gradienty: liniowy i promieniowy. Używając przycisków, wybierz taki styl gradientu, jaki lubisz.
- Ustaw kąt gradientu za pomocą strzałek w górę i w dół. Kliknięcie strzałki skierowanej w górę lub w dół odpowiednio zwiększa lub zmniejsza wartość kąta o 5 procent.
- Użyj suwaka, aby wybrać położenie gradientu lub wprowadź wartość liczbową w specjalnym polu.
- Możesz wprowadzić konkretny szesnastkowy kod koloru lub użyć suwaka i wybrać odcień. Ostatnio wybrane kolory wyświetlane są na dole panelu opcji gradientu.
- Jeśli gradient ma być nieprzezroczysty, użyj suwaka po prawej stronie i dobierz poziom przezroczystości gradientu. Możesz także wprowadzić wartość procentową w polu umieszczonym obok szesnastkowego kodu koloru.
- Kliknij opcję Zapisz.
Użyj CSS, aby ustawić gradienty
Większość wartości właściwości background
CSS można użyć do ustawienia koloru tła. Tego pola można używać do kolorów pełnych (np. #000000
, black
, rgb(0,0,0,0)
, rgba(0,0,0,0)
, hsl(0, 0%, 0%)
i hsla(0, 0%, 0%, 1)
tworzą pełne czarne tło) lub gradientów (na przykład linear-gradient(red, green)
, radial-gradient(red, green)
lub conic-gradient(red, green)
). Gradienty można również powtarzać.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
- Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
- Kliknij ikonę koła zębatego, a następnie opcję Kolory.
- W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.
- Kliknij gradient, który chcesz edytować.
- Kliknij strzałkę obok opcji Gradient i wybierz CSS.
- W polu Kod CSS wpisz lub wklej kod gradientu. W podglądzie edytora szablonów Twój gradient wyświetli się w odpowiednim miejscu.
- Kliknij opcję Zapisz.
Usuń gradient
- W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
- Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
- Kliknij ikonę koła zębatego, a następnie opcję Kolory.
- W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.
- Kliknij gradient, który chcesz usunąć.
- Kliknij przycisk Usuń gradient.
- Kliknij opcję Zapisz.