كل قرار بصري في «سوق» يأتي من إعدادات التاجر
الألوان والخط والزوايا وشكل الأزرار والبطاقات والكثافة ونسبة الصور كلها متغيّرات CSS يكتبها المحرّك من إعدادات المتجر. اضغط إحدى الهويّات الثلاث أعلاه: تتغيّر الشاشات الست فورًا دون إعادة تحميل — هكذا تعمل المعاينة الحيّة في محرّر القالب.
- عربي RTL أولًا
- جوال أولًا 375px
- بلا أطر JS — جزر صغيرة فقط
- يعمل بلا JS (روابط، details، :target، :has)
- تباين AA مصحّح تلقائيًا
- كل المحتوى «مثال»
1 · الرئيسية — مبنية من الأقسام
افتح الشاشة كاملة ←hero (slider) · categories (tiles) · offers + عدّاد صادق · best_sellers (ترتيب) · banner (two_up) · brand_logos · product_grid · trust_badges · faq. داخل الشاشة: زر «إظهار الأقسام» يحدّد كل قسم باسمه.
375px
1280px (مصغّر 50٪)
2 · التصنيف مع الفلاتر
افتح الشاشة كاملة ←فلاتر Sheet على الجوال (CSS :target) وعمود ثابت على المكتب، رقائق الفلاتر المطبّقة، ترتيب، بطاقات مقارنة تتحاذى صفوفها (subgrid): الصورة، الاسم، المواصفات، السعر، المخزون.
375px
1280px
3 · صفحة المنتج
افتح الشاشة كاملة ←متغيّرات لون × سعة بتوفّر حقيقي لكل تركيبة، سعر بعلامة المنطقة (صنعاء/عدن) وسطر ر.س تقريبي، مؤشّر مخزون، ملخّص التوصيل والدفع، جدول أسعار السعات، وشريط شراء ثابت على الجوال.
375px
1280px
4 · السلة
افتح الشاشة كاملة ←تعديل الكمية وحذف مع «تراجع»، منتج نفد لا يُحسب، شريط التوصيل المجاني، وزر إتمام الطلب في منطقة الإبهام.
375px
1280px
5 · إتمام الطلب (صفحة واحدة)
افتح الشاشة كاملة ←المحافظة ← المديرية ← أقرب معلم، طرق توصيل مشتقة من المنطقة (جرّب «حجة» لحالة عدم التغطية)، الدفع عند الاستلام أو تحويل محفظة برقم العملية.
375px
1280px
6 · تتبّع الطلب
افتح الشاشة كاملة ←خط زمني من سجلّ الحالات فقط (لا مواعيد مخترعة)، إرسال رقم العملية لتحويل معلّق، والبحث برقم الطلب + الجوال (جرّب 1042).
375px
1280px