كل ما تحتاجه لتخصيص قالب «أُنس» لمتاجر زد: الأقسام، الإعدادات العامة، الصفحات، المميزات، الفيديو، ونصائح الحل السريع. هذا الدليل يخص الإصدار النهائي من القالب (Zid Vitrin Theme).
1. البداية السريعة ومفاهيم المحرر
القالب مبني على Vitrin (Jinja) ويعمل بالعربية (RTL) والإنجليزية (LTR). كل شيء قابل للتحكم من محرر القالب في زد، بدون كتابة كود.
نوعان من الإعدادات
| النوع | أين تجده | يؤثر على |
|---|---|---|
| إعدادات القسم | اضغط على القسم داخل الصفحة الرئيسية | ذلك القسم فقط (نصوص، صور، فيديو، ألوان). |
| إعدادات الصفحة / القالب (عامة) | لوحة «إعدادات الصفحة» في المحرر: الألوان والشكل، بطاقات المنتجات، صفحة التصنيف، صفحة المنتج، دليل المقاسات، السلة، عام | كل الموقع: صفحات المنتج والسلة والتصنيف والكروت والفوتر. |
| الهيدر والفوتر | أعلى الصفحة / أسفل الصفحة في المحرر | الشعار، الإعلان، الروابط، ألوان الفوتر… |
اللغتان
المحتوى النصي يُحفظ لكل لغة. بعد ضبط النسخة العربية استخدم أيقونة «نسخ القسم إلى اللغة الإنجليزية» (أو العكس) ثم ترجم النصوص.
إعداد أول مرة (10 دقائق)
- ارفع الشعار وحدد عرضه من إعدادات الهيدر.
- أنشئ قائمة التنقل الرئيسية من لوحة زد (تظهر في الهيدر والفوتر والقائمة الجانبية).
- فعّل المفضلة وطرق الدفع من إعدادات المتجر في زد إن رغبت (تظهر تلقائيًا في الكروت والفوتر والسلة).
- في الرئيسية: عدّل الواجهة (hero) ثم أضف منتجاتك في المجموعة المميزة وكاروسيل المنتجات.
- اضبط ألوان الأزرار من «الألوان والشكل».
- راجع الصفحة على الجوال أولًا (أغلب الزوار).
2. أقسام الصفحة الرئيسية (14 قسمًا) مع الإعدادات
يمكنك إضافة الأقسام وإعادة ترتيبها وإخفائها من المحرر. الترتيب الافتراضي كما يلي:
واجهة رئيسية hero
واجهة الصفحة الرئيسية الكبيرة (الصورة أو الفيديو مع العنوان والزر). أول ما يراه الزائر.


- ارفع صورة منفصلة للجوال (900×1400 تقريبًا) لقص أفضل، وصورة الكمبيوتر بعرض 2400px.
- تحكم في موضع النص والزر (أفقي/رأسي) للكمبيوتر والجوال بشكل منفصل، وفي حجم العنوان والزر وألوانهم.
- يمكن استبدال الصورة بفيديو: ارفعه، أو الصق رابط ملف mp4/webm أو رابط YouTube/Vimeo.
- لو الفيديو ثقيل فعّل خيار «عرض الصورة بدل الفيديو على الجوال».
إعدادات القسم (32)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| نص صغير | نص | |
| العنوان | نص | |
| النص المساند | نص طويل | |
| نص الزر | نص | |
| رابط الزر | رابط | |
| إخفاء الزر | مربع تفعيل | |
| إخفاء النص الصغير | مربع تفعيل | |
| إخفاء النص المساند | مربع تفعيل | |
| الصورة (كمبيوتر) | صورة | |
| الصورة (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| فيديو (رفع مباشر) | فيديو (رفع) | اختياري. تظهر الصورة قبل التشغيل وعلى الأجهزة التي توفر البيانات. |
| رابط فيديو (YouTube / Vimeo / ملف مباشر) | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| عرض الصورة بدل الفيديو على الجوال | مربع تفعيل | |
| موضع الصورة على الجوالالمنتصف · الأعلى · الأسفل · اليسار · اليمين | قائمة اختيار | يحدد الجزء الظاهر من الصورة عند القص. |
| قوة التظليل على الجوالخفيف · متوسط · قوي | قائمة اختيار | يساعد على وضوح النص فوق الصورة. |
| ارتفاع القسم على الجوالمدمج · قياسي · طويل | قائمة اختيار | |
| موضع المحتوى أفقيًا (كمبيوتر)البداية · المنتصف · النهاية | قائمة اختيار | |
| موضع المحتوى رأسيًا (كمبيوتر)الأعلى · المنتصف · الأسفل | قائمة اختيار | |
| محاذاة النص (كمبيوتر)تلقائي · البداية · المنتصف · النهاية | قائمة اختيار | |
| عرض المحتوى (كمبيوتر)ضيق · قياسي · عريض | قائمة اختيار | |
| ارتفاع القسم (كمبيوتر)مدمج · قياسي · ملء الشاشة | قائمة اختيار | |
| قوة التظليل (كمبيوتر)بدون · خفيف · متوسط · قوي | قائمة اختيار | |
| حجم العنوانصغير · قياسي · كبير | قائمة اختيار | |
| لون النصوص | لون | اتركه فارغًا للون الأبيض الافتراضي. |
| موضع الزر بالنسبة للنصمع النص · البداية · المنتصف · النهاية | قائمة اختيار | |
| شكل الزرممتلئ · إطار فقط · نص بخط سفلي | قائمة اختيار | |
| حجم الزرصغير · قياسي · كبير | قائمة اختيار | |
| لون خلفية الزر | لون | |
| لون نص الزر | لون | |
| موضع المحتوى رأسيًا (جوال)الأعلى · المنتصف · الأسفل | قائمة اختيار | |
| محاذاة المحتوى (جوال)البداية · المنتصف · النهاية | قائمة اختيار | |
| عرض الزر (جوال)كامل العرض · حسب النص | قائمة اختيار |
مجموعة مميزة featured_collection
تبويبات منتجات (مثلًا الكراسي، المعيشة…) كل تبويب يعرض كاروسيل منتجات.


- أضف تبويبًا من زر الإضافة في «التبويبات» ثم اختر اسمه ومصدر المنتجات (أحدث / مخفض / تصنيف / منتجات محددة).
- القسم لا يظهر في المتجر إذا لم تضف منتجات (إلا لو فعّلت المحتوى التجريبي).
إعدادات القسم (5)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| التبويباتداخل كل عنصر: اسم التبويب، منتجات التبويب | قائمة عناصر | أضف تبويبًا لكل مجموعة منتجات. اختر مصدر المنتجات (أحدث / تصنيف / منتجات محددة) من القائمة داخل كل تبويب. |
| لون الخلفية | لون | |
| لون النص | لون | |
| عرض محتوى تجريبي عند عدم إضافة محتوى | مربع تفعيل | يظهر المحتوى التجريبي دائمًا في المحرر. فعّل هذا الخيار لإظهاره في المتجر الفعلي والجوال أيضًا إلى أن تضيف محتواك. |
مساحات المنزل selection
ثلاث بطاقات كبيرة لمساحات أو تصنيفات رئيسية، تظهر بحركة عند التمرير على الكمبيوتر.


- لكل بطاقة: صورة كمبيوتر وصورة جوال ورابط، ويمكن وضع فيديو للبطاقة عبر «رابط فيديو».
- الصور بطول (رأسي) 4:5 تعطي أفضل نتيجة.
إعدادات القسم (17)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| نص أزرار البطاقات | نص | |
| عنوان البطاقة 1 | نص | |
| صورة البطاقة 1 (كمبيوتر) | صورة | |
| صورة البطاقة 1 (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| رابط فيديو للبطاقة 1 | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| رابط البطاقة 1 | رابط | |
| عنوان البطاقة 2 | نص | |
| صورة البطاقة 2 (كمبيوتر) | صورة | |
| صورة البطاقة 2 (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| رابط فيديو للبطاقة 2 | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| رابط البطاقة 2 | رابط | |
| عنوان البطاقة 3 | نص | |
| صورة البطاقة 3 (كمبيوتر) | صورة | |
| صورة البطاقة 3 (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| رابط فيديو للبطاقة 3 | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| رابط البطاقة 3 | رابط |
مشهد فيديو media_story
مشهد عريض بفيديو أو صورة مع عنوان ووصف.


- الفيديو: ارفع ملف (حتى 10MB حسب Zid) أو ضع رابط YouTube/Vimeo أو رابط ملف مباشر.
- على الجوال تظهر الصورة الثابتة، فعّل «تشغيل الفيديو على الجوال» إذا أردته متحركًا.
إعدادات القسم (9)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| نص صغير | نص | |
| العنوان | نص | |
| النص المساند | نص طويل | |
| فيديو (رفع مباشر) | فيديو (رفع) | اختياري. تظهر الصورة قبل التشغيل وعلى الأجهزة التي توفر البيانات. |
| رابط فيديو (YouTube / Vimeo / ملف مباشر) | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| صورة الغلاف (كمبيوتر) | صورة | |
| صورة الغلاف (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| موضع الصورة على الجوالالمنتصف · الأعلى · الأسفل · اليسار · اليمين | قائمة اختيار | يحدد الجزء الظاهر من الصورة عند القص. |
| تشغيل الفيديو على الجوال | مربع تفعيل | افتراضيًا يعرض الجوال صورة الغلاف فقط لتوفير البيانات. |
كوّن مجموعتك product_bundle
«كوّن مجموعتك»: الزائر يختار حتى 4 منتجات ويضيفها دفعة واحدة للسلة.


- اختر المنتجات من منتقي المنتجات (4 على الأقل لتبدو كاملة).
- تُضاف المنتجات للسلة بالمعرّف الأصلي لكل منتج؛ المنتجات ذات الخيارات تحتاج اختيار خيار من صفحة المنتج.
إعدادات القسم (6)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| نص صغير | نص | |
| العنوان | نص | |
| المنتجات (حتى 4) | اختيار منتجات | |
| لون الخلفية | لون | |
| لون النص | لون | |
| عرض محتوى تجريبي عند عدم إضافة محتوى | مربع تفعيل | يظهر المحتوى التجريبي دائمًا في المحرر. فعّل هذا الخيار لإظهاره في المتجر الفعلي والجوال أيضًا إلى أن تضيف محتواك. |
تسوق حسب المساحة shop_by_collection
«تسوق حسب المساحة»: قائمة مساحات كبيرة تتبدل خلفيتها عند المرور (ديسكتوب) وبطاقات على الجوال.


- أضف حتى 6 مساحات؛ لكل واحدة اسم وصورة كمبيوتر وصورة جوال ورابط وفيديو اختياري.
إعدادات القسم (2)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| المساحاتداخل كل عنصر: الاسم، الصورة (كمبيوتر)، الصورة (جوال)، الرابط، رابط فيديو (اختياري) | قائمة عناصر | اتركها فارغة لعرض المساحات الافتراضية. |
نص مع صورة text_with_image
نص مع صورة أو فيديو وزر.


- الصورة الثانية (قطعة أثاث بخلفية شفافة PNG) تظهر عائمة على الكمبيوتر.
- يمكنك استبدال الصورة الرئيسية بفيديو.
إعدادات القسم (14)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| النص | نص طويل | |
| نص الزر | نص | |
| رابط الزر | رابط | |
| إخفاء الزر | مربع تفعيل | |
| الصورة الرئيسية (كمبيوتر) | صورة | |
| الصورة الرئيسية (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| فيديو (رفع مباشر) | فيديو (رفع) | اختياري. تظهر الصورة قبل التشغيل وعلى الأجهزة التي توفر البيانات. |
| رابط فيديو (YouTube / Vimeo / ملف مباشر) | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| عرض الصورة بدل الفيديو على الجوال | مربع تفعيل | |
| موضع الصورة على الجوالالمنتصف · الأعلى · الأسفل · اليسار · اليمين | قائمة اختيار | يحدد الجزء الظاهر من الصورة عند القص. |
| صورة المنتج العائمة | صورة | الأفضل PNG بخلفية شفافة. |
| لون الخلفية | لون | |
| لون النص | لون |
كاروسيل منتجات product_carousel
كاروسيل منتجات بسيط بعنوان.


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


- يتوقف تلقائيًا لو المستخدم مفعّل «تقليل الحركة» في جهازه.
إعدادات القسم (4)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| اسم العلامة | نص | اتركه فارغًا لاستخدام اسم المتجر. |
| العبارة | نص | |
| لون الخلفية | لون | |
| لون النص | لون |
الأسئلة الشائعة faq
الأسئلة الشائعة بجانب صورة أو فيديو.


- أضف الأسئلة من القائمة؛ أول سؤال يكون مفتوحًا افتراضيًا.
إعدادات القسم (13)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| الوصف | نص طويل | |
| الصورة (كمبيوتر) | صورة | |
| الصورة (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| فيديو (رفع مباشر) | فيديو (رفع) | اختياري. تظهر الصورة قبل التشغيل وعلى الأجهزة التي توفر البيانات. |
| رابط فيديو (YouTube / Vimeo / ملف مباشر) | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| عرض الصورة بدل الفيديو على الجوال | مربع تفعيل | |
| عنوان قائمة الأسئلة | نص | |
| وصف قائمة الأسئلة | نص طويل | |
| الأسئلةداخل كل عنصر: السؤال، الإجابة | قائمة عناصر | |
| لون الخلفية | لون | |
| لون النص | لون | |
| عرض محتوى تجريبي عند عدم إضافة محتوى | مربع تفعيل | يظهر المحتوى التجريبي دائمًا في المحرر. فعّل هذا الخيار لإظهاره في المتجر الفعلي والجوال أيضًا إلى أن تضيف محتواك. |
آراء العملاء testimonials
آراء العملاء بصورة وتقييم، مع أسهم وسحب.


- كل رأي: صورة (كمبيوتر/جوال) أو فيديو، النص، الاسم، الوصف.
إعدادات القسم (4)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| الآراءداخل كل عنصر: الصورة (كمبيوتر)، الصورة (جوال)، الرأي، الاسم، الوصف، رابط فيديو (اختياري) | قائمة عناصر | أضف آراء عملائك الحقيقية. القسم يختفي إذا تُرك فارغًا. |
| لون الخلفية | لون | |
| لون النص | لون | |
| عرض محتوى تجريبي عند عدم إضافة محتوى | مربع تفعيل | يظهر المحتوى التجريبي دائمًا في المحرر. فعّل هذا الخيار لإظهاره في المتجر الفعلي والجوال أيضًا إلى أن تضيف محتواك. |
المدونة blog
بطاقات مقالات المدونة (عنوان، مقتطف، صورة، رابط، تاريخ).


- الروابط الفارغة تفتح صفحة المدونة /blogs.
إعدادات القسم (6)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| نص رابط المقال | نص | |
| المقالاتداخل كل عنصر: العنوان، المقتطف، الصورة، الرابط، التاريخ | قائمة عناصر | أضف روابط مقالاتك. القسم يختفي إذا تُرك فارغًا. |
| لون الخلفية | لون | |
| لون النص | لون | |
| عرض محتوى تجريبي عند عدم إضافة محتوى | مربع تفعيل | يظهر المحتوى التجريبي دائمًا في المحرر. فعّل هذا الخيار لإظهاره في المتجر الفعلي والجوال أيضًا إلى أن تضيف محتواك. |
صور التواصل social_feed
شبكة صور من حسابات التواصل أو أعمالك.


- لكل عنصر صورة أو رابط فيديو، عنوان ونص ورابط.
إعدادات القسم (6)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| حساب التواصل | نص | مثال: @mystore |
| الصورداخل كل عنصر: الصورة، العنوان، النص، الرابط، رابط فيديو (اختياري) | قائمة عناصر | القسم يختفي إذا تُرك فارغًا. |
| لون الخلفية | لون | |
| لون النص | لون | |
| عرض محتوى تجريبي عند عدم إضافة محتوى | مربع تفعيل | يظهر المحتوى التجريبي دائمًا في المحرر. فعّل هذا الخيار لإظهاره في المتجر الفعلي والجوال أيضًا إلى أن تضيف محتواك. |
آراء متحركة reviews_glass
آراء بتصميم زجاجي فوق صورة أو فيديو خلفية.


- ارفع خلفية للكمبيوتر وأخرى للجوال، أو فيديو خلفية.
إعدادات القسم (9)
| الإعداد | النوع | ملاحظة |
|---|---|---|
| نص صغير | نص | |
| العنوان | نص | |
| صورة الخلفية (كمبيوتر) | صورة | |
| صورة الخلفية (جوال) | صورة | يستخدم صورة الكمبيوتر إذا لم تُرفع صورة للجوال. |
| فيديو (رفع مباشر) | فيديو (رفع) | اختياري. تظهر الصورة قبل التشغيل وعلى الأجهزة التي توفر البيانات. |
| رابط فيديو (YouTube / Vimeo / ملف مباشر) | نص | رابط مباشر لملف mp4 / webm (من استضافتك مثل Bunny أو Cloudflare R2 أو Backblaze B2 أو Amazon S3) أو رابط YouTube أو Vimeo. يتغلب على الفيديو المرفوع. |
| عرض الصورة بدل الفيديو على الجوال | مربع تفعيل | |
| الآراءداخل كل عنصر: الصورة، الاسم، المدينة، الرأي | قائمة عناصر | القسم يختفي إذا تُرك فارغًا. |
| عرض محتوى تجريبي عند عدم إضافة محتوى | مربع تفعيل | يظهر المحتوى التجريبي دائمًا في المحرر. فعّل هذا الخيار لإظهاره في المتجر الفعلي والجوال أيضًا إلى أن تضيف محتواك. |
تنبيه مهم: الأقسام الفارغة
لماذا بعض الأقسام تظهر في المحرر ولا تظهر في المتجر أو الجوال؟
في المحرر يعرض القالب محتوى تجريبيًا للأقسام الفارغة لتخيّل الشكل. في المتجر الفعلي تُخفى الأقسام التي لا تحتوي بيانات: المنتجات المميزة، الباقة، كاروسيل المنتجات، الأسئلة الشائعة، آراء العملاء، المدونة، صور التواصل، الآراء المتحركة.
الحل: أضف محتواك الحقيقي، أو فعّل «عرض محتوى تجريبي عند عدم إضافة محتوى» داخل القسم لإظهاره مؤقتًا في المتجر.
3. الهيدر والبحث والقائمة الجانبية والفوتر
الهيدر


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

- النتائج تظهر أثناء الكتابة بعد حرفين (صورة، اسم، سعر) بدون الضغط على «بحث».
- زر «عرض كل النتائج» يفتح صفحة نتائج كاملة. يمكن إخفاء البحث من إعدادات الهيدر.
الفوتر


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


- دوائر الألوان: تظهر تلقائيًا إذا كان للمنتج خيار لون، وقد يجلب القالب الخيارات من زد عند ظهور البطاقة. يمكن تحديد أقصى عدد أو إخفاؤها.
- المفضلة (قلب): تظهر عند تفعيل المفضلة في زد. الزائر غير المسجل يتحول لتسجيل الدخول.
- النظرة السريعة (عين): تفتح نافذة بالمنتج وخياراته ويمكن الإضافة للسلة منها (على الجوال تظهر كشاشة سفلية).
- الإضافة السريعة (موبايل): المنتج بدون خيارات يُضاف للسلة مباشرة، وإلا يظهر «اختر الخيارات».
- من «الإعدادات العامة ← بطاقات المنتجات» تتحكم في نسبة الصورة وقصها وإخفاء كل عنصر.
5. صفحة التصنيف وصفحة كل المنتجات
البانر العلوي مركزي افتراضيًا ويمكن التحكم به بالكامل من «الإعدادات العامة ← صفحة التصنيف».
- إخفاء البانر، أو بانر افتراضي واحد، أو بانر مختلف لكل تصنيف (اختر التصنيف ثم صورة الكمبيوتر وصورة الجوال وعنوانًا مختلفًا اختياريًا).
- إخفاء العنوان أو الوصف، تغيير موضع النص أفقيًا ورأسيًا، ارتفاع منفصل للكمبيوتر والجوال، قوة التظليل، لون النص.
- عدد الأعمدة: 3 أو 4 للكمبيوتر، و1 أو 2 للجوال. إخفاء شريط التصفية والترتيب.
6. صفحة المنتج ودليل المقاسات


- الخيارات (لون/مقاس) من مكوّن زد الرسمي؛ تتحدّث الصورة والسعر والمخزون عند تغيير الخيار، ويظهر شريط خصم تلقائي.
- شريط المميزات (3 عناصر) قابل للتعديل بالكامل (النص والأيقونة)، أو الإخفاء.
- أقسام المعلومات (الشحن والعناية) قابلة للاستبدال بأقسامك (عنوان + نص).
- طرق الدفع وApple Pay ومعلومات الخصم تظهر من زد تلقائيًا إذا كانت مفعّلة في المتجر.
- المنتجات المقترحة كاروسيل (سحب على الجوال وأسهم على الكمبيوتر).
- شريط ثابت أسفل الشاشة عند التمرير: «أضف للسلة» و«اشترِ الآن» جنبًا إلى جنب.


دليل المقاسات


- تُخصَّص من «الإعدادات العامة ← دليل المقاسات»: العنوان، نص تمهيدي، صورة جدول جاهزة، عناوين الأعمدة (حتى 4)، صفوف الجدول، نصائح القياس، ملاحظة.
- لو أضفتَ صفوفًا أو صورة يظهر تبويب «جدول المقاسات» أولًا.
- يمكن إخفاؤه من إعدادات صفحة المنتج.
7. السلة وتأكيد الإضافة


- بطاقة ملخص ثابتة، كوبون قابل للطي، زر دفع، أيقونات (دفع آمن / شحن / استبدال) وشريط شعارات الدفع.
- على الجوال: شريط ثابت أسفل الشاشة يعرض الإجمالي وزر إتمام الطلب (يمكن إيقاف التثبيت).
- أزرار الكمية بتصميم كبسولة بحجم مناسب للمس.
- عرض عناصر السلة نفسه يأتي من مكوّن زد، والقالب يجمّله.
تأكيد الإضافة للسلة

- نافذة منبثقة بصورة المنتج وأزرار «عرض السلة» و«إتمام الطلب»، يتحول الزر إلى «تمت الإضافة ✓»، ويتحرك عداد السلة.
- يمكن إيقافها من «عام».
8. الإعدادات العامة (مرجع كامل)
تظهر في لوحة «إعدادات الصفحة». هذه كل المجموعات والإعدادات:
الألوان والشكل
| الإعداد | النوع | ملاحظة |
|---|---|---|
| لون الأزرار الرئيسية | لون | يطبق على أزرار إضافة للسلة وإتمام الطلب وتطبيق الخصم. |
| لون نص الأزرار الرئيسية | لون | |
| خلفية الصفحات الداخلية | لون | المنتج والتصنيف والسلة. |
| لون النص في الصفحات الداخلية | لون | |
| استدارة الأزرارالافتراضي · حادة · ناعمة · دائرية | قائمة اختيار | |
| استدارة الصور والبطاقاتالافتراضي · حادة · ناعمة · مستديرة | قائمة اختيار |
بطاقات المنتجات
| الإعداد | النوع | ملاحظة |
|---|---|---|
| إخفاء دوائر الألوان | مربع تفعيل | تظهر دوائر الألوان تلقائيًا إذا كان للمنتج خيار لون. |
| أقصى عدد للألوان3 · 4 · 5 · 6 · 8 | قائمة اختيار | |
| إخفاء اسم المتجر فوق اسم المنتج | مربع تفعيل | |
| إخفاء زر الإضافة السريعة | مربع تفعيل | زر يظهر على بطاقات صفحات التصنيف على الجوال. |
| نسبة صورة البطاقةالافتراضي · مربع 1:1 · طولي 4:5 · طولي 3:4 · طولي 5:6 · عرضي 4:3 | قائمة اختيار | |
| قص صورة البطاقةالافتراضي · ملء الإطار (قص) · إظهار كاملة | قائمة اختيار | |
| إخفاء أيقونة المفضلة | مربع تفعيل | تظهر تلقائيًا إذا كانت المفضلة مفعّلة في إعدادات المتجر. |
| إخفاء أيقونة النظرة السريعة | مربع تفعيل |
صفحة التصنيف
| الإعداد | النوع | ملاحظة |
|---|---|---|
| إخفاء البانر | مربع تفعيل | |
| صورة البانر الافتراضية (كمبيوتر) | صورة | تُستخدم لكل التصنيفات التي ليس لها بانر خاص أدناه. |
| صورة البانر الافتراضية (جوال) | صورة | تستخدم صورة الكمبيوتر إذا تُركت فارغة. |
| بانر مخصص لكل تصنيفداخل كل عنصر: التصنيف، صورة (كمبيوتر)، صورة (جوال)، عنوان مختلف (اختياري)، إخفاء النص لهذا التصنيف | قائمة عناصر | أضف تصنيفًا واختر له صورة (كمبيوتر وجوال) وعنوانًا مختلفًا اختياريًا. |
| إخفاء العنوان والوصف | مربع تفعيل | |
| إخفاء الوصف فقط | مربع تفعيل | |
| موضع النص أفقيًاالبداية · المنتصف · النهاية | قائمة اختيار | |
| موضع النص رأسيًاالأعلى · المنتصف · الأسفل | قائمة اختيار | |
| ارتفاع البانر (كمبيوتر) | شريط قيمة | 0 = تلقائي. |
| ارتفاع البانر (جوال) | شريط قيمة | 0 = تلقائي. |
| قوة التظليلبدون · خفيف · متوسط · قوي | قائمة اختيار | |
| لون النص | لون | |
| عدد الأعمدة (كمبيوتر)3 · 4 | قائمة اختيار | |
| عدد الأعمدة (جوال)1 · 2 | قائمة اختيار | |
| إخفاء شريط التصفية والترتيب | مربع تفعيل |
صفحة المنتج
| الإعداد | النوع | ملاحظة |
|---|---|---|
| إخفاء مسار التنقل | مربع تفعيل | |
| إخفاء التقييم | مربع تفعيل | |
| إخفاء زر المفضلة | مربع تفعيل | |
| إخفاء شريط المميزات | مربع تفعيل | |
| مميزات المنتجداخل كل عنصر: الأيقونة، النص | قائمة عناصر | اتركها فارغة لعرض المميزات الافتراضية. |
| إخفاء دليل المقاسات | مربع تفعيل | |
| إخفاء زر اشترِ الآن | مربع تفعيل | |
| إخفاء شعارات الدفع | مربع تفعيل | |
| إخفاء قسم (الشحن / العناية) | مربع تفعيل | |
| أقسام المعلومات (الشحن، العناية…)داخل كل عنصر: العنوان، النص | قائمة عناصر | اتركها فارغة لعرض قسمي الشحن والعناية الافتراضيين. |
| إخفاء المنتجات المقترحة | مربع تفعيل | |
| عنوان المنتجات المقترحة | نص | |
| إخفاء آراء العملاء | مربع تفعيل | |
| عنوان آراء العملاء | نص | |
| إخفاء شريط الإضافة للسلة المثبّت | مربع تفعيل |
صفحة السلة
| الإعداد | النوع | ملاحظة |
|---|---|---|
| عنوان الصفحة | نص | |
| إخفاء عنوان الصفحة | مربع تفعيل | |
| نص زر إتمام الطلب | نص | |
| نص رابط متابعة التسوق | نص | |
| إخفاء رابط متابعة التسوق | مربع تفعيل | |
| إخفاء خانة الخصم | مربع تفعيل | |
| ملاحظة تحت زر الدفع | نص | مثال: الدفع آمن ومشفّر. |
| عدم تثبيت زر الدفع أسفل الشاشة على الجوال | مربع تفعيل | |
| عنوان السلة الفارغة | نص | |
| نص زر السلة الفارغة | نص | |
| إخفاء أيقونات (دفع آمن / شحن / استبدال) | مربع تفعيل | |
| إخفاء شعارات طرق الدفع | مربع تفعيل |
عام
| الإعداد | النوع | ملاحظة |
|---|---|---|
| رقم واتساب | نص | مع رمز الدولة، مثال: 966500000000. يظهر زر عائم. |
| إيقاف نافذة تأكيد الإضافة للسلة | مربع تفعيل | |
| رسالة واتساب الافتراضية | نص | |
| موضع زر واتسابالنهاية · البداية | قائمة اختيار | |
| إيقاف التمرير الناعم | مربع تفعيل | |
| CSS مخصص | نص طويل | لمطورين: يُضاف في كل الصفحات. |
| كود مخصص في <head> | كود HTML |
دليل المقاسات
| الإعداد | النوع | ملاحظة |
|---|---|---|
| العنوان | نص | |
| نص تمهيدي | نص | |
| صورة جدول المقاسات | صورة | اختياري: ترفع صورة جاهزة للجدول. |
| عنوان عمود الأسماء | نص | افتراضي: المقاس |
| عنوان العمود 1 | نص | مثال: العرض (سم) |
| عنوان العمود 2 | نص | |
| عنوان العمود 3 | نص | |
| عنوان العمود 4 | نص | |
| صفوف الجدولداخل كل عنصر: الاسم / المقاس، العمود 1، العمود 2، العمود 3، العمود 4 | قائمة عناصر | |
| نصائح القياسداخل كل عنصر: العنوان، النص | قائمة عناصر | تستبدل تبويب (طريقة القياس). |
| ملاحظة | نص طويل |
9. الصور والفيديو
مقاسات الصور المقترحة
| الموضع | الكمبيوتر | الجوال |
|---|---|---|
| واجهة الهيرو | 2400×1350 (16:9) | 900×1400 (رأسي) |
| بطاقات «مساحات المنزل» | 1200×1500 (4:5) | 900×1100 |
| نص مع صورة / الأسئلة الشائعة | 1600×1200 | 1000×1000 |
| بانر التصنيف | 2400×700 | 1000×800 |
| صور المنتجات (من زد) | مربعة أو 4:5 بخلفية نظيفة | |
الفيديو في الأقسام
- متاح في: الهيرو، مشهد الفيديو، نص مع صورة، الأسئلة الشائعة، الآراء المتحركة، بطاقات «مساحات المنزل»، «تسوق حسب المساحة»، الآراء، صور التواصل.
- ثلاث طرق: رفع مباشر (mp4 / webm / ogg حتى 10MB حسب زد)، أو رابط ملف مباشر، أو رابط YouTube أو Vimeo.
- الرابط يتغلب على الفيديو المرفوع.
- الصورة تبقى كخلفية قبل التشغيل، وتُستخدم بدل الفيديو عند «توفير البيانات» أو «تقليل الحركة» أو إذا فعّلت «عرض الصورة بدل الفيديو على الجوال».
- الفيديو صامت ومتكرر ولا يُحمَّل إلا عند اقتراب القسم من الشاشة.
استضافة الفيديو (للروابط المباشرة)
| الخدمة | لماذا |
|---|---|
| Bunny Stream / Bunny CDN | سريع ورخيص ويعطي رابط mp4 مباشر |
| Cloudflare R2 (+CDN) | بدون رسوم نقل بيانات تقريبًا |
| Backblaze B2 + Cloudflare | أرخص تخزين |
| Amazon S3 + CloudFront | الأكثر استقرارًا للمشاريع الكبيرة |
نصيحة: ملف mp4 مضغوط (H.264) من 3 إلى 8MB للخلفيات.
10. الربط مع زد وما يلزم تفعيله
| الميزة | ما يلزم من زد |
|---|---|
| قائمة التنقل والمجموعات | إنشاء القائمة الرئيسية في زد |
| المفضلة | تفعيلها في إعدادات المنتجات في زد |
| شعارات الدفع | طرق الدفع المفعّلة في المتجر |
| Apple Pay / الدفع السريع | تفعيله في إعدادات الدفع؛ يظهر من مكوّن زد تلقائيًا، وغيابه لا يسبب مشكلة |
| أيقونات التواصل والبريد والجوال | إعدادات التواصل في المتجر |
| التقييمات | تفعيل التقييمات في المتجر |
| الكوبونات | تفعيل خانة الكوبون في إعدادات الدفع |
| شعار المتجر | يُستخدم شعار الهيدر أو شعار المتجر |
القالب يستخدم واجهات زد الرسمية: السلة (zid.cart)، المنتجات والبحث (zid.products)، والمفضلة (zid.account).
11. حل المشاكل الشائعة
| المشكلة | الحل |
|---|---|
| قسم يظهر في المحرر ولا يظهر في المتجر | أضف محتوى حقيقيًا أو فعّل المحتوى التجريبي داخل القسم. |
| التعديلات لا تظهر | حدّث الصفحة بالإجبار (Ctrl/Cmd+Shift+R) أو افتحها في نافذة خاصة. |
| لا تظهر دوائر الألوان على الكروت | تأكد أن المنتج له خيار اسمه «اللون/Color». لو الخيارات لا تصل من زد قد تتأخر في الظهور لحظات. يمكن إخفاؤها من «بطاقات المنتجات». |
| عداد السلة لا يظهر | يظهر عند وجود منتجات في السلة بعد تحميل زد SDK (لحظات بعد فتح الصفحة). |
| أيقونة القلب لا تظهر | فعّل المفضلة من إعدادات المنتجات في زد. |
| الفيديو لا يعمل | تأكد أن الرابط مباشر mp4/webm أو رابط YouTube/Vimeo عام. على الجوال فعّل تشغيل الفيديو (قد يكون مخفيًا لتوفير البيانات). |
| خطأ «No route exists for …name» | ارفع النسخة الأحدث كاملة؛ الروابط الثابتة مثل /blogs لا تحتاج مسارًا. |
| شكل عناصر السلة غير مرتب | التصميم يطبق على مكوّن زد؛ أرسل لقطة شاشة لتعديل الـCSS. |
| الأقسام تتحرك كثيرًا | المستخدم لديه «تقليل الحركة»، أو يمكنك إيقاف التمرير الناعم من «عام». |
12. قائمة مراجعة قبل الإطلاق
- الشعار وقائمة التنقل.
- نسخة الهيرو للجوال (صورة منفصلة).
- كل الأقسام المعروضة لها محتوى حقيقي، وأُخفيت غير المستخدمة.
- طرق الدفع والمفضلة وApple Pay مفعّلة حسب الرغبة.
- جرّب: إضافة منتج بخيارات، السلة، الكوبون، البحث، النظرة السريعة على الجوال.
- نسِّخ الإعدادات إلى النسخة الإنجليزية وراجعها.
- دليل المقاسات وأقسام الشحن والعناية بنصوصك.
- افحص الصفحة على 360 و390 و430 و768 وكمبيوتر.
Last updated October 19, 2026