01
مرحباً بك في ثيم بلّورا
بلّورا ثيم متاجر لسلة بتصميم زجاجي حديث، أقسام مرنة، وضع ليلي، وتجربة متجاوبة على الجوال والكمبيوتر. العرض ثلاثي الأبعاد اختياري ويعمل كإضافة للتجربة، وليس شرطاً لاستخدام الثيم.
التوثيق الفني لثيم بلّورا — منصة سلة
مرجع تقني متكامل لإعداد ثيم بلّورا: ضبط نظام التصميم الزجاجي، هيكلة أقسام الصفحة الرئيسية، إدارة خيارات العرض ثلاثي الأبعاد عبر WebGL، ومواءمة الوضع الداكن واستكشاف الأخطاء التشغيلية.
01
بلّورا ثيم متاجر لسلة بتصميم زجاجي حديث، أقسام مرنة، وضع ليلي، وتجربة متجاوبة على الجوال والكمبيوتر. العرض ثلاثي الأبعاد اختياري ويعمل كإضافة للتجربة، وليس شرطاً لاستخدام الثيم.
02
03
تُحدد هذه الإعدادات المظهر البصري العام للمتجر بشكل موحد. يُوصى باعتماد القيم الافتراضية عند التهيئة الأولية، ثم التعديل تدريجياً وفق متطلبات الهوية التجارية.
| الإعداد | الخيارات | إرشادات الاستخدام |
|---|---|---|
| كثافة تأثير الزجاج | خفيف / متوسط / غامر | خفيف للوضوح العالي، متوسط للتوازن المعياري، غامر لتعزيز التأثير الزجاجي. |
| قوة الحركات والانتقالات | إيقاف / خفيفة / كاملة | خفيفة للمظهر الهادئ، وكاملة للتفاعل الحركي المتكامل. |
| وضع التأثيرات المخفّضة | تشغيل / إيقاف | تعطيل تأثيرات التمويه والحركات والانتقالات وعرض 3D. مخصص للكتالوجات الكبيرة أو الأجهزة محدودة الموارد لرفع كفاءة المعالجة. |
| WebGL | تشغيل / إيقاف | مفتاح التحكم الرئيسي في محرك العرض ثلاثي الأبعاد. يُوصى بإيقافه في حال عدم استخدام نماذج ثلاثية الأبعاد. |
| الانتقالات السائلة | تشغيل / إيقاف | تفعيل الحركة الانسيابية لصور الواجهة المدعومة. عند التعطيل يتم اعتماد انتقالات سلة القياسية. |
| عرض محتوى الصفحة | قياسي 1280 / عريض 1536 / كامل العرض | القياسي مناسب لمعظم المتاجر. العريض أو الكامل مخصص لعرض البانرات والصور البصرية عالية الدقة. |
| شكل الزوايا | حادة / ناعمة / دائرية | تحديد نصف قطر الانحناء (Border Radius) للبطاقات والأزرار والنوافذ المنبثقة عبر كامل المتجر. |
| كثافة المسافات | مضغوط / مريح / واسع | مضغوط لزيادة كثافة عرض العناصر، مريح كإعداد متوازن افتراضي، واسع لزيادة الهوامش والفراغات البصرية. |
| الوضع الليلي كافتراضي | تشغيل / إيقاف | تعيين الوضع الداكن كنمط بدء افتراضي للجلسات الجديدة، مع احتفاظ الزائر بإمكانية التبديل اليدوي. |
04
يُبقي شريط التنقل العلوي ثابتاً أثناء التمرير. في حال احتواء المتجر على قوائم تصنيفات ممتدة، يُوصى باختبار التعطيل لتوفير مساحة عرض أكبر للشاشات الصغيرة.
يجعل الهيدر شفافاً فوق الواجهة الرئيسية، ثم ترجع الخلفية الزجاجية عند النزول. يتعطل تلقائياً مع وضع التأثيرات المخفّضة للمحافظة على وضوح النص.
إدراج نص تنبيهي موجز أعلى شريط التنقل مع رابط توجيه اختياري؛ ويختفي الشريط تلقائياً عند ترك حقل النص فارغاً.
إمكانية إظهار روابط الصفحات الرئيسية وتفعيل قائمة «المزيد» لنقل الروابط الإضافية تلقائياً عند تجاوز سعة العرض الأفقية للهيدر.
05
يدعم ثيم بلّورا الوضعين الفاتح والداكن. يمكن تعيين الوضع الداكن كنمط افتراضي للزيارات الجديدة، مع إتاحة التبديل اليدوي للزائر وحفظ تفضيله تلقائياً في المتصفح.
06
تتم إضافة وترتيب أقسام بلّورا من خلال لوحة تخصيص الثيم وفق الاحتياج التجاري؛ ويُوصى معمارياً بالتركيز على الأقسام المباشرة لتحسين زمن تحميل الصفحة وسرعة الاستجابة.
07
في لوحة التخصيص يظهر باسم بلّورا — سلايدر رئيسي ثلاثي الأبعاد. تقدر تستخدمه كبنر عادي بدون أي نموذج 3D، أو تضيف نموذجاً للشريحة التي تحتاجه.
| الحقل | الاستخدام |
|---|---|
| صورة الشريحة — كمبيوتر | المقاس المقترح داخل الثيم 1600×1000 بكسل. |
| صورة الشريحة — جوال | المقاس المقترح 800×1200 بكسل بنسبة 2:3. استخدم تصميم طولي مستقل بدل قص صورة الكمبيوتر. |
| ملف GLB/GLTF | اختياري. استخدم رابطاً مباشراً عاماً عبر HTTPS. إذا تركته فارغاً تعمل الشريحة كبنر عادي. |
| العنوان والوصف | يدعمان أكثر من لغة من إعدادات سلة. |
| نص الزر | مثل «تسوق الآن» أو «اكتشف العروض». |
| رابط الزر | اختيار مباشر من سلة بدل كتابة الروابط يدوياً. |
تقدر تختار: منتج، منتجات بوسم، تصنيف، ماركة، صفحة تعريفية، مقالة، تصنيف مدونة، التخفيضات، صفحة الماركات، المدونة، أو رابط خارجي.
خلّ المنتج أو العنصر المهم قريباً من منتصف الصورة، واترك مساحة كافية حول النص والزر. لا تحط تفاصيل مهمة على الحواف لأن الشاشات تختلف في الطول والعرض.
08
العرض ثلاثي الأبعاد إضافة اختيارية. الصور العادية تبقى الأساس، لذلك متجرك يظل قابل للتصفح حتى لو كان 3D متوقفاً أو غير مدعوم على جهاز الزائر.
09
تقدر تظهر أو تخفي مسار التنقل في صفحة المنتج، وكذلك في صفحة قائمة المنتجات.
اختر Contain لإظهار الصورة كاملة، أو Cover لملء المساحة مع احتمال قص الأطراف.
فعّل تكبير صور المنتج إذا كانت صورك عالية الدقة ويستفيد العميل من رؤية التفاصيل.
إذا استخدمت خيارات مثل المقاس وربطتها بصور، تظهر الخيارات بصرياً ويقدر العميل يختارها مباشرة.
يمكن تفعيل إشعار إضافة محسّن، ومع الجوال تقدر تثبت زر الإضافة والكمية أسفل الشاشة.
يمكن إظهار زر «أعلمني عند التوفر» في بطاقات المنتجات غير المتوفرة.
تقدر إظهار وسوم المنتج أو إخفاءها من إعدادات الثيم.
المنتجات التي تحتوي وسائط ثلاثية الأبعاد مدعومة تقدر تعرضها بجانب معرض الصور العادي.
السعر، الكمية المتاحة، خيارات المنتج، وحالة الشراء تأتي من بيانات المنتج في سلة. تأكد من صحة بيانات المنتج قبل البحث عن مشكلة في الثيم.
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 للبانرات الخلفية العريضة.
12
بلّورا يعطيك خيارات لتوازن بين المؤثرات وسرعة التجربة. ما فيه إعداد واحد مناسب لكل المتاجر.
13
الزجاج: متوسط
الحركة: كاملة أو خفيفة
WebGL: تفعيل عند استخدام نماذج 3D
العرض: عريض
المسافات: مريح
الوضع الليلي: اختياري
الزجاج: غامر
الحركة: كاملة
WebGL: حسب وسائط المنتجات
العرض: عريض أو كامل
المسافات: واسع
الوضع الليلي: يُوصى بتفعيله كافتراضي للهويات المتناسقة
الزجاج: متوسط
الحركة: خفيفة
WebGL: إيقاف عند عدم الاستخدام
العرض: قياسي
المسافات: مريح
الوضع الليلي: اختياري
الزجاج: خفيف
الحركة: إيقاف أو خفيفة
WebGL: إيقاف لتوفير أقصى سرعة معالجة
العرض: قياسي أو عريض
المسافات: مضغوط
الوضع الليلي: حسب الهوية
14
15
لا يتطلب ذلك؛ تتم إدارة وتخصيص جميع خيارات الثيم والأقسام مباشرة عبر لوحة تحكم سلة دون الحاجة لأي تعديل على الكود المصدري.
غير إلزامي. يعمل الثيم بكامل كفاءته باستخدام الصور القياسية، مع إمكانية تعطيل مفتاح WebGL في حال عدم استخدام نماذج 3D.
يُعد ذلك اختيارياً، ولكن يُوصى به في السلايدر الرئيسي ثلاثي الأبعاد بأبعاد 800×1200 بكسل لضمان المواءمة البصرية مع الشاشات الرأسية دون قص للأطراف.
عبر تفعيل خيار «الوضع الليلي كافتراضي» ضمن إعدادات تصميم بلّورا، مع استمرار إمكانية التبديل اليدوي للعميل وحفظ تفضيله محلياً في المتصفح.
يدعم التوجيه إلى: منتج، منتجات بوسم محدد، تصنيف، ماركة تجارية، صفحة تعريفية، مقالة، تصنيف مدونة، العروض والتخفيضات، صفحة الماركات، المدونة، أو رابط خارجي مخصص.
يتحكم خيار قوة الحركة بدرجة وسرعة الانتقالات الحركية فقط، بينما يُعد وضع التأثيرات المخفّضة حلاً شاملاً يعطّل التمويه الزجاجي، المحركات الحركية، وعرض 3D لتحقيق أعلى أداء ممكن.
نعم، عند ربط قيم الخيارات بصور محددة في إعدادات المنتج داخل لوحة سلة، ستنعكس التغييرات تلقائياً عند اختيار العميل.
عبر تفعيل خيار العد التنازلي في إعدادات القسم وتحديد تاريخ ووقت انتهاء العرض؛ حيث يظل المؤقت مخفياً ما لم يُحدد تاريخ انتهاء صالح.
للمتاجر ذات الكتالوجات الضخمة، يُوصى باعتماد كثافة زجاج خفيفة، حركات خفيفة أو معطلة، وتعطيل مفتاح WebGL إذا لم تكن هناك نماذج ثلاثية الأبعاد قيد الاستخدام.
تقنياً يمكن ذلك، ولكن يُوصى معمارياً باختيار نمط واجهة رئيسية واحد لتفادي ازدواجية المساحات البصرية العريضة في أعلى الصفحة.
يستدعي هذا القسم تقييمات المتجر الموثقة من منصة سلة تلقائياً. لإدراج آراء مختارة يدوياً، يُستخدم قسم «بلّورا — آراء العملاء».
يمكن التواصل عبر القنوات المعتمدة الموضحة في قسم الدعم الفني أدناه، أو عبر فتح تذكرة مباشرة من خلال بوابة الدعم المخصصة.
16
إذا احتجت مساعدة في إعداد ثيم بلّورا أو واجهت مشكلة بعد التأكد من الإعدادات، تواصل معنا عبر البريد المعتمد:
أو تفضل بالتواصل المباشر عبر واتساب: +966 55 678 6362 أو زيارة مركز الدعم الفني (بلّورا) لتسجيل تذكرة دعم فني والمتابعة مع الفريق الهندسي.
لتسريع عملية الفحص والتشخيص الهندسي، يُرجى تزويدنا بالبيانات التالية:
01
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.
02
03
| Setting | Options | Guidance |
|---|---|---|
| Glass intensity | Subtle / Medium / Immersive | Subtle prioritizes clarity, Medium is the balanced default, Immersive makes the glass treatment stronger. |
| Animation intensity | Off / Subtle / Full | Use Subtle for a calmer storefront and Full for Bellora’s complete motion treatment. |
| Reduced effects | On / Off | Disables blur, nonessential motion, and 3D for all visitors. |
| WebGL | On / Off | Master switch for 3D presentation. Disable it when you do not use 3D content. |
| Liquid transitions | On / Off | Uses Bellora’s liquid transitions on supported hero media; off falls back to standard Salla transitions. |
| Container width | Standard 1280 / Wide 1536 / Full width | Standard works for most stores; wider modes suit large banners and media-led layouts. |
| Corner style | Sharp / Soft / Rounded | Changes the corner radius across cards, buttons, and surfaces. |
| Spacing density | Compact / Comfortable / Spacious | Compact fits more content, Comfortable is the default balance, Spacious creates a more open layout. |
| Default dark mode | On / Off | Starts a visitor’s first session in dark mode while keeping manual switching available. |
04
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
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
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.
07
In the customizer this component is named Bellora — 3D Hero Slider. It works as a normal hero when no 3D model is provided.
Keep important subjects away from the image edges and use a dedicated mobile composition when the desktop artwork contains positioned text or products.
08
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
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 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
| Section | Configured recommendation |
|---|---|
| 3D Hero — desktop | 1600×1000 |
| 3D Hero — mobile | 800×1200 |
| Classic Hero | 900×600 |
| Products with Feature Banner | 1233×500 in the field guidance |
| Square Glass Banners | 640×427 |
| Fixed Banner — desktop | 1200×300 |
| Fixed Banner — mobile | 767×300 |
| Blog article image | 640×360 |
| Photos Slider | 1200×300 |
| Parallax Background | 1400×500 |
| Square Photos | 400×400 |
| Customer testimonial avatar | 68×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
13
Glass: Medium
Motion: Full or Subtle
WebGL: On when using 3D
Width: Wide
Spacing: Comfortable
Dark mode: Good as an optional experience
Glass: Immersive
Motion: Full
WebGL: As needed
Width: Wide or Full
Spacing: Spacious
Dark mode: Consider default if your imagery supports it
Glass: Medium
Motion: Subtle
WebGL: Off if unused
Width: Standard
Spacing: Comfortable
Dark mode: Optional
Glass: Subtle
Motion: Off or Subtle
WebGL: Off unless needed
Width: Standard or Wide
Spacing: Compact
Dark mode: Based on brand needs
14
15
No. Core Bellora settings and sections are managed in Salla’s theme customizer.
No. Bellora works with normal product and banner images, and WebGL can be disabled.
It is strongly recommended when the desktop composition contains positioned text or products. The 3D Hero supports an 800×1200 mobile image.
Yes. Enable Default Dark Mode; visitors can still switch modes.
Products, tagged products, categories, brands, info pages, articles, blog categories, offers, the brands page, the blog, and external URLs.
Animation intensity changes the amount of motion. Reduced Effects is broader and disables blur, nonessential motion, and 3D for all visitors.
Yes, when the product options and image mappings are configured correctly in Salla.
Enable the countdown and set an expiry date. Leaving the date empty hides the timer.
For large catalogs start with Subtle glass, Subtle or Off motion, optimized images, and WebGL off when unused.
Store Reviews pulls platform reviews from Salla. Customer Testimonials is the manually authored alternative.
16
For help configuring Bellora or investigating a persistent issue, contact:
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.