Dodawanie niestandardowego CSS do swojego szablonu
Kaskadowy arkusz stylów (CSS) zmienia sposób wyświetlania elementów w szablonie i może wpłynąć na wygląd kilku stron jednocześnie. Możesz dostosować szablon w sposób, którego nie oferują ustawienia wbudowane w szablonie, za pomocą funkcji niestandardowych arkuszy CSS. Możesz dodać niestandardowy arkusz CSS do całego szablonu lub do konkretnej sekcji szablonu w ramach swojego szablonu. Niestandardowy CSS nie jest obsługiwany na stronie Realizacja zakupu.
Dostosowanie CSS wymaga pewnej znajomości CSS i HTML. Przed dostosowaniem szablonu sprawdź dostępny poziom pomocy technicznej.
Na tej stronie
Uwagi dotyczące korzystania z niestandardowego arkusza CSS
Zanim dodasz niestandardowy CSS do swojego szablonu, zapoznaj się z następującymi uwagami:
-
Następujące selektory CSS nie są obsługiwane w niestandardowym CSS:
- Nie można użyć instrukcji warunkowych
@import,@charseti@namespace - W przypadku CSS na poziomie sekcji dozwolone są tylko instrukcje warunkowe
@media,@container,@layeri@supports. - W przypadku CSS na poziomie sekcji nie można kierować do ID lub klas elementu zawijania sekcji Shopify renderowanego przez szablon z klasą
shopify-section
- Nie można użyć instrukcji warunkowych
Jeśli niestandardowa reguła CSS jest deklarowana z tagiem zawijającym element sekcji nadrzędnej, jest ona uważana za tag elementu podrzędnego i do tej sekcji jest stosowana reguła stylu. Pamiętaj, że domyślnie sekcja nadrzędna jest otoczona tagiem
<div>, ale projektanci szablonów mogą wybrać dowolną z dozwolonych wartości w schemacie sekcji.Obecnie dozwolona jest tylko domena https://cdn.shopify.com, gdy korzysta się z adresów URL w niestandardowym CSS.
Niestandardowe czcionki nie podlegają ograniczeniom. Niestandardowe czcionki są jednak osobnym zasobem pobieranym przez przeglądarki przed renderowaniem tekstu, co może wpłynąć na ogólną wydajność sklepu. Twoim obowiązkiem jest upewnienie się, że niestandardowe czcionki nie mają negatywnego wpływu na witrynę sklepu. Dowiedz się, jak korzystać z niestandardowych czcionek w szablonie.
Długość reguł CSS, które wpływają na cały szablon, jest ograniczona do 1500 znaków.
Długość reguł CSS, które wpływają na określoną sekcję, jest ograniczona do 500 znaków.
W zależności od selektorów CSS lub klas, których używasz, aktualizacja szablonu może spowodować, że Twój niestandardowy CSS przestanie działać.
Shopify nie obsługuje zaawansowanych dostosowań szablonu. Jeśli wystąpił błąd związany z tymi ograniczeniami w niestandardowym CSS i nie możesz ustalić, co jest przyczyną błędu, zapoznaj się z listą innych dostępnych zasobów pomocy technicznej.
Dodaj niestandardowy CSS
Niestandardowy CSS można dodać do całego szablonu, który ma wpływ na wszystkie strony w Twoim sklepie online z wyjątkiem strony Realizacja zakupu. Możesz na przykład zmienić sposób wyświetlania przycisków w całym sklepie.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.
- Kliknij opcję Dostosuj.
- Kliknij opcję Ustawienia szablonu.
- Kliknij opcję Niestandardowy CSS.
- Dodaj swój kod.
- Kliknij opcję Zapisz.
Niestandardowy CSS można również dodać do określonej sekcji twojego szablonu. Jeśli dodasz niestandardowy CSS do sekcji swojego szablonu, CSS będzie ograniczony do tej sekcji. Możesz na przykład zastosować niestandardowy rozmiar czcionki lub kolor tła do jednej sekcji.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.
- Kliknij opcję Dostosuj.
- Kliknij sekcję, do której chcesz dodać CSS.
- W dolnej części panelu właściwości sekcji kliknij opcję Niestandardowy CSS.
- Dodaj swój kod.
- Kliknij opcję Zapisz.
Dodatkowe zasoby dla CSS
Dostosowanie CSS wymaga pewnej znajomości CSS i HTML. Przed dostosowaniem szablonu sprawdź dostępny poziom pomocy technicznej.
Jeśli chcesz dowiedzieć się więcej o CSS, możesz zapoznać się z następującymi zasobami: