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

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

للشفافية: نحن في AfterAds نطوّر ثيم ملاك، والكود الذي تضيفه في سلة يعمل فوق ثيم مثل ثيمنا. نذكر ملاك في قسم مستقل قرب نهاية المقال.

قبل الكود | هل تجد ما تريده في إعدادات الثيم؟

كثير من التعديلات التي يبحث لها التجار عن كود موجودة أصلًا في إعدادات الثيم: الألوان، والخط، وحجم الشعار، وشكل بطاقة المنتج، وإظهار عنصر أو إخفاؤه. افتح (تصميم المتجر)، ثم ادخل إلى تخصيص نسخة ثيمك، وتصفّح الإعدادات قسمًا قسمًا قبل أن تكتب أي سطر.

الإعداد أفضل من الكود لثلاثة أسباب:

  • يبقى بعد تحديث الثيم، لأن مطور الثيم يحافظ عليه.
  • يعمل غالبًا في اللغتين، وفي الوضع الداكن إن كان ثيمك يدعمه.
  • تغيّره أنت أو أي موظف في متجرك دون الرجوع إلى ملف كود.

وإن لم تجد الخيار، فاسأل مطور الثيم من تبويب الدعم الفني في صفحته: قد تكون الميزة في خطته، أو يكون لها إعداد لم تنتبه له. ولتعرف كيف تقيّم مرونة أي ثيم قبل شرائه، راجع معيار «التخصيص دون برمجة» في دليل اختيار ثيم سلة.

الشروط | لماذا لا يظهر لك حقل CSS؟

يحدد مركز مساعدة سلة ثلاثة شروط لتغيير تصميم المتجر بالكود (تخصيص الثيم باستخدام أكواد CSS وJS، آخر تحديث 22 أغسطس 2026):

  • الباقة: أن يكون متجرك على باقة برو أو سبيشل. وتعرض صفحة باقات سلة ميزة التخصيص عبر CSS في باقة برو وحدها بين الباقات المعلنة الأسعار، حتى 27 أكتوبر 2026.
  • الدومين: أن يكون لمتجرك دومين خاص، لا رابط سلة الافتراضي. تشرح سلة حجزه وربطه في إدارة دومين متجرك.
  • الصلاحية: أن يملك حسابك صلاحية الدخول إلى تصميم المتجر، إن كنت موظفًا في المتجر لا مالكه.

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

المكان | أين تضيف الكود في لوحة تحكم متجرك؟

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

لن نعيد هنا شرح أساسيات اللغة. تقدّم سلة دليلًا مبسطًا لتصميم متجرك باستخدام CSS (آخر تحديث 18 أغسطس 2026) يشرح بنية القاعدة، أي المحدِّد والخاصية والقيمة، وطريقة فتح أداة فحص العناصر في المتصفح. ما يلي هو ما لا يغطيه ذلك الدليل: كيف تعمل بأمان.

النسخة | كيف تجرّب الكود قبل أن يراه عملاؤك؟

تصل إلى الحقل من (تخصيص النسخة) في نسخة بعينها من الثيم. فلا تجرّب على النسخة المنشورة، بل على نسخة مكررة، وتأكد في الخطوة 3 أن متجرك المنشور لم يتغير:

الخطوة 1: في (تصميم المتجر)، كرّر النسخة المنشورة من ثيمك.

الخطوة 2: أضف الكود في النسخة الجديدة، ثم احفظ.

الخطوة 3: عاين النسخة الجديدة على الجوال والكمبيوتر، وافتح متجرك المنشور في نافذة أخرى لتتأكد أنه لم يتغير.

الخطوة 4: انشر النسخة الجديدة حين تطمئن، أو جدول نشرها في وقت تقل فيه الزيارات.

ويختلف عدد النسخ بحسب الباقة: نسختان في برو، و50 نسخة في سبيشل، بحسب إدارة الثيمات وتخصيصها في مركز مساعدة سلة. فإن كنت على برو، فاجعل إحدى النسختين للعرض والأخرى للتجربة.

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

المحدِّد | كيف تختار العنصر الذي تعدّله؟

المحدِّد هو الجزء الذي يخبر المتصفح أي عنصر تقصد. وكلما كان أضيق، قلّ احتمال أن يغيّر شيئًا لم تقصده.

ابدأ من أداة الفحص في المتصفح: اضغط بزر الفأرة الأيمن على العنصر، واختر (فحص)، ثم انظر إلى اسم الوسم والأصناف التي يحملها. وانظر أيضًا إلى الأصناف على وسم body في أعلى الصفحة.

في المتجر التجريبي لثيم ملاك مثلًا، تضيف سلة على وسم body صنفًا يدل على نوع الصفحة، فتحمل صفحة المنتج الصنف product-single. ويظهر زر الإضافة إلى السلة كمكوّن من مكونات سلة اسمه salla-add-product-button. بهذين الاسمين تكتب قاعدة لا تمس إلا زر صفحة المنتج:


/* زر الإضافة إلى السلة في صفحة المنتج فقط · 27 أكتوبر 2026 */

body.product-single salla-add-product-button {

  margin-block-start: 8px;

}

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

ثلاث قواعد أخرى للمحدِّد:

  • الجوال أولًا: ضع التعديل الخاص بالشاشات الصغيرة داخل استعلام وسائط مثل @media (max-width: 767px)، ثم جرّبه على جوالك فعلًا، لا على الكمبيوتر وحده.
  • الاتجاه: إن كان متجرك بلغتين، فاستخدم الخصائص المنطقية مثل margin-inline-start بدل margin-left، فتنقلب القاعدة تلقائيًا بين العربية والإنجليزية (شرح MDN للخصائص المنطقية).
  • الثبات: تجنّب المحدِّدات الطويلة التي تعتمد على ترتيب العناصر، مثل div > div:nth-child(3). أي تعديل في الثيم يغيّر الترتيب يكسرها.

5 عادات | كيف تمنع الكود من كسر تصميمك؟

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

علّق على كل كتلة وأرّخها. اكتب فوق كل كتلة سطرًا يقول ماذا تفعل ومتى أضفتها. بعد ستة أشهر لن تتذكر سبب كل سطر، ولن يعرفه أي مطور يعمل معك.

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

احترم التباين. يحتاج النص العادي إلى تباين لا يقل عن 4.5:1 مع خلفيته بحسب معيار WCAG 2.2. إن غيّرت لونًا، فافحصه في الوضعين الفاتح والداكن إن كان ثيمك يدعم الاثنين.

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

الأكواد الجاهزة | متى تنفعك ومتى تضرك؟

تجد على الإنترنت أكوادًا جاهزة لمتاجر سلة، مجانية ومدفوعة. بعضها مفيد، لكن كل كود منها كُتب لثيم معيّن، وغالبًا لإصدار معيّن منه. المحدِّد الذي يعمل في ثيم قد لا يجد عنصره في ثيم آخر، أو يجد عنصرًا مختلفًا يحمل الاسم نفسه.

قبل أن تلصق أي كود جاهز، اسأل خمسة أسئلة:

  • لأي ثيم كُتب، ولأي إصدار؟ وهل ذكر كاتبه تاريخه؟
  • هل تفهم ما يفعله كل سطر؟ إن لم يشرحه كاتبه، فاطلب الشرح أو لا تستخدمه.
  • هل يخفي شيئًا؟ ابحث فيه عن display: none، واسأل: ما الذي سيختفي من صفحتي؟
  • هل يعتمد على !important في أغلب أسطره؟ هذا يجعله صعب التعديل، ويغلب إعدادات ثيمك.
  • هل يحمّل ملفات من موقع خارجي، بسطر @import أو برابط داخل url()؟

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

ثم طبّق ما سبق: جرّب الكود الجاهز في نسخة غير منشورة، وافحص الصفحات التي يمسها على الجوال والكمبيوتر.

بعد كل تحديث | ماذا تراجع حين يتغير الثيم؟

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

  • اقرأ سجل التغييرات في صفحة الثيم على سلة، وابحث فيه عن الأجزاء التي يمسها كودك.
  • افتح على جوالك الصفحات التي يغيّرها كودك: الرئيسية، وصفحة منتج، وصفحة تصنيف، والسلة.
  • إن توقفت قاعدة عن العمل، فافحص العنصر من جديد وانسخ اسمه الحالي.
  • إن أضاف التحديث إعدادًا يفعل ما يفعله كودك، فاحذف الكود واستخدم الإعداد.

هذه المراجعة أسهل حين تكون كل كتلة معلّقًا عليها ومؤرخة، كما في العادة الثانية.

ملاك وأكواد CSS

هذا القسم عن ثيمنا، فطبّق عليه ما سبق.

في ملاك أكثر من 80 خيارًا للتحكم في المتجر دون برمجة، بحسب صفحته على سلة. فقبل أن تكتب كودًا لمتجر يعمل بملاك:

  • تصفّح إعدادات ملاك، وابحث عن الجزء الذي تريد تغييره.
  • للخط المخصص، استخدم «رابط الخط» و«اسم الخط» و«وزن الخط» بدل @import، كما في صفحة الخطوط والخلفية.
  • للوضع الداكن، ارفع «شعار المتجر في المظهر الداكن» بدل تلوين الشعار بالكود.

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

الأسئلة الشائعة

هل أستطيع إضافة CSS في باقة بلس؟

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

لماذا لا يظهر لي خيار (تخصيص عن طريق الـ CSS)؟

غالبًا لأن أحد الشروط الثلاثة ناقص: الباقة، أو الدومين الخاص، أو صلاحية تصميم المتجر. راجعها بالترتيب، ثم تواصل مع دعم سلة إن بقي الخيار مخفيًا.

هل يتوقف الكود عن العمل بعد تحديث الثيم؟

قد يتوقف، إذا غيّر التحديث اسم العنصر أو مكانه. راجع سجل التغييرات بعد كل تحديث، وافتح الصفحات التي يمسها كودك على جوالك.

هل يبطئ كود CSS متجري؟

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

هل الأكواد الجاهزة آمنة؟

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

هل أحتاج إلى مطور؟

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

خطوتك التالية

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

آخر مراجعة: 27 أكتوبر 2026.