التوثيق الفني لثيم بلّورا — منصة سلة

دليل التهيئة الفنية وتخصيص الواجهة.

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

01

مرحباً بك في ثيم بلّورا

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

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

02

البدء السريع

  1. فعّل ثيم بلّورابعد تثبيت الثيم على متجرك، اجعله الثيم النشط عندما تكون جاهزاً للمعاينة.
  2. افتح تخصيص الثيممن لوحة سلة ادخل على تخصيص الثيم حتى تعدّل الإعدادات والأقسام بدون برمجة.
  3. اضبط نظام التصميمابدأ بكثافة الزجاج والحركة وعرض المحتوى والزوايا والمسافات. الإعدادات الافتراضية مناسبة لمعظم المتاجر.
  4. جهّز الهيدرحدد هل الهيدر ثابت أو شفاف، وأضف الشريط الإعلاني إذا احتجته.
  5. رتّب أقسام الصفحة الرئيسيةاختر واجهة رئيسية واحدة، ثم أضف المنتجات والبانرات والماركات والتقييمات حسب احتياج متجرك.
  6. راجع قبل النشراختبر الجوال، الوضع الليلي، الروابط، صور الخيارات، المنتجات غير المتوفرة، وأي عدّاد عروض مستخدم.

03

إعدادات تصميم بلّورا

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

الإعدادالخياراتإرشادات الاستخدام
كثافة تأثير الزجاجخفيف / متوسط / غامرخفيف للوضوح العالي، متوسط للتوازن المعياري، غامر لتعزيز التأثير الزجاجي.
قوة الحركات والانتقالاتإيقاف / خفيفة / كاملةخفيفة للمظهر الهادئ، وكاملة للتفاعل الحركي المتكامل.
وضع التأثيرات المخفّضةتشغيل / إيقافتعطيل تأثيرات التمويه والحركات والانتقالات وعرض 3D. مخصص للكتالوجات الكبيرة أو الأجهزة محدودة الموارد لرفع كفاءة المعالجة.
WebGLتشغيل / إيقافمفتاح التحكم الرئيسي في محرك العرض ثلاثي الأبعاد. يُوصى بإيقافه في حال عدم استخدام نماذج ثلاثية الأبعاد.
الانتقالات السائلةتشغيل / إيقافتفعيل الحركة الانسيابية لصور الواجهة المدعومة. عند التعطيل يتم اعتماد انتقالات سلة القياسية.
عرض محتوى الصفحةقياسي 1280 / عريض 1536 / كامل العرضالقياسي مناسب لمعظم المتاجر. العريض أو الكامل مخصص لعرض البانرات والصور البصرية عالية الدقة.
شكل الزواياحادة / ناعمة / دائريةتحديد نصف قطر الانحناء (Border Radius) للبطاقات والأزرار والنوافذ المنبثقة عبر كامل المتجر.
كثافة المسافاتمضغوط / مريح / واسعمضغوط لزيادة كثافة عرض العناصر، مريح كإعداد متوازن افتراضي، واسع لزيادة الهوامش والفراغات البصرية.
الوضع الليلي كافتراضيتشغيل / إيقافتعيين الوضع الداكن كنمط بدء افتراضي للجلسات الجديدة، مع احتفاظ الزائر بإمكانية التبديل اليدوي.

04

الهيدر والتنقل

تثبيت القائمة الرئيسية

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

الهيدر الشفاف

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

الشريط الإعلاني

إدراج نص تنبيهي موجز أعلى شريط التنقل مع رابط توجيه اختياري؛ ويختفي الشريط تلقائياً عند ترك حقل النص فارغاً.

الروابط المهمة وقائمة المزيد

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

على الجوال: القائمة مصممة للتصفح باللمس. يُوصى بمراجعة أطوال عناوين التصنيفات ومستويات التفرع الشجري قبل النشر.

05

الوضع الليلي

يدعم ثيم بلّورا الوضعين الفاتح والداكن. يمكن تعيين الوضع الداكن كنمط افتراضي للزيارات الجديدة، مع إتاحة التبديل اليدوي للزائر وحفظ تفضيله تلقائياً في المتصفح.

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

06

أقسام الصفحة الرئيسية

تتم إضافة وترتيب أقسام بلّورا من خلال لوحة تخصيص الثيم وفق الاحتياج التجاري؛ ويُوصى معمارياً بالتركيز على الأقسام المباشرة لتحسين زمن تحميل الصفحة وسرعة الاستجابة.

بلّورا — سلايدر رئيسي ثلاثي الأبعادواجهة رئيسية بصور كمبيوتر وجوال، عنوان ووصف وزر، مع نموذج 3D اختياري.
بلّورا — سلايدر رئيسي كلاسيكيواجهة صور تقليدية مع عنوان ووصف وطبقة تعتيم اختيارية.
بلّورا — روابط سريعة زجاجيةروابط أو تصنيفات سريعة مع أيقونات وتحكم في الأسهم والدمج مع القسم السابق.
بلّورا — منتجات متحركة بخلفية مميّزةصورة خلفية، عنوان ووصف، منتجات مختارة، ورابط «عرض الكل» اختياري.
بلّورا — بانرات مربعة زجاجيةحتى 5 بانرات مع صورة ورابط وعنوان ووصف.
بلّورا — واجهة الماركاتاختيار ماركات محددة وعرضها في قسم مستقل.
بلّورا — آراء العملاءتقييمات تكتبها أنت: الاسم والصورة والنجوم والنص.
بلّورا — تقييمات المتجريعرض تقييمات حقيقية من سلة تلقائياً، مع خيارات للعدد والنوع وخصوصية معلومات العميل.
بلّورا — مميزات المتجرحتى 6 مزايا مع أيقونة وعنوان ووصف ولون خلفية.
بلّورا — عروض الفلاش مع العدّادعنوان ووصف ومنتجات وموعد انتهاء، مع عرض شريط متحرك أو شبكة.
بلّورا — قسم الفيديوعنوان ووصف ورابط فيديو يوتيوب.
بلّورا — أحدث المنتجاتقسم بسيط يبرز المنتجات الجديدة.
بلّورا — مقالات المدونةمقالات مختارة مع صورة ومقتطف وتاريخ ورابط عرض الكل.
بلّورا — بانر ثابتبانر كمبيوتر مع صورة جوال اختيارية ورابط ونص بديل.
بلّورا — منتجات مميزةثلاثة أنماط عرض تشمل منتجاً رئيسياً، تبويبات، شريطاً أو شبكة، وأعمدة بمنتجات مميزة.
بلّورا — فيديو يوتيوبقسم خفيف يعتمد على معرّف فيديو يوتيوب.
بلّورا — شريط صور متحركصور قابلة للربط مع نص بديل لكل صورة.
بلّورا — شريط منتجات متحركمنتجات مختارة مع عنوان ووصف وعدد معروض ورابط عرض الكل.
بلّورا — شبكة منتجاتتشكيلة منتجات ثابتة داخل شبكة.
بلّورا — خلفية بارالاكسصورة خلفية مع عنوان وزر اختياري وطبقة تعتيم اختيارية.
بلّورا — صور مربعةحتى 6 صور مربعة مع نص ورابط لكل عنصر.
مهم: السلايدر الرئيسي الكلاسيكي والسلايدر الرئيسي ثلاثي الأبعاد يؤديان نفس دور الواجهة الرئيسية. في أغلب المتاجر اختر واحداً فقط حتى ما تظهر واجهتان كبيرتان وراء بعض.

07

السلايدر الزجاجي التفاعلي

في لوحة التخصيص يظهر باسم بلّورا — سلايدر رئيسي ثلاثي الأبعاد. تقدر تستخدمه كبنر عادي بدون أي نموذج 3D، أو تضيف نموذجاً للشريحة التي تحتاجه.

الحقلالاستخدام
صورة الشريحة — كمبيوترالمقاس المقترح داخل الثيم 1600×1000 بكسل.
صورة الشريحة — جوالالمقاس المقترح 800×1200 بكسل بنسبة 2:3. استخدم تصميم طولي مستقل بدل قص صورة الكمبيوتر.
ملف GLB/GLTFاختياري. استخدم رابطاً مباشراً عاماً عبر HTTPS. إذا تركته فارغاً تعمل الشريحة كبنر عادي.
العنوان والوصفيدعمان أكثر من لغة من إعدادات سلة.
نص الزرمثل «تسوق الآن» أو «اكتشف العروض».
رابط الزراختيار مباشر من سلة بدل كتابة الروابط يدوياً.

وجهات زر الدعوة للإجراء

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

نصيحة تصميم للجوال

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

08

المنتجات والعرض ثلاثي الأبعاد

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

  • مفتاح WebGL: شغّله إذا تستخدم 3D في الواجهة أو صفحة المنتج. أوقفه إذا ما تحتاجه.
  • صفحة المنتج: إذا أضفت وسائط ثلاثية الأبعاد مدعومة للمنتج في سلة، يظهر خيار العرض ثلاثي الأبعاد عندما تكون متاحة.
  • الواجهة الرئيسية: حقل النموذج يقبل رابط ملف GLB/GLTF مباشر.
  • الاستضافة: الرابط لازم يكون عاماً عبر HTTPS ويسمح للمتصفح بتحميل الملف من المتجر. إذا مزود الاستضافة يمنع التحميل من نطاق آخر، ما راح يظهر النموذج.
  • وضع التأثيرات المخفّضة: يوقف 3D والمؤثرات الثقيلة لكل الزوار.
للأداء: استخدم ملفات 3D محسّنة قدر الإمكان، ولا تضف نموذجاً لكل شريحة إذا الصورة العادية تؤدي الغرض.

09

صفحة المنتج

مسار التنقل

تقدر تظهر أو تخفي مسار التنقل في صفحة المنتج، وكذلك في صفحة قائمة المنتجات.

عرض صور المنتج

اختر Contain لإظهار الصورة كاملة، أو Cover لملء المساحة مع احتمال قص الأطراف.

تكبير الصور

فعّل تكبير صور المنتج إذا كانت صورك عالية الدقة ويستفيد العميل من رؤية التفاصيل.

خيارات بصور

إذا استخدمت خيارات مثل المقاس وربطتها بصور، تظهر الخيارات بصرياً ويقدر العميل يختارها مباشرة.

الإضافة للسلة

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

نفاد المخزون

يمكن إظهار زر «أعلمني عند التوفر» في بطاقات المنتجات غير المتوفرة.

الوسوم

تقدر إظهار وسوم المنتج أو إخفاءها من إعدادات الثيم.

3D عند توفره

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

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

10

بطاقات المنتجات والعروض

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

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

11

تجهيز الصور والبانرات

تعتمد دقة العرض وسرعة التحميل على مطابقة أبعاد الصور المرفوعة مع نسب العرض المحددة لكل قسم داخل لوحة التخصيص.

القسمالمقاس المقترح في الثيم
السلايدر الرئيسي ثلاثي الأبعاد — كمبيوتر1600×1000
السلايدر الرئيسي ثلاثي الأبعاد — جوال800×1200
السلايدر الرئيسي الكلاسيكي900×600
منتجات متحركة بخلفية مميّزة1233×500 كما يظهر في وصف الحقل
بانرات مربعة زجاجية640×427
بانر ثابت — كمبيوتر1200×300
بانر ثابت — جوال767×300
صورة مقالة المدونة640×360
شريط الصور المتحرك1200×300
خلفية بارالاكس1400×500
الصور المربعة400×400
صورة العميل في آراء العملاء68×68

Contain أو Cover؟

يُظهر نمط Contain الصورة بكامل أبعادها مع إمكانية ظهور هوامش فارغة، بينما يملأ نمط Cover إطار العرض بالكامل مع احتمالية اقتطاع الأطراف الخارجية. يُعتمد Contain عادة لبطاقات المنتجات لضمان اكتمال تفاصيل السلعة، بينما يُستخدم Cover للبانرات الخلفية العريضة.

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

12

تحسين الأداء

بلّورا يعطيك خيارات لتوازن بين المؤثرات وسرعة التجربة. ما فيه إعداد واحد مناسب لكل المتاجر.

  • ارفع صوراً بالحجم المناسب ولا تستخدم ملفات ضخمة بدون حاجة.
  • استخدم واجهة رئيسية واحدة بدل جمع أكثر من قسم كبير في بداية الصفحة.
  • إذا عندك منتجات كثيرة جداً في الصفحة، جرّب حركة «خفيفة» أو فعّل وضع التأثيرات المخفّضة.
  • إذا ما تستخدم 3D، أوقف WebGL.
  • لا تضف نماذج ثلاثية الأبعاد إلا للمنتجات أو الشرائح التي تستفيد منها فعلاً.
  • اختبر المتجر على جوال متوسط المواصفات، مو فقط على كمبيوتر سريع.

13

إعدادات مقترحة حسب نوع المتجر

إلكترونيات

الزجاج: متوسط
الحركة: كاملة أو خفيفة
WebGL: تفعيل عند استخدام نماذج 3D
العرض: عريض
المسافات: مريح
الوضع الليلي: اختياري

فاخر / بريميوم

الزجاج: غامر
الحركة: كاملة
WebGL: حسب وسائط المنتجات
العرض: عريض أو كامل
المسافات: واسع
الوضع الليلي: يُوصى بتفعيله كافتراضي للهويات المتناسقة

متجر عام

الزجاج: متوسط
الحركة: خفيفة
WebGL: إيقاف عند عدم الاستخدام
العرض: قياسي
المسافات: مريح
الوضع الليلي: اختياري

كتالوج كبير / تركيز على الأداء

الزجاج: خفيف
الحركة: إيقاف أو خفيفة
WebGL: إيقاف لتوفير أقصى سرعة معالجة
العرض: قياسي أو عريض
المسافات: مضغوط
الوضع الليلي: حسب الهوية

14

استكشاف الأخطاء والمعالجة التقنية

عدم ظهور النموذج ثلاثي الأبعاد (3D)
  1. التحقق من تفعيل مفتاح WebGL الرئيسي.
  2. التأكد من عدم تفعيل وضع التأثيرات المخفّضة.
  3. التحقق من أن رابط الملف مباشر وعام ويبدأ ببروتوكول HTTPS ويدعم معايير CORS.
  4. اختبار فتح رابط ملف GLB/GLTF مباشرة في متصفح خارجي للتحقق من سلامة الملف.
  5. في حال استمرار المشكلة مع صحة الرابط، يُرجى تزويد الدعم الفني بالرابط وسجل فحص المتصفح.
اقتطاع أطراف صور الواجهة أو السلايدر
  1. التحقق من رفع صورة مخصصة لشاشات الجوال في الأقسام التي تتيح ذلك.
  2. مراعاة منطقة الأمان (Safe Area) وتركيز النصوص والعناصر في منتصف الإطار.
  3. الالتزام بالأبعاد القياسية المحددة في إرشادات كل قسم.
  4. عند اعتماد وضعية العرض Cover، يحدث اقتطاع تكيفي تلقائي لملء أبعاد الشاشة المختلفة.
عدم توجيه زر الإجراء (CTA) إلى الوجهة المطلوبة
  1. التأكد من إدخال نص مخصص للزر.
  2. اختيار الوجهة بدقة من قائمة مسارات سلة المعتمدة.
  3. في حال استخدام رابط خارجي، التأكد من اكتمال الرابط وتضمينه بروتوكول HTTPS.
  4. حفظ الإعدادات وتحديث نافذة المعاينة.
عدم وضوح الصور أو النصوص في الوضع الداكن
  1. استخدام صور منتجات ذات خلفيات مفرغة أو شفافة.
  2. التأكد من تباين النصوص المدمجة داخل الصور مع الخلفيات الداكنة.
  3. في البانرات الإعلانية، يُفضل تجنب التصاميم المعتمدة على حواف بيضاء حادة غير مدمجة.
عدم تبدل صورة المنتج عند اختيار المقاس أو اللون
  1. مراجعة إعدادات خيارات المنتج داخل لوحة تحكم سلة.
  2. التحقق من ربط كل قيمة من قيم الخيارات بالصورة المحددة لها.
  3. التأكد من ضبط نوع عرض الخيار كخيار مرئي في واجهة المتجر.
  4. إذا كانت البيانات مكتملة واستمرت المشكلة، يُرجى تزويد الدعم الفني برابط صفحة المنتج.
انخفاض سرعة التصفح أو ثقل الحركة في الأجهزة الضعيفة
  1. تخفيض إعداد قوة الحركات إلى «خفيفة».
  2. تفعيل وضع التأثيرات المخفّضة لتعطيل محركات التمويه والحركة بالكامل.
  3. تعطيل محرك WebGL في حال عدم وجود نماذج ثلاثية الأبعاد نشطة.
  4. تحسين وضغط أحجام صور الواجهة والبانرات الرئيسية.
ملاحظات تشغيلية على شاشات الجوال أو شريط الشراء الثابت
  1. اختبار الصفحة عبر متصفح بديل للتحقق من وجود تداخلات محلية في ذاكرة التخزين المؤقت.
  2. التأكد من تفعيل خيار تثبيت زر الإضافة وشريط السعر في إعدادات صفحة المنتج.
  3. التحقق من تحديد خيارات المنتج الإلزامية قبل الإضافة للسلة.
  4. عند تكرار الملاحظة، يُرجى تزويد الفريق بنوع الجهاز والمتصفح وسجل لقطات الشاشة.
عدم ظهور مؤقت عروض الفلاش أو توقف العد التنازلي
  1. التأكد من تفعيل خيار «إظهار العد التنازلي» في إعدادات القسم.
  2. تحديد تاريخ ووقت انتهاء العرض بدقة؛ إذ يظل المؤقت معطلاً بدون تاريخ انتهاء صالح.
  3. التحقق من مطابقة منتجات القسم لحالة العرض النشط.
متى تتواصل مع الدعم الفني؟ عند التحقق من سلامة كافة الإعدادات والبيانات في لوحة سلة مع استمرار المشكلة، يُرجى تزويدنا برابط المتجر أو الصفحة، ولقطة شاشة أو تسجيل مرئي، ونوع الجهاز والمتصفح، مع ذكر خطوات إعادة التكرار.

15

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

هل يتطلب استخدام ثيم بلّورا خبرة برمجية؟

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

هل العرض ثلاثي الأبعاد (3D) إلزامي لتشغيل الثيم؟

غير إلزامي. يعمل الثيم بكامل كفاءته باستخدام الصور القياسية، مع إمكانية تعطيل مفتاح WebGL في حال عدم استخدام نماذج 3D.

هل يلزم رفع صور منفصلة ومخصصة لشاشات الجوال؟

يُعد ذلك اختيارياً، ولكن يُوصى به في السلايدر الرئيسي ثلاثي الأبعاد بأبعاد 800×1200 بكسل لضمان المواءمة البصرية مع الشاشات الرأسية دون قص للأطراف.

كيف يتم ضبط الوضع الداكن كوضع افتراضي؟

عبر تفعيل خيار «الوضع الليلي كافتراضي» ضمن إعدادات تصميم بلّورا، مع استمرار إمكانية التبديل اليدوي للعميل وحفظ تفضيله محلياً في المتصفح.

ما هي وجهات الروابط المدعومة في أزرار الإجراء (CTA)؟

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

ما الفرق التقني بين تخفيف الحركة ووضع التأثيرات المخفّضة؟

يتحكم خيار قوة الحركة بدرجة وسرعة الانتقالات الحركية فقط، بينما يُعد وضع التأثيرات المخفّضة حلاً شاملاً يعطّل التمويه الزجاجي، المحركات الحركية، وعرض 3D لتحقيق أعلى أداء ممكن.

هل يدعم الثيم عرض خيارات المنتجات عبر صور مصغرة؟

نعم، عند ربط قيم الخيارات بصور محددة في إعدادات المنتج داخل لوحة سلة، ستنعكس التغييرات تلقائياً عند اختيار العميل.

كيف يتم تفعيل مؤقت العد التنازلي لعروض الفلاش؟

عبر تفعيل خيار العد التنازلي في إعدادات القسم وتحديد تاريخ ووقت انتهاء العرض؛ حيث يظل المؤقت مخفياً ما لم يُحدد تاريخ انتهاء صالح.

ما هي الإعدادات الموصى بها لتحقيق أعلى كفاءة في الأداء؟

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

هل يُوصى بالدمج بين السلايدر الكلاسيكي والسلايدر ثلاثي الأبعاد في صفحة واحدة؟

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

ما هو مصدر البيانات لقسم «تقييمات المتجر»؟

يستدعي هذا القسم تقييمات المتجر الموثقة من منصة سلة تلقائياً. لإدراج آراء مختارة يدوياً، يُستخدم قسم «بلّورا — آراء العملاء».

كيف يتم التواصل مع الدعم الفني؟

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

16

الدعم والتواصل

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

info@ssp-1.com

أو تفضل بالتواصل المباشر عبر واتساب: +966 55 678 6362 أو زيارة مركز الدعم الفني (بلّورا) لتسجيل تذكرة دعم فني والمتابعة مع الفريق الهندسي.

لتسريع عملية الفحص والتشخيص الهندسي، يُرجى تزويدنا بالبيانات التالية:

  • رابط المتجر أو رابط الصفحة المعنية.
  • لقطة شاشة أو تسجيل مرئي يوضح الحالة.
  • نوع الجهاز ونظام التشغيل والمتصفح المستخدم.
  • الخطوات المتسلسلة لإعادة إنتاج المشكلة.
English Documentation

01

Welcome to Bellora

Bellora is a premium Salla theme with a modern glass visual system, flexible homepage sections, responsive layouts, dark mode, and optional 3D presentation. 3D is an enhancement, not a requirement: normal product imagery remains the core experience.

Merchant-controlledCustomize glass, motion, spacing, corners, header behavior, and homepage sections from Salla.
Mobile readyResponsive layouts plus dedicated mobile media where supported.
Performance controlsReduce effects or disable WebGL when your catalog or audience benefits from a lighter experience.

02

Quick start

  1. Activate BelloraInstall the theme and make it active when you are ready to preview it.
  2. Open theme customizationUse Salla’s theme customizer to manage settings and homepage sections without coding.
  3. Set the design systemChoose glass intensity, motion, content width, corner style, and spacing.
  4. Configure the headerChoose sticky or transparent behavior and add an announcement when needed.
  5. Build the homepageChoose one primary hero, then add product, banner, brand, review, and content sections.
  6. Review before publishingCheck mobile, dark mode, links, product options, sold-out states, and any deal countdown you use.

03

Bellora design settings

SettingOptionsGuidance
Glass intensitySubtle / Medium / ImmersiveSubtle prioritizes clarity, Medium is the balanced default, Immersive makes the glass treatment stronger.
Animation intensityOff / Subtle / FullUse Subtle for a calmer storefront and Full for Bellora’s complete motion treatment.
Reduced effectsOn / OffDisables blur, nonessential motion, and 3D for all visitors.
WebGLOn / OffMaster switch for 3D presentation. Disable it when you do not use 3D content.
Liquid transitionsOn / OffUses Bellora’s liquid transitions on supported hero media; off falls back to standard Salla transitions.
Container widthStandard 1280 / Wide 1536 / Full widthStandard works for most stores; wider modes suit large banners and media-led layouts.
Corner styleSharp / Soft / RoundedChanges the corner radius across cards, buttons, and surfaces.
Spacing densityCompact / Comfortable / SpaciousCompact fits more content, Comfortable is the default balance, Spacious creates a more open layout.
Default dark modeOn / OffStarts a visitor’s first session in dark mode while keeping manual switching available.

04

Header and navigation

The sticky-header setting keeps navigation visible while scrolling. Transparent header removes the glass surface at the top of the page and restores it after scrolling; Bellora automatically avoids this treatment in reduced-effects mode when clarity would suffer. The announcement bar appears only when text is provided and can optionally link to a destination. Important links and the More menu help manage navigation when the header runs out of horizontal space.

05

Dark mode

Bellora supports light and dark presentation. You can make dark mode the default for a visitor’s first session; visitors can still switch modes and their choice is retained in the browser. Check banner contrast in both modes and prefer transparent product imagery when it fits your catalog.

06

Homepage sections

Bellora’s current merchant-addable sections include: 3D Hero Slider, Classic Hero Slider, Glass Quick Links, Products Slider with Feature Banner, Square Glass Banners, Brands Showcase, Customer Testimonials, Store Reviews, Store Features, Flash Deals with Countdown, Video Spotlight, Latest Products, Blog Articles, Fixed Banner, Featured Products, YouTube Video, Photos Slider, Products Slider, Products Grid, Parallax Background, and Square Photos.

The 3D Hero Slider and Classic Hero Slider are alternative primary heroes. Most stores should choose one main hero rather than stacking both at the top.

3D Hero SliderDesktop/mobile images, multilingual title and description, CTA, and optional GLB/GLTF model.
Classic Hero SliderTraditional image slides with title, description, and optional overlay removal.
Glass Quick LinksQuick custom links or categories with icons and slider controls.
Products Slider with Feature BannerFeature background, copy, selected products, and optional View All destination.
Square Glass BannersUp to five linked banners with title and description.
Featured ProductsThree layouts covering hero products, tabs, slider/grid presentation, and highlighted products.
Flash DealsSelected or automatic deal products, optional countdown, product limit, and slider/grid modes.
ReviewsUse Customer Testimonials for authored content or Store Reviews for real Salla reviews.

07

Interactive glass / 3D hero slider

In the customizer this component is named Bellora — 3D Hero Slider. It works as a normal hero when no 3D model is provided.

  • Desktop image: recommended 1600×1000.
  • Mobile image: recommended 800×1200 (2:3 portrait).
  • Optional model: direct public GLB/GLTF URL over HTTPS.
  • Title and description: multilingual.
  • CTA destinations: product, products by tag, category, brand, info page, article, blog category, offers, brands page, blog, or external URL.

Keep important subjects away from the image edges and use a dedicated mobile composition when the desktop artwork contains positioned text or products.

08

3D products and WebGL

WebGL is Bellora’s master 3D switch. Product-page 3D media is shown when supported media exists in the Salla product, while the homepage hero can use a direct GLB/GLTF URL. Normal images remain the fallback. Merchant-hosted 3D files must be publicly reachable over HTTPS and the host must allow the browser to load them from the storefront. Reduced-effects mode disables the 3D experience for all visitors.

09

Product page

Merchant settings cover product and collection breadcrumbs, gallery image fitting, image zoom, product tags, enhanced add-to-cart notification, notify-when-available on sold-out cards, and sticky mobile purchase controls. Image-based variants are driven by the product option and image data configured in Salla. Supported product 3D media can appear alongside the normal gallery.

Price, stock, required options, and purchase availability come from the product data in Salla, so verify the product configuration before treating a display issue as a theme issue.

10

Product cards and promotions

Product cards reflect Salla product data for price, discounts, availability, and applicable tags/badges. Sold-out products can expose the notify-when-available action when enabled. Keep pricing and availability in Salla rather than embedding those details into product images.

11

Preparing images and banners

SectionConfigured recommendation
3D Hero — desktop1600×1000
3D Hero — mobile800×1200
Classic Hero900×600
Products with Feature Banner1233×500 in the field guidance
Square Glass Banners640×427
Fixed Banner — desktop1200×300
Fixed Banner — mobile767×300
Blog article image640×360
Photos Slider1200×300
Parallax Background1400×500
Square Photos400×400
Customer testimonial avatar68×68

Contain shows the full image and may leave unused space. Cover fills the frame and may crop the edges. Keep key subjects inside a safe center area and preview banners in both light and dark mode.

12

Performance recommendations

  • Upload appropriately sized and compressed images.
  • Use one strong hero instead of stacking multiple heavy first-screen sections.
  • Use Subtle animation or Reduced Effects for very large catalogs or weaker devices.
  • Disable WebGL if the store does not use 3D.
  • Add 3D models only where they provide real product value.
  • Test on a mid-range phone before publishing.

13

Suggested configurations by store type

Electronics

Glass: Medium
Motion: Full or Subtle
WebGL: On when using 3D
Width: Wide
Spacing: Comfortable
Dark mode: Good as an optional experience

Premium / luxury

Glass: Immersive
Motion: Full
WebGL: As needed
Width: Wide or Full
Spacing: Spacious
Dark mode: Consider default if your imagery supports it

General retail

Glass: Medium
Motion: Subtle
WebGL: Off if unused
Width: Standard
Spacing: Comfortable
Dark mode: Optional

Large catalog / performance first

Glass: Subtle
Motion: Off or Subtle
WebGL: Off unless needed
Width: Standard or Wide
Spacing: Compact
Dark mode: Based on brand needs

14

Common troubleshooting

3D model does not appear
  1. Confirm WebGL is enabled.
  2. Confirm Reduced Effects is off.
  3. Verify the model URL is direct, public, and HTTPS.
  4. Open the model URL directly in a browser.
  5. If it loads directly but not in the store, send the URL and screenshot to support.
Hero image crops unexpectedly
  1. Use the dedicated mobile image where available.
  2. Move important content away from edges.
  3. Use the recommended dimensions shown in the field.
  4. Remember that Cover-style media may crop differently across screens.
CTA is missing or opens the wrong destination
  1. Enter CTA text.
  2. Select the destination from Salla’s destination picker.
  3. For an external destination, use a complete HTTPS URL.
  4. Save and refresh the preview.
Variant image does not switch
  1. Review the product options in Salla.
  2. Confirm each option value is mapped to the correct image.
  3. Confirm the option is configured for the visual presentation you expect.
  4. If the product data is correct, send the product URL to support.
Store feels too motion-heavy
  1. Change animation intensity to Subtle.
  2. Enable Reduced Effects if needed.
  3. Disable WebGL if unused.
  4. Review hero and banner file sizes.
Flash countdown is missing
  1. Enable the countdown.
  2. Set an expiry date.
  3. An empty expiry date intentionally hides the timer.
  4. Review the selected products, product limit, and display mode.

15

Frequently asked questions

Do I need coding knowledge?

No. Core Bellora settings and sections are managed in Salla’s theme customizer.

Is 3D required?

No. Bellora works with normal product and banner images, and WebGL can be disabled.

Should I upload a separate mobile hero?

It is strongly recommended when the desktop composition contains positioned text or products. The 3D Hero supports an 800×1200 mobile image.

Can dark mode be the default?

Yes. Enable Default Dark Mode; visitors can still switch modes.

Which CTA destinations are supported?

Products, tagged products, categories, brands, info pages, articles, blog categories, offers, the brands page, the blog, and external URLs.

What is the difference between Subtle motion and Reduced Effects?

Animation intensity changes the amount of motion. Reduced Effects is broader and disables blur, nonessential motion, and 3D for all visitors.

Can product sizes use images?

Yes, when the product options and image mappings are configured correctly in Salla.

How do I show the flash countdown?

Enable the countdown and set an expiry date. Leaving the date empty hides the timer.

What settings are best for performance?

For large catalogs start with Subtle glass, Subtle or Off motion, optimized images, and WebGL off when unused.

Where do Store Reviews come from?

Store Reviews pulls platform reviews from Salla. Customer Testimonials is the manually authored alternative.

16

Support and contact

For help configuring Bellora or investigating a persistent issue, contact:

info@ssp-1.com

You can also reach us directly via WhatsApp: +966 55 678 6362 or visit our Official Bellora Support Portal to submit a support ticket and follow up with our engineering team.

Please include the store or affected page URL, a screenshot or short recording, the device/browser, and the steps that reproduce the issue.