Помощ
Влизане

Добавяне на персонализиран CSS към Вашата тема

Каскадният стилов лист (CSS) променя начина, по който елементите се показват във Вашата тема, и може да контролира облика на няколко страници едновременно. Можете да персонализирате темата си извън вградените в нея настройки, като използвате функцията за персонализиран CSS. Например можете да използвате CSS за задаване на градиенти в цветовите настройки на Вашата тема. Можете да добавите персонализиран CSS към цялата си тема или към конкретна секция на шаблон в рамките на Вашата тема. Персонализираният CSS не се поддържа на страницата Плащане.

Персонализирането на Вашия CSS изисква известни познания по CSS и HTML. Преди да персонализирате темата си, уверете се, че разбирате какво ниво на поддръжка е налично.

На тази страница

Съображения при използване на персонализиран CSS

Преди да добавите персонализиран CSS към Вашата тема, прегледайте следните съображения:

  • Следните CSS селектори и свойства не се поддържат в персонализиран CSS:
    • At-правилата @import, @charset и @namespace не могат да се използват
    • За CSS на ниво секция са разрешени само at-правилата @media, @container, @layer и @supports
    • За CSS на ниво секция не можете да насочвате идентификатора или класовете на обвиващия елемент Shopify Section, изобразен от темата с клас shopify-section
    • Свойството content не е налично в персонализирания CSS
  • Ако правило за персонализиран CSS е декларирано с тага, който обвива родителския елемент на секцията, то се счита за дъщерен таг и правилото за стилизиране се прилага към тази секция. Имайте предвид, че по подразбиране родителската секция е обвита в таг <div>, но това може да бъде зададено на всяка от разрешените стойности в схемата на секцията от разработчиците на темата.
  • Понастоящем само домейнът https://cdn.shopify.com е разрешен при използване на URL адреси в персонализиран CSS.
  • Персонализираните шрифтове не са ограничени. Персонализираните шрифтове обаче са отделен ресурс, който се изтегля от браузърите преди изобразяването на текста, което може да повлияе на цялостната производителност на магазина. Ваша отговорност е да се уверите, че Вашата витрина не е негативно повлияна от персонализираните шрифтове. Научете как да използвате персонализирани шрифтове във Вашата тема.
  • CSS правилата, които засягат цялата тема, са ограничени до 1500 знака.
  • CSS правилата, които засягат конкретна секция, са ограничени до 500 знака.
  • В зависимост от CSS селекторите или класовете, които използвате, актуализирането на Вашата тема може да доведе до спиране на функционирането на Вашия персонализиран CSS.

Shopify не поддържа разширени персонализации на темите. Ако срещнете грешка, свързана с тези ограничения във Вашия персонализиран CSS, и не можете да определите причината за грешката, вижте списъка с други налични ресурси за поддръжка.

Добавяне на персонализиран CSS

Можете да добавите персонализиран CSS към цялата си тема, който засяга всички страници във Вашия онлайн магазин, с изключение на страницата Плащане. Например можете да промените начина, по който бутоните се показват в целия Ви магазин.

Стъпки:

  1. От Вашия администраторски панел на Shopify отидете на Онлайн магазин > Теми.

  2. Натиснете Редактиране на тема.

  3. Натиснете Настройки на темата.

  4. Натиснете Персонализиран CSS.

  5. Добавете своя код.

  6. Натиснете Запазване.

Местоположение на полето за персонализиран CSS в настройките на темата

Персонализиран CSS може да бъде добавен и към конкретна секция на Вашата тема. Ако добавите персонализиран CSS към секция на Вашата тема, тогава CSS е ограничен до тази секция. Например можете да приложите персонализиран размер на шрифта или цвят на фона към една секция.

Стъпки:

  1. От Вашия администраторски панел на Shopify отидете на Онлайн магазин > Теми.

  2. Натиснете Редактиране на тема.

  3. Кликнете върху секцията, към която искате да добавите CSS.

  4. В долната част на панела със свойства на секцията кликнете върху Персонализиран CSS.

  5. Добавете своя код.

  6. Натиснете Запазване.

Местоположение на полето за персонализиран CSS в настройките на секцията

Допълнителни ресурси за CSS

Персонализирането на Вашия CSS изисква известни познания по CSS и HTML. Преди да персонализирате темата си, уверете се, че разбирате какво ниво на поддръжка е налично.

Ако се интересувате да научите повече за CSS, можете да разгледате някои от следните ресурси: