كيف أضيف CSS مخصصًا إلى متجري كله أو إلى قسم واحد؟

CSS يغيّر شكل متجرك: الألوان، والمسافات، والأحجام، وغير ذلك. يمكنك إضافة CSS الخاص بك في مكانين في المنشئ: للمتجر كله، أو لقسم واحد فقط.

CSS مخصص للمتجر كله

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

استخدمه للقواعد التي يجب أن تُطبّق في كل مكان، مثل إخفاء عنصر في كل الصفحات أو تغيير شكل كل الأزرار. مثلًا، h1 { text-transform: uppercase; } يكتب العنوان الرئيسي لكل صفحة بأحرف كبيرة.

CSS مخصص لقسم واحد

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

هذا هو الخيار الأكثر أمانًا. يضيف Storeep القسم قبل كل محدد من محدداتك، لذلك لا تستطيع قواعدك تغيير أي شيء خارجه.

• h2 { letter-spacing: 2px; } يغيّر العناوين داخل هذا القسم فقط.
• استخدم & لتنسيق القسم نفسه: & { border-top: 1px solid #000; }.
• قواعد @media تعمل. والقواعد داخلها محصورة في القسم أيضًا.
• حركات @keyframes تبقى كما كتبتها.

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

أيهما تستخدم

• قسم واحد يبدو خاطئًا: استخدم CSS مخصص الخاص بالقسم.
• التغيير نفسه مطلوب في كل مكان: استخدم تبويب إعدادات CSS مخصص.
• قبل كتابة CSS، تحقق مما إذا كان هناك إعداد يقوم بذلك أصلًا: الألوان في أنظمة الألوان، والخطوط في إعدادات الخطوط، والزوايا والظلال تأتي من سمتك.

عندما لا يعمل CSS الخاص بك

• تحقق من وجود } أو ; ناقص. خطأ واحد قد يوقف القواعد التي بعده.
• قد تكون قاعدتك أضعف من قاعدة السمة. اجعل المحدد أكثر تحديدًا.
• في CSS القسم، لا تبدأ المحدد بـ body أو html. فهما خارج القسم، لذلك لن تنطبق القاعدة.
• إذا بدت الصفحة معطلة، فأزل آخر تغيير، وانشر، ثم أعد القواعد واحدة تلو الأخرى.

معلومات مفيدة

• CSS المخصص يخص السوق الذي تعدّله. كرره في كل سوق يحتاج إليه.
• تغيير السمة قد يغيّر أسماء الفئات والتخطيط، لذلك تحقق من CSS المخصص بعد تغيير السمة.
• تظهر التغييرات في متجرك عندما تنقر على نشر.
• لإضافة HTML وكود داخل صفحة، راجع الكود المخصص.