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

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 lub blue
• kody kolorów RGB
• wartości kolorów szesnastkowych.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
3. Kliknij ikonę koła zębatego, a następnie opcję Kolory.
4. W sekcji Schematy kliknij istniejący schemat lub kliknij opcję Dodaj schemat, aby dodać nowy schemat kolorów.
5. Kliknij próbkę koloru dla typu zawartości, który chcesz zmienić.
6. 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.
7. 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.

Wskazówka

Aby dowiedzieć się więcej o gradientach i tłach CSS, zapoznaj się z dokumentacją firmy Mozilla dotyczącą gradientu liniowego oraz 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

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
3. Kliknij ikonę koła zębatego, a następnie opcję Kolory.
4. W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.
5. Kliknij opcję próbki koloru gradientu, np. Gradient tła.
6. 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.
7. 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.

1. 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:

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
3. Kliknij ikonę koła zębatego, a następnie opcję Kolory.
4. W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.
5. Kliknij gradient, który chcesz edytować.
6. Kliknij strzałkę obok opcji Gradient i wybierz CSS.
7. W polu Kod CSS wpisz lub wklej kod gradientu. W podglądzie edytora szablonów Twój gradient wyświetli się w odpowiednim miejscu.
8. Kliknij opcję Zapisz.

Usuń gradient

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
2. Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
3. Kliknij ikonę koła zębatego, a następnie opcję Kolory.
4. W sekcji Schematy kliknij istniejący schemat, który chcesz edytować.
5. Kliknij gradient, który chcesz usunąć.
6. Kliknij przycisk Usuń gradient.
7. Kliknij opcję Zapisz.