Schematy kolorów Dawn

Różne sekcje szablonu, takie jak tekst sformatowany, baner z obrazem i lista kolekcji, umożliwiają wybranie schematu kolorów dla danej sekcji spośród kolorów określonych w ustawieniach szablonu. Twój szablon będzie mieć zastosowany domyślny schemat kolorów, który można zmienić w dowolnym momencie w edytorze szablonów. Dodanie kolorów marki zapewnia spójne zastosowanie palety kolorów w sklepie online.

Zarządzaj swoim schematem kolorów

Schemat kolorów sklepu jest określony w ustawieniach szablonu.

  1. Kliknij Ustawienia szablonu na dole paska bocznego. 3. Kliknij Kolory. 5. Aby zmienić kolor w swoim szablonie, kliknij kolor i użyj s selektora kolorów lub wprowadź wartość nowego koloru w polu tekstowym. 6. Kliknij Zapisz.

W przypadku kolorów pełnych użyj selektora kolorów, aby wybrać nowy kolor lub wprowadzić wartość koloru w polu tekstowym. W polu akceptowane są nazwy kolorów (np. wartości red, black, blue), RGB lub wartości kolorów w notacji heksadecymalnej.

W przypadku gradientów kolorów kliknij pole koloru, a następnie wpisz lub wklej w polu kod CSS gradientu (np. linear-gradient(red, green), radial-gradient(red, green) lub conic-gradient(red, green)). Edytor szablonów wyświetli komunikat o błędzie, jeśli kod CSS gradientu zawiera znaki specjalne, obrazy lub adresy URL. Jeśli Twój kod CSS jest prawidłowy, w podglądzie edytora szablonów wyświetlany będzie wybrany gradient w odpowiedniej lokalizacji.

Pole Kod CSS gradientu w edytorze szablonów

Ustawienia kolorów

Tło obrazów i dopełnienie obrazu można ustawić w edytorze szablonów. Użyj menu rozwijanego, aby wybrać opcje: Akcent 1, Gradient koloru akcentu 1, Akcent 2, Gradient koloru akcentu 2, Tło 1, Gradient tła 1, Tło 2, Gradient tła 2 lub Odwrócone. Możesz wyświetlić podgląd wybranych schematów kolorów w panelu podglądu edytora szablonów.

Ustawienie Opis
Tekst Kolor można zastosować do tekstu sekcji lub bloku.
Akcent 1 Kolor można zastosować w przyciskach i tle niektórych sekcji.
Gradient koloru akcentu 1 Wprowadź kod CSS gradientu, aby wygenerować gradient.
Akcent 2 Kolor można zastosować w przyciskach i tle niektórych sekcji.
Gradient koloru akcentu 2 Wprowadź kod CSS gradientu, aby wygenerować gradient.
Tło 1 Kolor można zastosować w przyciskach i tle niektórych sekcji.
Gradient tła 1 Wprowadź kod CSS gradientu, aby wygenerować gradient.
Tło 2 Kolor można zastosować w przyciskach i tle niektórych sekcji.
Gradient koloru tła 2 Wprowadź kod CSS gradientu, aby wygenerować gradient.
Odwrócone Kolor można zastosować w przyciskach i tle niektórych sekcji. Tło 1 jest wykorzystywane jako kolor tekstu, a kolor tekstu jako kolor tła

Niektóre ustawienia, które umożliwiają wybór używanego schematu kolorów, umożliwiają również korzystanie z gradientów. Na przykład w szablonie Dawn, pierwszym darmowym szablonie Shopify Online Store 2.0, możesz skonfigurować gradienty kolorów swojej marki i używać ich zamiast standardowych opcji koloru akcentu i tła.

Skonfiguruj gradienty

Szablon Dawn wykorzystuje ustawienie color_background do dostosowania właściwości tła CSS, co umożliwia tworzenie ciekawych wizualnie opcji tła, takich jak gradienty.

Większość wartości właściwości background CSS można użyć do ustawienia koloru tła. To pole 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) będą tworzyć 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ć.

Ustawienie koloru tła używa kodu CSS i obejmuje sprawdzanie poprawności, które wyświetla ostrzeżenie, jeśli obrazy, znaki specjalne lub adresy URL są w kodzie CSS. Jeśli kod tła CSS jest prawidłowy, edytor szablonów wyświetli podgląd gradientu w panelu podglądu.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo