دليل تخصيص تصميم المتجر باستخدام ثيم سيليا: شرح كامل بالصور

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

الوصول إلى صفحة تخصيص التصميم

للبدء في تخصيص تصميم متجرك:

1. من لوحة تحكم سلة، اذهب إلى المتجر وقنوات البيع ← تصميم المتجر
2. ستظهر لك جميع نسخ الثيم المثبتة (مسودة، مجدولة، منشورة)
3. من قائمة النقاط الثلاث (...) بجانب الثيم المنشور، اختر تخصيص النسخة

 ستفتح لك صفحة التخصيص الكاملة التي تتضمن 7 أقسام رئيسية نشرحها بالتفصيل.

القسم الأول: تخصيص عناصر الصفحة الرئيسية

الصفحة الرئيسية هي واجهة متجرك — ما يراه العميل أولاً. يمكنك إضافة وترتيب وتعديل عناصر متعددة لتكوين صفحة رئيسية احترافية.

كيف تضيف عنصر جديد

1. من تبويب عناصر الصفحة الرئيسية، اضغط إضافة عنصر جديد
2. اختر نوع العنصر من القائمة المتاحة
3. خصص إعدادات العنصر حسب احتياجك
4. اضغط حفظ وسيظهر العنصر في المعاينة فوراً

 العناصر المتاحة وكيفية استخدامها

إليك أهم العناصر التي يمكنك إضافتها للصفحة الرئيسية مع ثيم سيليا:

1. صور السلايدر المتحركة (الكاروسيل المحسّن)

السلايدر هو أول ما يراه الزائر. يمكنك إضافة حتى 10 صور متحركة بأبعاد 900×600 بكسل مع عنوان رئيسي ونص ثانوي لكل شريحة.

💡 نصيحة لسلايدر ثيم سيليا: استخدم صور عالية الجودة بألوان متناسقة مع هوية متجرك. أضف نص واضح ومقروء مع زر CTA (مثل "تسوق الآن"). لا تكثر من الشرائح — 3-5 شرائح كافية.

2. الروابط السريعة

أيقونات مع روابط سريعة لأهم التصنيفات أو الصفحات. يدعم أكثر من 50 رابط. مثالي لتوجيه العملاء مباشرة لما يبحثون عنه.

3. المنتجات المميزة

اعرض منتجاتك الأفضل مبيعاً أو أحدث الوصولات. يمكنك التحكم في طريقة العرض (شبكة أو تمرير) وعدد المنتجات المعروضة.

 4. الصور المربعة (بانرات)

بانرات بصرية قابلة للنقر. أضف صورة مع عنوان وعنوان فرعي ورابط لتصنيف أو منتج أو صفحة.

5. البانر العريض

بانر بعرض الصفحة الكاملة بأبعاد 728×90 بكسل (قابل للتعديل). مثالي للإعلان عن عروض أو منتجات جديدة.

6. آراء العملاء

اعرض تقييمات عملائك الحقيقية. اختر نوع العرض (الأحدث، الأعلى تقييماً، أو عشوائي) وعدد التقييمات المعروضة (حتى 30).

 💡 لماذا آراء العملاء مهمة: 72% من المتسوقين لا يشترون قبل قراءة التقييمات. عنصر آراء العملاء في الصفحة الرئيسية يبني الثقة فوراً مع الزوار الجدد.

7. مميزات المتجر

اعرض حتى 3 ميزات مع أيقونة ونص رئيسي وثانوي. مثال: "شحن مجاني فوق 200 ريال"، "إرجاع خلال 14 يوم"، "منتجات أصلية 100%".

8. فيديو يوتيوب

الصق رابط مشاركة فيديو يوتيوب ليظهر مضمناً في الصفحة الرئيسية. مثالي لفيديو تعريفي بالمتجر أو عرض المنتجات.

9. خلفية ثابتة مع نص

صورة خلفية مع نص وزر إجراء (CTA). تربط بمنتج أو تصنيف أو عرض أو صفحة. مثالية للفصل بين أقسام الصفحة بتصميم جذاب.

10. منتجات من وسم

اعرض منتجات تحمل وسماً (Tag) محدداً. عندما تضيف الوسم لمنتجات جديدة، تظهر تلقائياً في هذا القسم. مفيد جداً لمجموعات مثل "وصل حديثاً" أو "الأكثر مبيعاً".

إدارة العناصر الموجودة

لكل عنصر في الصفحة الرئيسية، يمكنك من قائمة النقاط الثلاث:

القسم الثاني: تخصيص قوائم المتجر (الهيدر والفوتر)

الهيدر هو شريط التنقل العلوي الذي يظهر في كل صفحة. الفوتر هو القسم السفلي. كلاهما ضروريان للتنقل وبناء الثقة.

تخصيص الهيدر في ثيم سيليا

• الشعار: ارفع شعارك بصيغة PNG شفافة (أبعاد مثالية: 400×120 بكسل)
• القائمة الرئيسية: أضف التصنيفات الأساسية (لا تتجاوز 7 عناصر). القوائم الفرعية تظهر عند المرور بالماوس
• شريط الإعلانات: نص قصير في أعلى الصفحة لعرض العروض أو معلومات الشحن
• أيقونات: البحث، السلة، المفضلة، الحساب — كلها مفعّلة افتراضياً

تخصيص الفوتر

• وصف المتجر: فقرة مختصرة عن علامتك التجارية
• روابط سريعة: من نحن، سياسة الإرجاع، الشروط والأحكام، سياسة الخصوصية
• وسائل التواصل: أيقونات انستجرام، تويتر، سناب شات، تيك توك
• شارات الدفع: شعارات مدى، Visa، Apple Pay، تمارا
• معلومات التواصل: رقم واتساب، بريد إلكتروني

💡 نصيحة: الفوتر المكتمل يبني ثقة العملاء الجدد. متجر بدون سياسة إرجاع واضحة أو معلومات تواصل يبدو مشبوهاً. تأكد من ملء كل قسم.

القسم الثالث: خيارات تصميم الثيم

هذا القسم يتحكم بالشكل العام للمتجر — الألوان، الخطوط، وطريقة عرض المنتجات.

الألوان

في ثيم سيليا يمكنك تغيير:

• اللون الرئيسي: يُستخدم للأزرار، الروابط، والعناصر التفاعلية. اختره ليتوافق مع شعارك
• اللون الثانوي: للتمييز والعناصر الثانوية
• لون الخلفية: الأبيض هو الأكثر شيوعاً للمتاجر
• لون النصوص: تأكد من تباين كافٍ مع الخلفية للقراءة السهلة

الخطوط

ثيم سيليا يدعم مجموعة من الخطوط العربية الاحترافية. القواعد:

• اختر خطاً واحداً للعناوين وآخر للنصوص
• الخطوط الواضحة أهم من المزخرفة
• تجنب الخطوط الرفيعة جداً على الشاشات الصغيرة

خيارات عرض المنتجات

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

القسم الرابع: التخصيص بالكود (CSS/JavaScript)

للتخصيصات المتقدمة التي لا تتوفر في الإعدادات، يمكنك إضافة أكواد CSS أو JavaScript مخصصة.

الطريقة التقليدية (يدوية)

1. من صفحة تخصيص الثيم، اختر التخصيص عبر الكود
2. أضف كود CSS في حقل CSS المخصص
3. أضف كود JavaScript في حقل JS المخصص
4. اضغط حفظ

الطريقة الأسهل: مولد الأكواد الذكي في سيليا ⭐

بدلاً من كتابة الكود يدوياً، استخدم مولد الأكواد الذكي في منصة سيليا:

1. اذهب إلى مولد الأكواد في منصة سيليا
2. اكتب ما تريد تعديله بالعربية. مثال: "غيّر لون زر أضف للسلة إلى أخضر"
3. المولد الذكي يحلل طلبك ويولد كود CSS أو JavaScript نظيف وآمن
4. انسخ الكود والصقه في محرر الأكواد في سلة

💡 لماذا مولد الأكواد أفضل: يولد كوداً نظيفاً بدون !important، متوافق مع ثيم سيليا تحديداً، ولا يحتاج أي معرفة برمجية. يمكنك أيضاً استخدام المحدد البصري لاختيار العنصر من المتجر مباشرة وتعديله.

القسم الخامس: المعاينة والنشر

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

• معاينة: شاهد كيف يبدو المتجر بالتعديلات الجديدة
• تعديل: عدّل على العناصر
• تكرار: أنشئ نسخة من التصميم الحالي للتجربة بدون المخاطرة
• إخفاء/حذف: تحكم في العناصر

حالات الثيم

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

قائمة مراجعة التصميم ✓

قبل نشر تصميمك، تأكد من:

1. ☐ الشعار: واضح ومقروء على خلفيات مختلفة
2. ☐ الألوان: متناسقة ومتوافقة مع الهوية البصرية
3. ☐ الخطوط: واضحة ومقروءة على الجوال والكمبيوتر
4. ☐ السلايدر: صور عالية الجودة مع نص واضح وأزرار CTA
5. ☐ المنتجات: الصور موحدة الأبعاد والأسعار معروضة بوضوح
6. ☐ الفوتر: مكتمل بالسياسات ومعلومات التواصل ووسائل التواصل الاجتماعي
7. ☐ الجوال: تصفح المتجر كاملاً من جوالك — 80% من العملاء يتصفحون من الجوال
8. ☐ السرعة: اختبر على PageSpeed Insights — النتيجة يجب أن تكون 70+
9. ☐ الروابط: كل الروابط تعمل (القائمة، التصنيفات، صفحات السياسات)
10. ☐ التقييمات: عنصر آراء العملاء مفعّل ويعرض تقييمات حقيقية

خدمات إضافية في منصة سيليا

إذا احتجت مساعدة في التصميم، منصة سيليا توفر عدة أدوات:

• مولد الأكواد الذكي: ولّد CSS/JavaScript مخصص بالعربية بدون برمجة
• المساعد الآلي: اسأل عن أي شيء يخص ثيم سيليا واحصل على إجابة فورية
• مجتمع سيليا: اطرح سؤالك واحصل على مساعدة من تجار آخرين يستخدمون ثيم سيليا
• توثيق الثيم: مرجع تفصيلي لكل إعدادات ثيم سيليا