Kolorystyki

Ta strona została wydrukowana dnia Jun 02, 2023. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-store/themes/theme-structure/color-scheme.

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.

Na tej stronie

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. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
  2. Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  1. Kliknij opcję Ustawienia szablonu.
  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. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
  2. Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  1. Kliknij opcję Ustawienia szablonu.
  2. Kliknij Kolory.

  3. Wybierz jedną z opcji gradientów.

  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. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
  2. Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  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.
    Gradient CSS Code field in the theme editor

Usuń gradient

Aby zresetować lub usunąć gradient:

  1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
  2. Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  1. W aplikacji Shopify naciśnij Sklep.
  2. W sekcji Kanały sprzedaży naciśnij Sklep online.
  3. Naciśnij opcję Zarządzaj wszystkimi szablonami.
  4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
  5. Naciśnij Edytuj.
  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