إضافة CSS مخصص إلى قالبك

تعمل أوراق الأنماط المتتالية (CSS) على تغيير كيفية عرض العناصر في قالبك، ويمكنها التحكم في مظهر عدة صفحات في وقت واحد. يمكنك تخصيص قالبك بما يتجاوز الإعدادات المدمجة فيه باستخدام ميزة CSS المخصص. على سبيل المثال، يمكنك استخدام CSS لتعيين التدرجات في إعدادات ألوان القالب. يمكنك إضافة CSS مخصص إلى قالبك بالكامل، أو إلى قسم معين من نموذج داخل قالبك. إن CSS المخصص غير مدعوم في صفحة الدفع.

يتطلب تخصيص CSS الخاص بك بعض الإلمام بـ CSS وHTML. قبل تخصيص قالبك، تأكد من فهم مستوى الدعم المتاح.

في هذه الصفحة

اعتبارات استخدام CSS المخصص

قبل إضافة CSS مخصص إلى قالبك، راجع الاعتبارات التالية:

إن محددات وخصائص CSS التالية غير مدعومة في CSS المخصص:
- لا يمكن استخدام قواعد @ (At-rules) التالية: @import و@charset و@namespace
- بالنسبة لـ CSS على مستوى القسم، يُسمح فقط بقواعد @ (At-rules) التالية: @media و@container و@layer و@supports
- بالنسبة لـ CSS على مستوى القسم، لا يمكنك استهداف المُعرّف أو الفئات الخاصة بعنصر قسم Shopify المُغلِّف الذي يعرضه القالب بفئة shopify-section
- خاصية content غير متوفرة في CSS المخصص
إذا تم تعريف قاعدة CSS مخصصة مع الوسم الذي يُغلّف عنصر القسم الأصل، فسيُعتبر وسمًا تابعًا، وسيتم تطبيق قاعدة التنسيق على ذلك القسم. لاحظ أنه يتم تغليف القسم الأصل افتراضيًا في وسم <div>، ولكن يمكن لمطوري القوالب تعيين ذلك إلى أي من القيم المسموح بها في مخطط القسم.
حاليًا، يُسمح فقط بنطاق https://cdn.shopify.com عند استخدام عناوين URL في CSS المخصص.
لا توجد قيود على الخطوط المخصصة. ومع ذلك، تُعد الخطوط المخصصة موردًا منفصلاً تقوم المتصفحات بتنزيله قبل عرض النص، مما قد يؤثر على الأداء العام للمتجر. تقع على عاتقك مسؤولية ضمان عدم تأثر واجهة متجرك سلبًا بالخطوط المخصصة. تعرّف على كيفية استخدام الخطوط المخصصة في قالبك.
تقتصر قواعد CSS التي تؤثر على القالب بالكامل على 1500 حرف.
تقتصر قواعد CSS التي تؤثر على قسم معين على 500 حرف.
بناءً على محددات أو فئات CSS التي تستخدمها، قد يؤدي تحديث قالبك إلى توقف CSS المخصص عن العمل.

لا تدعم Shopify التخصيصات المتقدمة للقوالب. إذا واجهت خطأً يتعلق بهذه القيود في CSS المخصص ولم تتمكن من تحديد سبب الخطأ، فراجع قائمة موارد الدعم الأخرى المتاحة.

إضافة CSS مخصص

يمكن إضافة CSS مخصص إلى القالب بأكمله بحيث يؤثر في جميع الصفحات في متجرك الإلكتروني باستثناء صفحة الدفع. على سبيل المثال، يمكنك تغيير طريقة عرض الأزرار في جميع أنحاء متجرك.

الخطوات:

من لوحة تحكم مسؤول Shopify، انتقل إلى المتجر الإلكتروني > القوالب.
انقر على تعديل القالب.
انقر على إعدادات القالب.
انقر على CSS مخصص.
أضِف التعليمات البرمجية الخاصة بك.
انقر على حفظ.

يمكن أيضًا إضافة CSS مخصص إلى قسم محدد في قالبك. إذا أضفت CSS مخصصًا إلى قسم في قالبك، فسيقتصر نطاق CSS على هذا القسم. على سبيل المثال، يمكنك تطبيق حجم خط مخصص أو لون خلفية على قسم واحد.

الخطوات:

من لوحة تحكم مسؤول Shopify، انتقل إلى المتجر الإلكتروني > القوالب.
انقر على تعديل القالب.
انقر على القسم الذي تريد إضافة CSS إليه.
في الجزء السفلي من لوحة خصائص القسم، انقر على CSS مخصص.
أضِف التعليمات البرمجية الخاصة بك.
انقر على حفظ.

موارد إضافية لـ CSS

يتطلب تخصيص CSS الخاص بك بعض الإلمام بـ CSS وHTML. قبل تخصيص قالبك، تأكد من فهم مستوى الدعم المتاح.

إذا كنت مهتمًا بمعرفة المزيد حول CSS، فيمكنك استكشاف بعض الموارد التالية: