استخدام التطبيق
المظهر
تنسّق صفحة المظهر كل جداول متجرك دفعة واحدة، لتتناسق جميعها مع علامتك التجارية. وتعرض معاينة مباشرة في الصفحة كل تغيير أثناء إجرائه.
انقر على حفظ في الشريط العلوي لتطبيق التغييرات. يتحدّث كل جدول نشط في متجرك فورًا — لا حاجة إلى إعادة حفظ الجداول واحدًا تلو الآخر. تريد أن يبدو جدول واحد بشكل مختلف؟ راجع منح جدول واحد مظهرًا خاصًا.
نافذة الجدول
| الإعداد | ماذا يفعل |
|---|---|
| العرض | ضيق (الأنسب لثلاثة أو أربعة أعمدة)، أو متوسط (افتراضي)، أو عريض (مساحة للجداول العريضة دون تمرير أفقي)، أو عريض جدًا (الأنسب مع صور المنتج بجانب الجدول). |
| استدارة الزوايا | 0–24 px. الافتراضي 8 px. |
| المسافة الداخلية | 0–48 px. الافتراضي 24 px. المسافة بين حافة الجدول ومحتواه. |
الترويسة
الشريط أعلى النافذة المنبثقة أو اللوحة الجانبية.
| الإعداد | ماذا يفعل |
|---|---|
| إظهار اسم المنتج | يعرض في أعلى النافذة اسم المنتج الذي فُتحت منه. وعند إخفائه، تظل برامج قراءة الشاشة تعلنه. |
| خلفية الترويسة | اتركها فارغة لاستخدام خلفية الجدول. |
| لون العنوان | اتركه فارغًا لاستخدام لون النص. |
| محاذاة العنوان | يسار أو وسط. |
| زر الإغلاق | ✕ بسيط، أو ✕ داخل دائرة ممتلئة. |
| لون الأيقونة | لون ✕ نفسها. اتركه فارغًا لاستخدام لون العنوان. |
| لون الدائرة | لنمط الدائرة الممتلئة. |
صور المنتج
| الإعداد | ماذا يفعل |
|---|---|
| إظهار صور المنتج بجانب الجدول | يعرض صور المنتج نفسه بجانب الجدول، مع أسهم للتصفح. على الشاشات الأكبر تظهر في النافذة المنبثقة فقط — فاللوحات ضيقة جدًا. استخدمه مع نافذة عريض جدًا. |
| إظهارها على الهواتف أيضًا | على الهواتف، تظهر الصور فوق الجدول، في النافذة المنبثقة واللوحات على حد سواء. عند إيقافه، تعرض الهواتف الجدول فقط. |
الخلفية
| الإعداد | ماذا يفعل |
|---|---|
| لون الخلفية | سطح الجدول. الافتراضي أبيض. |
| لون النص | نص المحتوى — غيّره مع الخلفية الداكنة ليبقى الجدول مقروءًا. |
| صورة الخلفية | صورة خلف الجدول بالكامل. |
| ملاءمة الصورة | ملء الجدول، أو إظهار الصورة كاملة، أو تكرار (تبليط). |
| موضع الصورة | الوسط أو الأعلى أو الأسفل. |
| الطبقة العلوية | 0–90%. تُخفّت الصورة بلون الخلفية ليبقى النص مقروءًا. عند 0% تظهر الصورة كما هي. |
ملاحظة: تظهر الجداول المعروضة داخل الصفحة على خلفية صفحة سمتك، ما لم تضبط صورة خلفية أو لون خلفية غير الأبيض.
الجدول
| الإعداد | ماذا يفعل |
|---|---|
| خلفية ترويسة الأعمدة | الافتراضي رمادي فاتح. |
| نص ترويسة الأعمدة | الافتراضي قريب من الأسود. |
| خطوط الشبكة | لون الخطوط بين الصفوف والخلايا. |
| تظليل الصفوف بالتناوب | يلوّن صفًا ويترك صفًا لتسهيل قراءة الجداول العريضة. |
يمكن لكل جدول تجاوز هذه الألوان في المحرر ضمن خيارات التنسيق.
النص
| الإعداد | ماذا يفعل |
|---|---|
| لون العناوين | عناوين الجدول، إضافة إلى لمسات مثل الوحدة النشطة في مفتاح تبديل الوحدات وإطار التركيز عند استخدام لوحة المفاتيح. |
| الحجم الأساسي | 11–20 px. الافتراضي 14 px. تتدرّج العناوين والنصوص بناءً عليه. |
السلوك
| الإعداد | ماذا يفعل |
|---|---|
| الإغلاق عند النقر خارج الجدول | مفعّل افتراضيًا. أوقفه ليُغلق الجدول بزر الإغلاق فقط. يعمل مفتاح Escape دائمًا. |
CSS مخصص
لكل ما لا تغطيه الخيارات أعلاه. يُضاف CSS أينما ظهر جدول. ابدأ محدِّداتك بـ .plug-sc لكي تؤثّر في جدول المقاسات فقط دون بقية سمتك.
أسماء فئات مفيدة:
| الإعداد | ماذا يفعل |
|---|---|
| .plug-sc__trigger | رابط أو زر جدول المقاسات. |
| .plug-sc__dialog | النافذة المنبثقة أو اللوحة الجانبية. |
| .plug-sc__heading | العنوان أعلى النافذة المنبثقة. |
| .plug-sc__table | كل جدول مقاسات. |
| .plug-sc__units | مفتاح تبديل الوحدات أعلى الجدول. |
| .plug-sc__float | الزر العائم. |
| .plug-sc__inline | جدول معروض داخل الصفحة. |
/* Smaller table text on the storefront */
.plug-sc .plug-sc__table {
font-size: 13px;
}
/* Hide the floating button on phones */
@media (max-width: 749px) {
.plug-sc .plug-sc__float { display: none; }
}مهم: لا يُفحص CSS المخصص بحثًا عن الأخطاء. إذا توقّف شيء عن الظهور بشكل صحيح بعد تعديل، فامسح المربع واحفظ للعودة إلى الأنماط القياسية.
إعادة الضبط
يعيد استعادة الإعدادات الافتراضية كل خيار في النموذج إلى قيمته الافتراضية. لا يتغيّر شيء في متجرك حتى تنقر على حفظ.