Kolorystyki

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 ma 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.

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 Aby dostosować gradient akcentu, wybierz wstępnie ustawiony gradient lub użyj selektora gradientu.
Akcent 2 Kolor można zastosować w przyciskach i tle niektórych sekcji.
Gradient koloru akcentu 2 Aby dostosować gradient akcentu, wybierz wstępnie ustawiony gradient lub użyj selektora gradientu.
Tło 1 Kolor można zastosować w przyciskach i tle niektórych sekcji.
Gradient tła 1 Aby dostosować gradient tła, wybierz wstępnie ustawiony gradient lub użyj selektora gradientu.
Tło 2 Kolor można zastosować w przyciskach i tle niektórych sekcji.
Gradient koloru tła 2 Aby dostosować gradient tła, wybierz wstępnie ustawiony gradient lub użyj selektora gradientu.
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 z ustawień, które pozwalają na wybranie kolorystyki, umożliwiają również używanie gradientów. Na przykład, w szablonie Dawn możesz skonfigurować gradienty kolorów swojej marki i używać ich zamiast standardowych opcji koloru akcentu i tła.

Zarządzaj swoim schematem kolorów

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

  1. Kliknij Ustawienia szablonu w dolnej części bocznego paska.
  2. Kliknij Kolory.
  3. Aby zmienić kolor w swoim szablonie, kliknij kolor i użyj selektora kolorów lub wprowadź wartość nowego koloru w polu tekstowym.
  4. Kliknij opcję 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.

Gradienty

Gradientu kolorów w szablonie Dawn używać możesz w przypadku opcji do zwiększania atrakcyjności wizualnej 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

  1. Kliknij opcję Ustawienia szablonu.
  2. Kliknij Kolory.
  3. Wybierz jedną z opcji gradientów.

    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 jakiś wstępnie ustawiony gradient.

    Jeśli gradient został już ustawiony, kliknięcie opcji gradientu spowoduje od razu otwarcie panelu opcji.

  4. Wybierz opcje gradientu:

  • Masz do wyboru dwa gradienty: liniowy i promieniowy. Używając przycisków, wybierz taki styl gradientu, jaki lubisz.
  • Kąt gradientu ustawiać można za pomocą strzałek w górę i w dół. Kliknięcie ikony 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 chcesz, aby gradient 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.

Selektor gradientu w edytorze szablonów

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. Kliknij opcję Ustawienia szablonu.
  2. Kliknij Kolory.
  3. Kliknij gradient, który chcesz edytować.
  4. Kliknij strzałkę obok gradientu i wybierz CSS.
  5. W polu Kod CSS wpisz lub wklej kod gradientu. W podglądzie edytora szablonów Twój gradient wyświetli się w odpowiednim miejscu.
  6. Kliknij opcję Zapisz.
    Pole Kod CSS gradientu w edytorze szablonów

Usuń gradient

Aby zresetować lub usunąć gradient:

  1. Kliknij opcję Ustawienia szablonu.
  2. Kliknij Kolory.
  3. Kliknij gradient, który chcesz edytować.
  4. Kliknij przycisk Usuń gradient
  5. Kliknij opcję Zapisz.

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

Wypróbuj za darmo