إنتقل إلى المحتوى الرئيسي

أول منتج مخصص في ٥ دقائق

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

ما سنقوم ببنائه​

منتج كوب أفاتار (Avatar Mug) مع خيارين للتخصيص:

  1. الاسم على الكوب — حقل نصي يكتب فيه العميل اسمه
  2. لون البشرة — اختيار من ٣ خيارات (فاتح، قمحي، داكن)

عند تفعيل المنتج، سيظهر للعميل واجهة تخصيص على صفحة المنتج تمكنه من إدخال اسمه واختيار لون البشرة، ثم مشاهدة معاينة مباشرة للكوب قبل إضافته إلى السلة.

الخطوة ١: فتح استوديو المنتجات​

  1. من لوحة تحكم استوديو المنتجات، اختر منتجًا من القائمة
  2. اضغط على زر "استوديو المنتجات" (Product Studio) بجانب المنتج

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > لوحة التحكم > قائمة المنتجات UI State: قائمة المنتجات مع مؤشر على منتج واحد (مثال: "كوب أفاتار"). زر "استوديو المنتجات" مظلل أو مشار إليه بسهم. What to Capture: صف المنتج في القائمة مع زر "استوديو المنتجات". إظهار اسم المنتج وحالته. RTL Note: القائمة RTL، اسم المنتج عربي من اليمين. Size: 1200×300px (اقتصاص صف واحد)

الخطوة ٢: إضافة حقل نص — اسم العميل​

عند فتح الاستوديو لأول مرة، ستظهر شاشة الإعدادات العامة (General Settings). اضغط على "ابدأ إضافة العناصر" للانتقال إلى طور التحرير.

  1. من الشريط الجانبي (Sidebar)، اضغط على زر "+ إضافة عنصر"
  2. من قائمة إضافة عنصر، اختر "حقل نصي" (Text Field)
  3. في لوحة المفتش (Inspector) على اليمين:
    • اكتب في خانة التسمية: الاسم على الكوب
    • اكتب في خانة النص التوضيحي: أدخل اسمك ليظهر على الكوب
    • فعّل خيار مطلوب (Required)
  4. اترك باقي الإعدادات على الوضع الافتراضي

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > الشريط الجانبي > إضافة عنصر > حقل نصي UI State: ظهور مربع حوار "إضافة عنصر" مع قائمة أنواع العناصر (حقل نصي، حقل نصي متعدد، رفع ملف، اختيار صورة، اختيار لون). مؤشر على خيار "حقل نصي". What to Capture: مربع حوار إضافة عنصر كامل مع القائمة. إظهار جميع أنواع الحقول المتاحة. RTL Note: القائمة RTL. النص العربي من اليمين. Size: 400×500px

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > المفتش > إعدادات الحقل النصي UI State: لوحة المفتش تعرض إعدادات الحقل النصي المُضاف حديثًا. خانة التسمية مكتوب فيها "الاسم على الكوب"، خانة النص التوضيحي "أدخل اسمك ليظهر على الكوب"، ومفتاح "مطلوب" مفعّل. What to Capture: لوحة المفتش كاملة مع الإعدادات المدخلة. RTL Note: لوحة المفتش RTL. الحقول والمفاتيح من اليمين. Size: 400×600px

الخطوة ٣: إضافة حقل اختيار صورة — لون البشرة​

  1. من الشريط الجانبي، اضغط على "+ إضافة عنصر" مرة أخرى
  2. اختر "اختيار صورة" (Image Choice)
  3. في المفتش:
    • اكتب في التسمية: لون البشرة
    • اترك مطلوب مفعل (افتراضي)
  4. اضغط على "إضافة خيار" لإنشاء الخيارات:
    • الخيار ١: الاسم فاتح — ارفع صورة مناسبة
    • الخيار ٢: الاسم قمحي — ارفع صورة مناسبة
    • الخيار ٣: الاسم داكن — ارفع صورة مناسبة

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > المفتش > إعدادات حقل اختيار الصورة UI State: لوحة المفتش تعرض إعدادات حقل اختيار الصورة مع ٣ خيارات مضافة: "فاتح"، "قمحي"، "داكن". كل خيار يظهر له صورة مصغرة. زر "إضافة خيار" ظاهر. What to Capture: قسم الخيارات في المفتش مع الخيارات الثلاثة المضافة وصورها المصغرة. RTL Note: أسماء الخيارات RTL. الترتيب من اليمين. Size: 400×500px

الخطوة ٤: حفظ المسودة والتحقق​

  1. اضغط على زر "حفظ" (Save) في الشريط العلوي
  2. انتظر تأكيد الحفظ — ستظهر رسالة "تم الحفظ" وتختفي علامة التعديلات غير المحفوظة
  3. اضغط على زر "تحقق" (Validate) في الشريط العلوي
  4. راجع نتيجة التحقق في لوحة التحقق — يجب أن تكون خالية من الأخطاء

⚠️ للأمان: لا تضغط على "تفعيل" بعد! نريد مراجعة المعاينة أولاً في الخطوة التالية.

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > الشريط العلوي > أزرار حفظ وتحقق UI State: الشريط العلوي يظهر اسم المنتج، أزرار "حفظ"، "تجاهل"، "تحقق"، و"تفعيل". بعد الحفظ الناجح، تظهر رسالة تأكيد خضراء. What to Capture: الشريط العلوي كامل مع رسالة تأكيد الحفظ. RTL Note: الشريط العلوي RTL. الأزرار من اليمين لليسار. Size: 1440×100px

الخطوة ٥: معاينة تجربة العميل​

  1. من الشريط الجانبي، انتقل إلى تبويب "معاينة العميل" (Customer Preview)
  2. جرب إدخال اسم في الحقل النصي
  3. جرب اختيار أحد ألوان البشرة
  4. لاحظ كيف تظهر التغييرات مباشرة في لوحة المعاينة

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > معاينة العميل UI State: لوحة معاينة العميل تظهر الودجت كما سيراه العميل. حقل "الاسم على الكوب" مع نص تجريبي مدخل. حقل "لون البشرة" مع تحديد أحد الخيارات. المعاينة المباشرة تظهر تحديث الكوب. What to Capture: لوحة المعاينة كاملة مع إظهار الحقلين وتفاعل العميل. RTL Note: الودجت RTL. النصوص والحقول من اليمين. Size: 800×600px

الخطوة ٦: التفعيل​

  1. اضغط على زر "تفعيل" (Activate) في الشريط العلوي
  2. ستظهر نافذة تأكيد — راجع الملخص (عدد التحذيرات، حالة الحفظ)
  3. اضغط على "تأكيد التفعيل"
  4. انتظر رسالة نجاح التفعيل

📸 Screenshot Needed

Dashboard Section: استوديو المنتجات > نافذة تأكيد التفعيل UI State: نافذة منبثقة (Modal) تظهر ملخص التفعيل: "التعديلات محفوظة"، "لا توجد تحذيرات"، "حقلين مطلوبين مكتملين". زر "تأكيد التفعيل" وزر "إلغاء". What to Capture: النافذة المنبثقة كاملة مع ملخص التفعيل. RTL Note: النافذة RTL. النص من اليمين. Size: 600×400px

الخطوة ٧: رؤية المنتج على المتجر​

  1. افتح صفحة المنتج على متجرك
  2. يجب أن يظهر ودجت التخصيص على صفحة المنتج
  3. جرب إدخال اسم واختيار لون — سترى المعاينة المباشرة
  4. أضف المنتج إلى السلة للتأكد من أن كل شيء يعمل

📸 Screenshot Needed

Dashboard Section: متجر سلة > صفحة المنتج UI State: صفحة منتج "كوب أفاتار" على المتجر الفعلي. يظهر ودجت التخصيص مع حقل "الاسم على الكوب" وحقل "لون البشرة". معاينة الكوب على اليسار (أو اليمين في RTL). What to Capture: صفحة المنتج كاملة مع الودجت. إظهار تكامل الودجت مع تصميم المتجر. RTL Note: صفحة المتجر RTL. الودجت RTL مع النصوص العربية. Size: 1440×900px

ملخص ما أنجزته​

خلال ٥ دقائق قمت بـ:

  • ✅ فتح استوديو المنتجات
  • ✅ إضافة حقل نصي (اسم العميل)
  • ✅ إضافة حقل اختيار صورة (لون البشرة)
  • ✅ حفظ المسودة والتحقق من صحتها
  • ✅ معاينة تجربة العميل
  • ✅ تفعيل المنتج ليظهر على المتجر

الخطوات التالية​

مقالات ذات صلة​

آخر تحديث: 2026-05-17

آخر تحديث في