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

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

عنوان القسم وزخرفته

• نص تمهيدي (فوق العنوان) - سطر قصير يظهر مباشرة فوق عنوان القسم، مناسب لعبارة صغيرة مثل “تشكيلة جديدة”. اتركه فارغاً لإخفائه.
• العنوان - العنوان الرئيسي للقسم.
• العنوان الفرعي - نص إضافي يظهر قرب العنوان.
• نمط الرأس - طريقة ترتيب منطقة العنوان: “منتصف” يضعه في الوسط أعلى الصورة؛ “جانبي” مخصص لوضع العنوان بجانب زر “عرض المزيد”، لكن هذا القسم لا يحتوي على هذا الزر، لذا يقتصر أثره على جعل العنوان المتوسط يُحاذى إلى بداية السطر بدلاً من المنتصف؛ “منتصف مع أسهم التمرير حول العنوان” يضع أسهماً على جانبي العنوان، لكن هذا القسم لا يحتوي على سلايدر، فلا تظهر أي أسهم ويبدو مطابقاً لخيار “منتصف”.
• محاذاة العنوان - محاذاة نص العنوان إلى اليسار، المنتصف، أو اليمين.
• شكل النص التمهيدي - طريقة ظهور النص التمهيدي: نص فقط، مع خط جانبي (خط قصير قبل النص)، أو شارة (النص داخل شارة صغيرة مستديرة).
• سماكة خط النص التمهيدي - درجة سماكة النص التمهيدي، من خفيف إلى عريض جداً.
• لون النص التمهيدي - لون النص التمهيدي. إذا تُرك فارغاً يُستخدم لون التمييز الخاص بالثيم.
• لون خلفية الشارة - لون الخلفية خلف النص التمهيدي، ويظهر فقط عند اختيار الشكل “شارة”.
• سماكة خط العنوان - درجة سماكة نص العنوان، من خفيف إلى عريض جداً.
• لون العنوان الرئيسي (اختياري) - لون مخصص لعنوان القسم. اتركه فارغاً للإبقاء على اللون الافتراضي.
• زخرفة قبل العنوان - لمسة زخرفية قبل العنوان: بدون، خط قصير، خط تحت العنوان، أو لمعة.
• سماكة خط الوصف - درجة سماكة نص العنوان الفرعي، من خفيف إلى عريض جداً.
• لون العنوان الفرعي (اختياري) - لون مخصص للعنوان الفرعي. اتركه فارغاً للإبقاء على اللون الافتراضي.
• زخرفة قبل العنوان الفرعي - لمسة زخرفية قبل العنوان الفرعي: بدون، خط ناعم، أو لمعة.

الصورة

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

شكل النقاط

• محتوى النقطة - ما يظهر داخل كل نقطة: “رقم” (تُرقَّم النقاط 1، 2، 3… حسب ترتيبها في القائمة) أو “علامة +” (أيقونة زائد). أثناء فتح بطاقة المنتج، تتحول النقطة إلى علامة “×” ليعرف الزائر أنه يستطيع النقر عليها مجدداً لإغلاق البطاقة.
• حركة نبض حول النقطة - عند التفعيل، تظهر حلقة ناعمة تنبض حول كل نقطة لجذب الانتباه والإشارة إلى أنها قابلة للنقر. يتوقف النبض عن النقطة المفتوحة طوال فترة فتح بطاقتها.
• لون النقطة - لون تعبئة النقاط (ولون حلقة النبض أيضاً).
• لون الرقم - لون الرقم أو علامة + داخل كل نقطة. عند فتح نقطة يتبادل اللونان مكانيهما، فتتميز النقطة المفتوحة عن بقية النقاط.

النقاط والمنتجات

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

• المنتج - المنتج الذي تشير إليه هذه النقطة. تعرض بطاقته الصورة الرئيسية للمنتج واسمه وسعره؛ وإذا كان المنتج مخفّضاً، يظهر سعر التخفيض باللون الأحمر بجانب السعر الأصلي مشطوباً. النقطة التي لم يُختر لها منتج لا تظهر.
• الموضع الأفقي (من اليسار) - مكان النقطة عرضياً على الصورة، مقاساً من الحافة اليسرى للصورة، من 0% (أقصى اليسار) إلى 100% (أقصى اليمين). يُقاس دائماً من اليسار بغض النظر عن لغة المتجر.
• الموضع العمودي (من الأعلى) - مكان النقطة طولياً على الصورة، من 0% (الحافة العليا) إلى 100% (الحافة السفلى).