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.
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.
- Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
- Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- Kliknij opcję Ustawienia szablonu.
- Kliknij Kolory.
- Aby zmienić kolor w swoim szablonie, kliknij kolor i użyj selektora kolorów lub wprowadź wartość nowego koloru w polu tekstowym.
- 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
- Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
- Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- Kliknij opcję Ustawienia szablonu.
- Kliknij Kolory.
Wybierz jedną z opcji gradientów.
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.
- 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:
- Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
- Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- Kliknij opcję Ustawienia szablonu.
- Kliknij Kolory.
- Kliknij gradient, który chcesz edytować.
- Kliknij strzałkę obok gradientu 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
Aby zresetować lub usunąć gradient:
- Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
- Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- Kliknij opcję Ustawienia szablonu.
- Kliknij Kolory.
- Kliknij gradient, który chcesz edytować.
- Kliknij przycisk Usuń gradient
- Kliknij opcję Zapisz.