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
Szablony nie mają indywidualnych ustawień koloru, dzięki czemu projekt sklepu online jest spójny na całej stronie internetowej. Szablon jest uważany za stronę główną lub główną zawartość sklepu. Posiadanie różnych kolorystyk w sklepie może negatywnie wpłynąć na wrażenia użytkownika i sprawić, że klienci opuszczą sklep bez dokonania zakupów.
Możesz sprawdzić funkcje sklepu online i typy stron dla sekcji, które zawierają ustawienie Kolorystyka.
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,blacklubblue - 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ół. Klikając strzałkę skierowaną w górę lub w dół, zwiększysz lub zmniejszysz wartość kąta o 5 procent.
- Użyj suwaka, aby wybrać położenie gradientu lub wprowadź wartość liczbową w tym 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.