// سلة · زد · كود CSS مخصص
أكواد CSS مجانية لسلة وزد: خلّ متجرك يبان بثيم مدفوع بدون ما تدفع ريال
أكواد CSS مجانية لسلة وزد هي أسرع طريقة تجعل متجرك يبدو احترافياً دون شراء ثيم بمئات الريالات. تفتح متجرك على الثيم الأساسي فتجده يشبه عشرات المتاجر الأخرى، والمشكلة في الغالب ليست في الثيم نفسه بل في التفاصيل: بطاقات المنتجات، الأزرار، الظلال، وحركة خفيفة عند التمرير. وكلها تُحل بنحو ستين سطراً من CSS.
الإجابة المختصرة: انسخ من أكواد CSS مجانية لسلة وزد الكود الخاص بثيمك (رائد في سلة أو سوفت في زد)، والصقه في خانة الكود المخصص، ثم راجع المتجر على الجوال والكمبيوتر. إن لم تدعم باقتك الكود المخصص فاستخدم إعدادات الثيم في القسم الأخير.
في هذا الدليل من أكواد CSS مجانية لسلة وزد ستجد كوداً جاهزاً لثيم رائد في سلة، وآخر لثيم سوفت في زد، مع طريقة تعديلهما على ألوان علامتك وتخصيص متجر سلة وتعديل ثيم زد بخطوات بسيطة. وهما الثيمان الأكثر بحثاً عند أصحاب المتاجر: «ثيم رائد سلة» و«ثيم سوفت زد».
الأكواد مجانية فعلاً: لا تسجيل ولا اشتراك ولا قائمة بريدية. وكل selector فيها راجعته على الـ HTML الحقيقي لمتجرين يعملان الآن، فلا توجد قواعد مكتوبة بالتخمين. وإن كنت تبحث عن أكواد CSS جاهزة لسلة تنسخها وتجربها مجاناً على ثيم رائد سلة، فهذا الدليل لك.
هل تحتاج فعلاً إلى ثيم مدفوع لمتجرك؟
الثيم المدفوع يمنحك أقساماً إضافية وخيارات أكثر، لكنه لا يصنع هوية متجرك. ما يصنع الفارق في نظر الزائر أربعة أمور: بطاقات منتجات متناسقة، أزرار شراء بارزة، ألوان ثابتة من شعارك، وسرعة تحميل جيدة. وهذه كلها تُنجز بكود خفيف فوق الثيم الذي تملكه.
ويبقى للثيم المدفوع مكانه إن احتجت إلى هيكل مختلف للصفحة أو أقسام غير موجودة. أما إن كان هدفك مظهراً أكثر احترافية فقط، فجرّب أكواد CSS مجانية لسلة وزد أولاً، فكل ريال توفره في التصميم تستطيع توجيهه إلى الإعلانات.
مقارنة سريعة: أكواد CSS مجانية لسلة وزد أم الإعدادات أم الثيم المدفوع؟
| الخيار | التكلفة | الصعوبة | يناسب من |
|---|---|---|---|
| أكواد CSS مخصصة | مجانية | سهلة (نسخ ولصق) | من يريد مظهراً أفضل على ثيمه الحالي |
| إعدادات الثيم فقط | مجانية | سهلة جداً | من باقته لا تدعم CSS مخصصاً |
| ثيم مدفوع | تختلف بحسب الثيم | متوسطة | من يحتاج أقساماً وهيكلاً جديداً |
| تصميم مخصص بالكامل | بحسب نطاق العمل | يحتاج مطوراً | من يريد هوية فريدة للمتجر |
قبل تطبيق أكواد CSS مجانية لسلة وزد: أربعة أمور مهمة
- الباقة: إضافة CSS مخصص تتطلب في الغالب باقة تدعمها (راجع باقتك في سلة أو زد، فالشروط قد تتغير). إن لم تجد خانة الكود المخصص فانتقل إلى قسم الحلول بدون كود.
- نسخة احتياطية: انسخ أي كود موجود لديك في خانة CSS إلى ملف نصي قبل أي تعديل.
- الاختبار: افتح المتجر بعد الحفظ على الجوال والكمبيوتر، وتأكد من الصفحة الرئيسية وصفحة المنتج والسلة.
- السرعة: قس سرعة متجرك عبر PageSpeed Insights قبل التعديل وبعده.
تجد خانة الكود المخصص عادة ضمن إعدادات تخصيص المظهر في لوحة التحكم، وقد يختلف اسمها ومسارها بحسب تحديثات المنصة. وللتفاصيل الرسمية راجع توثيق سلة للمطورين.
أكواد CSS جاهزة لثيم رائد سلة مجاناً
إن كنت تستخدم ثيم رائد سلة فهذا أول كود في أكواد CSS مجانية لسلة وزد. كُتب على الأصناف الفعلية لمكوّنات سلة (مثل s-product-card-entry وs-button-btn)، ويقرأ لون علامتك من المتغير --color-primary الذي يضبطه الثيم، فلا تحتاج إلى تغيير اللون إلا إن أردت لوناً مختلفاً. هذه الأصناف مشتركة بين ثيمات سلة المبنية على Twilight، لذلك قد يعمل على غير رائد أيضاً.
/* ===== Kx Skin | سلة - ثيم رائد (Twilight) ===== */
:root{
--kx-brand: var(--color-primary, #0f766e);
--kx-radius: 16px;
--kx-shadow: 0 6px 20px rgba(16,24,40,.08);
--kx-shadow-hover: 0 14px 32px rgba(16,24,40,.16);
}
/* بطاقات المنتجات */
.s-product-card-entry.s-product-card-vertical{
display: flex;
flex-direction: column;
border-radius: var(--kx-radius);
overflow: hidden;
background: #fff;
box-shadow: var(--kx-shadow);
transition: transform .25s ease, box-shadow .25s ease;
}
.s-product-card-entry.s-product-card-vertical:hover{
transform: translateY(-4px);
box-shadow: var(--kx-shadow-hover);
}
.s-product-card-image{ overflow: hidden; }
.s-product-card-image-contain{ transition: transform .5s ease; }
.s-product-card-entry:hover .s-product-card-image-contain{ transform: scale(1.05); }
.s-product-card-content-title a{ font-weight: 700; line-height: 1.6; }
.s-product-card-price{ font-weight: 800; color: var(--kx-brand); }
/* أزرار الإضافة للسلة (بدون أزرار الأيقونات مثل المفضلة) */
.s-button-element.s-button-btn{
border-radius: 12px;
font-weight: 700;
transition: transform .15s ease, box-shadow .2s ease;
}
.s-button-element.s-button-btn:active{ transform: scale(.97); }
.s-button-element.s-button-btn.s-button-solid:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.18); }
/* عناوين الأقسام: خط صغير بلون العلامة */
.s-block__title h2,
.s-slider-block__title h2{ position: relative; padding-bottom: 10px; }
.s-block__title h2::after,
.s-slider-block__title h2::after{
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
width: 48px;
height: 3px;
border-radius: 3px;
background: var(--kx-brand);
}
/* وصول أفضل بلوحة المفاتيح */
a:focus-visible, button:focus-visible{ outline: 2px solid var(--kx-brand); outline-offset: 2px; }
/* احترام من يفضّل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
.s-product-card-entry, .s-product-card-image-contain, .s-button-element.s-button-btn{ transition: none; }
.s-product-card-entry:hover, .s-product-card-entry:hover .s-product-card-image-contain{ transform: none; }
}ماذا يفعل كود ثيم رائد سلة؟
- يجعل بطاقة المنتج بحواف مستديرة وظل خفيف، وترتفع قليلاً عند المرور عليها.
- يكبّر صورة المنتج تكبيراً بسيطاً عند التمرير.
- يبرز السعر بلون العلامة بخط ثقيل.
- يمنح الأزرار شكلاً موحداً وملمساً عند الضغط.
- يضيف خطاً صغيراً تحت عناوين الأقسام.
أكواد CSS مجانية لثيم سوفت زد
إن كان متجرك على ثيم سوفت زد فهذا ثاني كود بين أكواد CSS مجانية لسلة وزد في هذا الدليل. هو مكتوب على أصناف ثيم سوفت كما تظهر في متجر حقيقي (مثل product-item وsection-title وbtn-primary)، ويقرأ لون المتجر من المتغير --primary-color. لم أفرض لوناً على الأزرار، فتبقى بلون ثيمك وأنا أضبط الشكل فقط.
/* ===== Kx Skin | زد - ثيم سوفت ===== */
:root{
--kx-brand: var(--primary-color, #0f766e);
--kx-radius: 16px;
--kx-shadow: 0 6px 20px rgba(16,24,40,.08);
--kx-shadow-hover: 0 14px 32px rgba(16,24,40,.16);
}
/* مساحة صغيرة حتى لا يُقصّ ظل البطاقة داخل السلايدر */
.products-slider-wrapper{ padding-block: 8px; }
/* بطاقات المنتجات */
.product-item{
background: #fff;
border-radius: var(--kx-radius);
overflow: hidden;
box-shadow: var(--kx-shadow);
transition: transform .25s ease, box-shadow .25s ease;
}
.product-item:hover{
transform: translateY(-4px);
box-shadow: var(--kx-shadow-hover);
}
.product-item .box-1-1 img{ transition: transform .5s ease; }
.product-item:hover .box-1-1 img{ transform: scale(1.05); }
.product-item .product-title{ font-weight: 700; line-height: 1.6; }
.product-item .product-price{ font-weight: 800; }
.product-item .product-prev-price{ opacity: .7; }
/* أزرار الإضافة للسلة واختيار الخيارات */
.btn.btn-primary{
border-radius: 12px;
font-weight: 700;
transition: transform .15s ease, box-shadow .2s ease;
}
.btn.btn-primary:active{ transform: scale(.97); }
.btn.btn-primary:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.18); }
/* عناوين الأقسام: خط صغير بلون العلامة */
.section-title{ position: relative; padding-bottom: 10px; }
.section-title::after{
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
width: 48px;
height: 3px;
border-radius: 3px;
background: var(--kx-brand);
}
/* وصول أفضل بلوحة المفاتيح */
a:focus-visible, button:focus-visible{ outline: 2px solid var(--kx-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
.product-item, .product-item .box-1-1 img, .btn.btn-primary{ transition: none; }
.product-item:hover, .product-item:hover .box-1-1 img{ transform: none; }
}هل أكواد CSS مجانية لسلة وزد مجرّبة فعلاً؟
نعم، فكل كود من أكواد CSS مجانية لسلة وزد هنا اختبرته بالمعنى الآتي: أخذتُ الصفحة الرئيسية الحقيقية لمتجر بثيم رائد على سلة، وأخرى لمتجر بثيم سوفت على زد، وتأكدت أن كل selector في الكودين يطابق عناصر موجودة فعلاً (بطاقات المنتجات، أزرار الإضافة للسلة، عناوين الأقسام). لا يوجد selector يشير إلى عنصر غير موجود.
ما لا أعدك به: أن يبقى الكود صالحاً للأبد. إن غيّرت المنصة أسماء الأصناف في تحديث لاحق فستحتاج إلى مراجعة، وهذا طبيعي في أي كود مخصص. جرّب أولاً، واحتفظ بنسخة احتياطية.
كيف تضبط أكواد CSS مجانية لسلة وزد على متجرك في ثلاث خطوات
- غيّر اللون (اختياري): في سلة وزد يُقرأ لون المتجر تلقائياً من إعدادات الثيم. عدّل
--kx-brandفقط إن أردت لوناً مختلفاً لخطوط العناوين والأسعار. - تحقق من اسم العنصر: افتح متجرك على الكمبيوتر، وانقر بزر الفأرة الأيمن على بطاقة منتج، ثم اختر «فحص» (Inspect). سترى اسم الصنف (class) الذي يستخدمه ثيمك. إن اختلف عن الموجود في الكود فاستبدله.
- ابدأ بجزء صغير: الصق قاعدة واحدة (بطاقات المنتجات مثلاً)، وتأكد من النتيجة، ثم أضف ما بعدها. بهذه الطريقة تعرف مباشرة أي قاعدة أحدثت مشكلة.
إن لم تعمل قاعدة معيّنة، فالسبب في الغالب أن اسم الصنف تغيّر في إصدار ثيمك. وإن احتجت إلى هوية كاملة للمتجر بدل تعديلات متفرقة، فهذا ما أنفّذه ضمن خدمة تصميم متجر سلة وزد.
تحسين متجرك في سلة وزد بدون أكواد
إن كانت باقتك لا تدعم أكواد CSS مجانية لسلة وزد، أو لا تريد المخاطرة بتعديل الكود، فهذه إعدادات متاحة داخل الثيم نفسه وتحقق جزءاً كبيراً من النتيجة:
- ألوان العلامة: اضبط اللون الرئيسي من إعدادات الثيم ليطابق شعارك، واستخدمه في كل مكان بدل ألوان متعددة.
- خط واحد: اختر خطاً عربياً واضحاً من خيارات الثيم، وتجنّب الجمع بين خطين أو ثلاثة.
- صور منتجات موحدة: اجعل كل الصور بنسبة واحدة (مربعة مثلاً) وخلفية متقاربة. هذا وحده يرفع الانطباع كثيراً.
- ترتيب الصفحة الرئيسية: ابدأ بالبنر، ثم الأقسام الأكثر مبيعاً، ثم الأحدث، واحذف الأقسام الفارغة.
- بنرات واضحة: صمّمها بأداة مجانية مثل Canva، وبنص قصير وزر واحد.
- ضغط الصور: حوّلها إلى WebP واضغطها (أداة Squoosh مجانية) لتفتح الصفحة أسرع، وراجع أساسيات الأداء على web.dev.
- طرق الدفع المحلية: فعّل ما يناسب المشتري السعودي مثل مدى وتمارا وتابي وSTC Pay، فغياب وسيلة الدفع المفضلة سبب شائع لترك السلة.
- عناصر الثقة: فعّل شارات الشحن والدفع والاسترجاع، وأضف توثيق «معروف» إن كان متجرك مسجلاً فيه، وأظهر أن الأسعار شاملة ضريبة القيمة المضافة.
أخطاء شائعة عند تطبيق أكواد CSS مجانية لسلة وزد
- لصق كود ثيم لثيم آخر: أسماء الأصناف تختلف، فلن تعمل القواعد أو ستعمل بشكل مشوّه.
- استخدام !important في كل مكان: يسبب تعارضات يصعب تتبعها لاحقاً. استخدمه فقط عند الضرورة.
- حركات كثيرة: حركة خفيفة تُشعر الزائر بالجودة، أما الكثير منها فيشتت ويبطئ الجوال.
- تجاهل الجوال: أغلب زوار المتاجر من الجوال، فاختبر عليه أولاً.
- ترك الكود دون تعليقات: بعد شهور لن تتذكر ما غيّرته. اكتب تعليقاً قصيراً فوق كل جزء.
أسئلة شائعة عن أكواد CSS لسلة وزد
أين أضع أكواد CSS جاهزة لسلة بعد نسخها؟
ضعها في خانة الكود المخصص (Custom CSS) ضمن إعدادات تخصيص المظهر في لوحة تحكم متجرك، ثم احفظ وراجع المتجر. قد يختلف اسم الخانة ومسارها بحسب تحديثات المنصة وباقتك.
هل تناسب هذه الأكواد ثيم رائد سلة بكل إصداراته؟
كُتبت الأكواد على أصناف مشتركة بين ثيمات سلة المبنية على Twilight، لكن أي تحديث للثيم قد يغيّر أسماء الأصناف. اختبر المتجر بعد كل تحديث كبير.
هل أكواد CSS مجانية لسلة وزد تبطّئ متجري؟
الكود قصير وخفيف ويعتمد على الانتقالات فقط، فأثره في السرعة ضعيف جداً. الأثقل عادة هي الصور الكبيرة والسكربتات الخارجية.
هل يتأثر الكود عند تحديث الثيم؟
قد يحدث ذلك إن غيّر التحديث أسماء الأصناف. احتفظ بنسخة من الكود وراجع المتجر بعد أي تحديث كبير.
هل يعمل الكود على ثيم آخر غير رائد وسوفت؟
الفكرة نفسها تنطبق، لكن عليك استبدال أسماء الأصناف بما يستخدمه ثيمك عبر أداة الفحص (Inspect).
هل يعمل الكود مع الواجهة العربية (RTL)؟
نعم، تستخدم الأكواد خصائص منطقية مثل inset-inline-start فتعمل من اليمين إلى اليسار دون تعديل.
هل أحتاج إلى خبرة برمجية؟
لا، يكفي النسخ واللصق وتغيير قيمة اللون.
ما الفرق بين هذا الكود وشراء ثيم مدفوع؟
الكود يحسّن الشكل فوق الثيم الذي تملكه، أما الثيم المدفوع فيضيف أقساماً وخيارات جديدة.
الخلاصة: جرّب الكود اليوم
جرّب أكواد CSS مجانية لسلة وزد على متجرك الآن، ولا تنسَ النسخة الاحتياطية، فبهذه الأكواد يصبح تخصيص متجر سلة وتعديل ثيم زد أسهل مما تتوقع. وإن كان عندك ثيم غير رائد وسوفت فاكتب اسمه في رسالتك وأجهّز لك أكواد CSS جاهزة لسلة أو زد تناسبه.
تدير حملات إعلانية ممولة؟ اطّلع أيضاً على صفحات الهبوط للإعلانات.
تريد متجراً بهوية كاملة لا تعديلات متفرقة؟
أخصّص متاجر سلة وزد بهوية فريدة، وأحسّن صفحة المنتج والسلة وأربط تتبع الإعلانات. أرسل لي رابط متجرك وسأخبرك بصراحة بما يستحق التعديل أولاً.