استوديو المتجر هو المكان الذي تصمّم فيه واجهة متجرك وتكتب نصوصها، ومتجرك الحقيقي أمامك بجانب الأدوات. يأخذك هذا الدليل في جولة على الشاشة، لتعرف مكان كل أداة وكيف ترى متجرك كما يراه عملاؤك.
فتح الاستوديو
- من القائمة الجانبية، تحت واجهة المتجر، افتح التصميم. وإذا أردت الوصول إلى النصوص مباشرة، افتح المحتوى.
يجمع الشريط العلوي كل ما ليس أداة تصميم:
| الأداة | ماذا تفعل |
|---|---|
| الحالة تحت استوديو المتجر | تخبرك هل يرى العملاء ما على الشاشة: منشور أو تغييرات غير منشورة أو لم يُنشر بعد. وقبل أول نشر، ما دامت قائمة «جهّز متجرك» غير مكتملة، يظهر مكانها أكمل التجهيز للنشر، وإلى أن تستخدم الرابط الذي أرسلناه إلى بريدك عند التسجيل يظهر مكانها أكّد بريدك الإلكتروني للنشر. شرح كل حالة |
| علامة ؟ بجانب العنوان | تفتح مقال المساعدة الخاص بالتبويب الذي أنت فيه، في تبويب جديد من المتصفح: هذا المقال في التصميم، وكتابة نصوص واجهة متجرك في المحتوى. |
| مبدّل اللغة (مثلاً الإنجليزية والعربية) | يعرض المعاينة بلغة أخرى من لغات متجرك. يظهر فقط إذا كان متجرك يبيع بأكثر من لغة. |
| الرئيسية والمنتج | الصفحة التي تعرضها المعاينة. |
| أيقونات الأجهزة الثلاث | المعاينة على الكمبيوتر أو الجهاز اللوحي أو الجوال. |
| أيقونة ملء الشاشة | تخفي كل شيء ما عدا المعاينة. |
| إنشاء بالذكاء الاصطناعي | يصمّم الذكاء الاصطناعي واجهة متجرك كاملة ويكتب نصوصها من وصف قصير. إنشاء واجهة متجرك بالذكاء الاصطناعي |
| التراجع عن الإنشاء | يظهر بعد الإنشاء بالذكاء الاصطناعي، حتى تغادر الاستوديو أو تعيد تحميله، ويعيد التصميم الذي كان عندك قبله مباشرة. |
| عرض المتجر | يفتح واجهة متجرك المنشورة في تبويب جديد. |
| حفظ المسودة | يحتفظ بتغييراتك بدون أن يراها العملاء. |
| نشر | يجعل ما على الشاشة ظاهراً للعملاء. |
ملاحظة
قبل أول نشر لمتجرك، لا يفتح الاستوديو إلا بعد إكمال قائمة «جهّز متجرك» على الرئيسية (ربط HyperPay يمكن أن ينتظر حتى النشر). وحتى ذلك الحين، يعيدك فتحه إلى الرئيسية مع الرسالة أكمل تجهيز متجرك قبل تصميمه. القائمة على الرئيسية. قائمة «جهّز متجرك» قبل أول نشر
التصميم والمحتوى
في أعلى لوحة الأدوات تبويبان:
- التصميم فيه كل ما يخص شكل واجهة المتجر: الألوان والخطوط والمسافات والأزرار وبطاقات المنتجات والترويسة وترتيب أقسام الصفحة الرئيسية والحركة والتذييل.
- المحتوى فيه الكلمات: شريط الإعلان، وعنوان البانر الرئيسي وأزراره، وقسم «من نحن»، وشارات الثقة الأربع، وعنوان التقييمات، ونص النشرة البريدية. تكتبها للغة التي تعرضها المعاينة. كتابة نصوص واجهة متجرك
التنقل بين التبويبين لا يُضيع أي تغيير غير محفوظ. التبويب جزء من عنوان الصفحة، فإعادة التحميل تفتح التبويب نفسه، ورابط المحتوى في القائمة الجانبية يفتح الاستوديو على هذا التبويب مباشرة.
مجموعات التصميم، وأين تجد شرح كل منها
في تبويب التصميم اثنتا عشرة مجموعة، بهذا الترتيب:
| المجموعة | ماذا تضبط | الشرح في |
|---|---|---|
| الثيم | شكلاً كاملاً تبدأ منه: الألوان والخط والزوايا والظلال والكثافة، والوضع الفاتح أو الداكن | اختيار الثيم والألوان والخطوط |
| الألوان | لون العلامة واللون المميّز واللون المحايد | اختيار الثيم والألوان والخطوط |
| الخطوط | الخط، وخط العناوين، وخط النص، ومقياس الخط، وشكل الأرقام | اختيار الثيم والألوان والخطوط |
| التخطيط والكثافة | المسافات في شبكة المنتجات، والمسافة بين الأقسام، وبطاقات الفئات | ضبط المسافات والأزرار وبطاقات المنتجات |
| الشكل والظل | الزوايا والظلال | ضبط المسافات والأزرار وبطاقات المنتجات |
| الأزرار | نمط الأزرار وحجمها، وحالة أحرف الأزرار والعبارات الصغيرة في واجهة المتجر | ضبط المسافات والأزرار وبطاقات المنتجات |
| بطاقة المنتج | نسبة الصورة، والشارات، وعيّنات الألوان، والإضافة السريعة، والتقييم بالنجوم، وتبديل الصور تلقائياً، وتنبيه المخزون المنخفض | ضبط المسافات والأزرار وبطاقات المنتجات |
| الترويسة | شعارك، وارتفاع البانر الرئيسي ونقطة تركيزه وصورته، وثلاثة خيارات للترويسة | ضبط الترويسة وصورة البانر الرئيسي |
| أقسام الصفحة الرئيسية | الأقسام الظاهرة وترتيبها | ترتيب أقسام الصفحة الرئيسية |
| قسم «من نحن» | ارتفاع قسم «من نحن» وصورته | ترتيب أقسام الصفحة الرئيسية |
| الحركة | مقدار الحركة في واجهة المتجر | ضبط المسافات والأزرار وبطاقات المنتجات |
| التذييل | طرق الدفع وزر واتساب | ضبط التذييل وزر واتساب |
لوحة الأدوات: اطوِ المجموعات واسحبها لتتسع
اثنتا عشرة مجموعة مفتوحة تجعل اللوحة طويلة، فاطوِ ما لا تستخدمه:
- انقر عنوان المجموعة لطيّها، وانقره مرة أخرى لفتحها.
تبقى المجموعة المطوية تعرض إعدادها الحالي في طرف عنوانها، فتجد ما تريده بدون أن تفتح كل مجموعة. وتعرض أقسام الصفحة الرئيسية عدد الأقسام الظاهرة من المجموع، مثلاً 8/8. يتذكر الاستوديو المجموعات التي طويتها، على هذا المتصفح.
ولتعطي الأدوات مساحة أكبر، اسحب الفاصل بين اللوحة والمعاينة:
- ضع المؤشر على الفاصل الرفيع بين اللوحة والمعاينة.
- اسحبه نحو المعاينة لتوسيع اللوحة، أو في الاتجاه الآخر لتضييقها. يتراوح عرض اللوحة بين 280 و640 بكسل.
- انقر الفاصل مرتين لتعيد اللوحة إلى عرضها المعتاد.
يتذكر المتصفح هذا العرض أيضاً. وعلى شاشة أضيق من 900 بكسل، مثل جهاز لوحي صغير، تظهر اللوحة فوق المعاينة ولا يمكن سحبها.
المعاينة المباشرة
المعاينة ليست صورة لقالب. إنها واجهة متجرك الحقيقية، بمنتجاتك وفئاتك وأسعارك وتقييماتك، تعرض تصميمك في المسودة. يظهر كل تغيير فيها فوراً، ولا يصل شيء منه إلى العملاء حتى تنشر.
يمكنك التمرير داخل المعاينة واستخدامها كما يستخدم العميل واجهة المتجر: افتح القائمة، وتنقّل بين الأقسام، وجرّب أداة اختيار اللغة في واجهة المتجر. إذا اخترت منها لغة أخرى، يتبعها مبدّل اللغة في الاستوديو.
المعاينة على الجهاز اللوحي أو الجوال أو صفحة منتج
معظم عملائك سيرون متجرك على الجوال، فراجع كل تغيير هناك قبل النشر.
- في الشريط العلوي، انقر أيقونة الجهاز اللوحي (الوسطى بين أيقونات الأجهزة الثلاث).
- انقر أيقونة الجوال لترى المتجر بعرض الجوال.
عرض معاينة الجهاز اللوحي 820 بكسل، والجوال 390 بكسل، فتترتب واجهة متجرك تماماً كما تترتب على هذه الأجهزة. انقر أيقونة الكمبيوتر للعودة.
- لمراجعة صفحة المنتج، انقر المنتج.
يفتح المنتج صفحة أحدث منتج في متجرك، فترى منتجاتك أنت لا مثالاً جاهزاً. إذا لم يكن في متجرك منتجات بعد، تبقى المعاينة على الصفحة الرئيسية. انقر الرئيسية للعودة.
ملء الشاشة
لترى واجهة متجرك بدون لوحة التحكم حولها:
- انقر أيقونة ملء الشاشة، بجانب أيقونات الأجهزة.
- لترى الجهاز اللوحي أو الجوال بحجمه الكامل، انقر أيقونته في الشريط الصغير.
- انقر الخروج من ملء الشاشة لتعود الأدوات.
معاينة لغة أخرى
إذا كان متجرك يبيع بأكثر من لغة، يعرض مبدّل اللغة، في بداية صف الأزرار في الشريط العلوي، كل لغة منها. ويفتح الاستوديو دائماً على اللغة الافتراضية لمتجرك.
- في الشريط العلوي، انقر اللغة التي تريد أن تراها، مثلاً الإنجليزية.
تبديل لغة المعاينة يغيّر أكثر من المعاينة:
- يصبح تبويب المحتوى لتحرير نصوص هذه اللغة.
- تعرض الخطوط الخطوط المناسبة لحروف هذه اللغة.
- تُضبط نقطة تركيز صورة البانر في مجموعة الترويسة لكل لغة على حدة.
أما باقي إعدادات التصميم، مثل الألوان والأزرار وبطاقات المنتجات، فمشتركة بين كل لغاتك.
المتاجر التي تبيع بلغة واحدة
إذا كان متجرك يبيع بلغة واحدة، فلا شيء يتبدل في الاستوديو:
- لا يظهر مبدّل اللغة في الشريط العلوي.
- لا يظهر زر ترجمة إلى اللغات الأخرى في تبويب المحتوى.
- المتجر الذي يبيع بالإنجليزية أو الفرنسية فقط لا يظهر فيه خيار الأرقام في مجموعة الخطوط. أما المتجر الذي يبيع بالعربية فقط فيبقى فيه هذا الخيار.
تختار لغات متجرك من الإعدادات، وعدد اللغات المتاح يعتمد على خطتك. اختيار لغات متجرك وعملته
عرض المتجر: افتح واجهة متجرك المنشورة
يفتح عرض المتجر واجهة متجرك المنشورة في تبويب جديد، على عنوان متجرك في نقطة شوب. يعرض ما يراه العملاء الآن: التصميم المنشور، لا المسودة التي في الاستوديو. استخدمه بعد النشر لتتأكد من النتيجة.
وحتى أول نشر لمتجرك، يرى العملاء صفحة نفتح قريباً فيها شعارك واسم متجرك بدل واجهة المتجر، ويفتح عرض المتجر الصفحة نفسها.
المسودة والنشر وما يراه العملاء
يمرّ تصميمك بثلاث مراحل:
- على الشاشة. يظهر كل تغيير في المعاينة فوراً، وتقول الحالة تغييرات غير منشورة. تبقى هذه التعديلات في تبويب المتصفح هذا، حتى لو تنقّلت بين التصميم والمحتوى أو أعدت التحميل أو زرت صفحة أخرى من لوحة التحكم، لكن إغلاق التبويب يُضيعها.
- محفوظة كمسودة. يحفظ حفظ المسودة تغييراتك عندنا، فتكمل أنت أو أحد فريقك لاحقاً من أي جهاز. ويبقى العملاء يرون التصميم القديم.
- منشورة. يجعل نشر ما على الشاشة ظاهراً للعملاء، وتصبح الحالة منشور.
اقرأ حفظ المسودة ونشر واجهة متجرك لتعرف كل حالة، ولماذا قد يكون نشر مقفلاً، وماذا تفعل إذا تعذّر الحفظ.
والخطوة التالية: امنح واجهة متجرك شكل علامتك من اختيار الثيم والألوان والخطوط، أو دع الذكاء الاصطناعي يجهّز لك نسخة أولى من إنشاء واجهة متجرك بالذكاء الاصطناعي.