Caliper تصميمان
في ثيم واحد

كل تعديل في Caliper بيتعمل من محرر الثيم من غير كود. افتحه من «المتجر الإلكتروني» (Online Store) بـ «تعديل القالب» (Edit theme).

1. 1«خانة البحث» (Search field)
   اكتب جزء من اسم القسم.
2. 2«قايمة الأقسام» (Section list)
   أقسام Caliper بأساميها في الدليل؛ القسم اللي ليه أكتر من بداية جاهزة بيظهر بأكتر من اسم.
3. 3«المعاينة» (Preview)
   بتوريك شكل القسم قبل ما تضيفه.

1. 1«الأقسام» (Sections)
   أقسام الصفحة اللي فاتحها.
2. 2«إعدادات القالب» (Theme settings)
   إعدادات المتجر كله: الشعار والألوان والخطوط والأزرار والبطاقات والمقاسات وغيرها.
3. 3«تضمينات التطبيق» (App embeds)
   بتشغّل منها التطبيقات اللي بتظهر على كل الصفحات، زي فقاعة الشات.
4. 4«رأس الصفحة» (Header)
   شريط الإعلانات ورأس الصفحة، مشتركين بين صفحات المتجر.
5. 5«النموذج» (Template)
   أقسام الصفحة دي بس، بالترتيب اللي بتظهر بيه.
6. 6«إضافة قسم» (Add section)
   بيضيف قسم جديد للصفحة.
7. 7«تذييل الصفحة» (Footer)
   التذييل، مشترك بين صفحات المتجر.
8. 8«المقبض والعين» (Drag handle and eye)
   بيظهروا لما توقف على اسم القسم: اسحب المقبض عشان تنقله، ودوس العين عشان تخفيه.

1. 1«اسم القسم» (Section name)
   القسم اللي إعداداته مفتوحة دلوقتي.
2. 2«اسم الإعداد» (Setting name)
   الكلمة اللي الدليل بيكتبها بين «»، فدوّر بيها.
3. 3«السطر الصغير تحت الإعداد» (The small line under a setting)
   شرح قصير من الثيم؛ اقراه قبل ما تغيّر.
4. 4«البلوكات» (Blocks)
   أجزاء القسم، زي الرسائل أو الأسئلة: دوس على واحد عشان تفتحه، واسحبه عشان ترتبه.
5. 5«إضافة رسالة» (Add Message)
   بيضيف بلوك جديد جوه القسم؛ الزرار بيحمل اسم البلوك.
6. 6«إزالة القسم» (Remove section)
   بيمسح القسم من الصفحة. عايز تخفيه بس؟ استخدم العين.

1. 1«Exit»
   بيرجعك لصفحة «المتجر الإلكتروني» (Online Store) في لوحة شوبيفاي.
2. 2«الصفحة الرئيسية» (Home page)
   منها بتختار الصفحة اللي هتعدّلها: المنتج والمجموعة والسلة وغيرها.
3. 3«Enable mobile preview»
   بيعرض الصفحة زي ما هتبان على الموبايل؛ دوسه تاني ترجع للكمبيوتر.
4. 4«سهم التراجع» (Undo arrow)
   بيلغي آخر تغيير عملته.
5. 5«Save»
   بيحفظ تعديلاتك. لو الثيم ده المنشور، الزوار بيشوفوها على طول.
6. 6«النقط التلاتة» (The three dots)
   فيها «عرض الوثائق» (View documentation) اللي بيفتح الدليل ده.

أغلب خانات الصور بتملا مكانها وبتقص الزيادة من الأطراف، فخلي المهم في نص الصورة. المقاسات بالبكسل، العرض وبعده الطول، والأكبر بنفس الشكل ينفع. حدد «نقطة محورية» (Focal point) للصورة اللي المهم فيها بعيد عن نصها.

• «العلامة والأيقونة»
  • «صورة أيقونة المتصفح»: 64 x 64 (1:1) PNG مربعة، ٣٢ × ٣٢ على الأقل.
• «رأس الصفحة»
  • «الشعار»: 600 x 200 PNG أو WebP بخلفية شفافة، عرضه ٦٠٠ على الأقل (ضعف أكبر عرض ليه).
  • «الشعار فوق الصورة»: 600 x 200 نفس نسبة الشعار بلون فاتح، بخلفية شفافة.
  • «صورة الأيقونة»: 72 x 72 (1:1) بخلفية شفافة؛ بتظهر حوالي ٢٢ px.
  • «صورة البطاقة»: 456 x 608 (3:4)
• «شرائح بنصفين متعاكسين»
  • «صورة من الحياة اليومية»: 1200 x 1500 (4:5)
  • «صورة المنتج»: 1440 x 1080 (4:3) المنتج في النص على خلفية سادة.
• «أيقونات مع نص»
  • «أيقونة خاصة بك»: 136 x 136 (1:1) SVG أو PNG بخلفية شفافة؛ بتظهر ٣٤ px.
• «قائمة المجموعات»
  • «الصورة»: 900 x 1200 (3:4) الموضوع في النص: الدواير والبلاطات بتقص من النص.
  • «صورة الشاشات المكتبية»: 1320 x 660 لبلاطات «بنتو» بس: السادسة 2:1، والأولى طويلة حوالي 1:2 (٦٦٠ × ١٣٦٠).
• «منتج ثلاثي الأبعاد»
  • «صورة أثناء التحميل»: 1500 x 1125 (4:3) المنتج في النص على أبيض.
  • «صورة الدائرة الصغيرة»: 168 x 168 (1:1) بتظهر في دايرة ٥٦ px.
• «قصة على المقياس»
  • «الصورة»: 1400 x 1400 (1:1) المساحة قريبة من المربع والصورة بتتقص عليها.
• «نص متحرك»
  • «الصورة»: 256 x 256 (1:1) الموضوع في النص؛ بتظهر صغيرة جدًا (من ٣٠ لـ ١٢٨ px عرض).
• «تشريح المنتج»
  • «الصورة»: 1360 x 1020 (4:3) القسم بياخد شكل صورتك؛ مفيش قص إلا لو أطول من ٧٨٪ من ارتفاع الشاشة.
• «منشئ العدسات»
  • «صورة بديلة عند عدم وجود صورة للإطار»: 1296 x 972 (4:3)
• «مجموعة البطاقات»
  • «الصورة»: 1600 x 1200 (4:3) أطرافها بتتقص على المساحة.
  • «الصورة على الجوال»: 1080 x 810 (4:3) بعرض الشاشة تحت ٧٦٨ px.
• «عارض الإطلالات»
  • «الصورة»: 1200 x 1500 (4:5) بنفس «شكل الصورة» اللي اخترته (4:5 الافتراضي) عشان متتقصش.
• «لحظات»
  • «الصورة»: 900 x 1200 (3:4) بتتقص على «شكل الصورة»: 3:4، أو 4:5 (٩٠٠ × ١١٢٥)، أو 2:3 (٩٠٠ × ١٣٥٠)، أو 9:16 (٩٠٠ × ١٦٠٠).
  • «صورة على كبسولة المنتج»: 252 x 252 (1:1) في دايرة ٥٨ px ومكبّرة ٢٥٪، فخلي المنتج مالي الإطار.
• «لافتة النشرة البريدية»
  • «الصورة»: 1400 x 1000 مع «صورة بجانب النموذج» قريبة من 6:5، و4:3 على الجوال.
  • «الصورة على الهاتف»: 1080 x 810 (4:3) بعرض الشاشة.
• «تسوّق حسب العمر»
  • «الصورة»: 360 x 360 (1:1)
• «قائمة المشتريات»
  • «الصورة»: 1120 x 1400 (4:5)
• «شبكة لافتات»
  • «الصورة»: 1200 x 1500 4:5 لـ «ثلاث في صف»، و١٤٠٠ × ١١٢٠ (5:4) لـ «اثنتان في صف».
  • «صورة الهاتف»: 1080 x 1350 (4:5) بعرض الشاشة وبشكل اللافتة.
• «معلومات المنتج»
  • 1600 x 1600 صور المعرض من وسائط المنتج نفسه: ١٦٠٠ على الأقل في الضلع الأطول، وشكلها من «شكل الوسائط».
• «واجهة المجموعة»
  • «الصورة»: 2400 x 800 (3:1)
  • «الصورة على الهواتف»: 1080 x 810 (4:3)
• «منتجات المجموعة»
  • «الصورة»: 1200 x 1200 (1:1) تقريبًا.
• «صورة مع نص»
  • «الصورة»: 1200 x 1500 (4:5) أو الشكل اللي تختاره في «شكل الصورة».
  • «الصورة الثانية»: 600 x 750 (4:5) بعرض ٤٦٪ من الصورة الأساسية، جوه إطار بلون الصفحة.
• «قصة العلامة»
  • «الصورة الرئيسية»: 1200 x 1500 (4:5) في شكل قوس، وبعرض الشاشة على الجوال.
  • «الصورة الثانية»: 700 x 700 (1:1) إطارها بلون خلفية القسم بيقص الحافة شوية.
• «الصفحة غير موجودة»
  • «الصورة»: 1200 x 1500 (4:5) أو مربعة أو 3:4 حسب «شكل الصورة».
• «صفحة كلمة المرور»
  • «الصورة»: 2000 x 1500 قريبة من 4:3 والموضوع في النص.
  • «الشعار»: 600 x 240 أي نسبة، والأحسن PNG بخلفية شفافة.
• «نافذة القائمة»
  • «الصورة»: 510 x 680 (3:4)
• «نافذة الترحيب»
  • «الصورة»: 900 x 900 (1:1) الموضوع في النص.
• «تذييل الصفحة»
  • «الشعار»: 600 x 200 PNG أو WebP بخلفية شفافة، عرضه ٦٠٠ على الأقل.

Caliper ثيم Shopify بالعربي والإنجليزي، بتصميمين: Caliper للنظارات وInchling للأطفال. فكرته إن كل منتج بيقول للزائر هل بيناسبه: مقياس مقاسات على كل بطاقة، وزر «اعرف مقاسي» في رأس الصفحة، وأدوات زي محدد مقاس الإطار ومنشئ العدسات ومسار الأعمار.

بيوصل مع التصميم: الصفحات بأقسامها، ورأس الصفحة والتذييل، والألوان والخطوط، وكلام الثيم نفسه بالعربي والإنجليزي.

مش بيوصل: المنتجات والمجموعات والصور والمقالات والصفحات وعينات الألوان وترجمة كلامك، والقوايم (Shopify بيعمل «Main menu» و«Footer menu» بس). بتضيفهم بالترتيب في «أول ١٢ خطوة بعد ما تضيف الثيم».

بالترتيب:

1. اعمل نسخة احتياطية من الثيم: «تختار التصميم وتغيّره إزاي».
2. اختار اللغة الأساسية وضيف العربي: «تضيف العربي أو تخليه اللغة الأساسية».
3. ارفع الشعار في «رأس الصفحة» وأيقونة المتصفح في «العلامة والأيقونة».
4. راجع الألوان والخطوط: «الألوان»، «الخطوط».
5. ضيف منتجاتك بصور كلها بنفس الشكل: «مقاسات الصور».
6. حط على كل منتج وسم مقاساته: «تجهّز المقاسات: المقياس والوسوم والخيارات»، «أرقام الإطار: العدسة والجسر والذراع».
7. اعمل مجموعاتك من «المنتجات» (Products) > «المجموعات» (Collections)، ولكل واحدة صورة: «قائمة المجموعات».
8. اعمل القوايم: «القوائم اللي تصميمك مستنيها».
9. املا أقسام الصفحة الرئيسية بترتيب خريطة تصميمك: «تصميم Caliper»، «تصميم Inchling».
10. ظبّط صفحة المنتج: «معلومات المنتج»، وللنظارات اختيار العدسات: «اختيار العدسات في صفحة الإطار».
11. حط بيانات التواصل والسوشيال والسياسات: «وسائل التواصل»، «تذييل الصفحة».
12. شغّل الفلاتر: «فلاتر صفحة المجموعة». راجع كل صفحة على الموبايل، ودوس «Save» وبعدين «نشر» (Publish).

• «الأقسام» (Sections): أجزاء الصفحة فوق بعض، زي «شرائح بنصفين متعاكسين».
• «نظام الألوان»: ألوان الخلفية والكلام والأزرار باسم واحد، بتعدّله في «الألوان».
• «نافذة جانبية»: لوحة بتطلع من جنب الشاشة، زي السلة وقايمة الموبايل.
• «المقياس»: صف شرايح قصيرة بيوري مقاسات المنتج، وعليه الكرة عند مقاس الزائر.
• «الكرة»: النقطة المدوّرة بلون التمييز اللي بتعلّم المقاس المحفوظ وغيره.
• «شرايح الأعمار»: أعمار الأطفال (مولود، ٣-٦ أشهر...) بدل S وM وL.
• «العدسة والجسر والذراع»: التلات أرقام المطبوعة جوه ذراع النظارة بالمليمتر.
• «المنتج الإضافي»: منتج عادي بيتضاف مع الإطار، زي طبقة للعدسات.
• «المتغيرات» (Variants): كل اختيار للمنتج بسعره ومخزونه، زي اللون والمقاس.
• «الإشارات» (Tags): كلمات على المنتج، والثيم بيقرا منها مقاساته.
• «نقطة محورية» (Focal point): النقطة اللي بتعلّمها على الصورة عشان تفضل ظاهرة لما تتقص.
• «نمط القالب» (Theme style): واحد من التصميمين؛ بيغيّر الشكل ونوع المقياس، مش الأقسام.

اكتب لنا على [email protected] ونرد خلال يومين عمل.

الدعم بيغطي: إعدادات وأقسام Caliper، وأي حاجة في الثيم مش شغالة زي ما الدليل بيقول.

مبيغطيش: كود بتضيفه أو بتغيّره، والتطبيقات التانية وإعداداتها.

كل تصميم ليه صفحة في Theme Store. اختار التصميم هناك قبل ما تضيف الثيم، لأن صفحاته بأقسامها ورأس الصفحة والتذييل بيوصلوا مع التصميم اللي اخترته بس.

بعدها «نمط القالب» (Theme style) بيحط إعدادات التصميم التاني: الألوان والخطوط وأحجام العناوين وشكل صورة البطاقة والظل، ونوع المقياس (حروف في Caliper وأعمار في Inchling) وبداية وسومه.

1. 1«نمط القالب» (Theme style)
   التصميمين: Caliper وInchling.

للنظارات الطبية والشمسية: إطارات بمقاسات، وعدسات بتتضاف بأسعارها. الصفحة الرئيسية بتبدأ بشرائح بنصفين، وفيها «محدّد مقاس الإطار» و«منشئ العدسات»، بالبرتقالي والرملي وخط Josefin Sans للعناوين.

1. 1«شريط الإعلانات»
2. 2«رأس الصفحة»
3. 3«شرائح بنصفين متعاكسين»
4. 4«أيقونات مع نص»
5. 5«قائمة المجموعات»
6. 6«تبويبات المنتجات»
7. 7«منتج ثلاثي الأبعاد»
8. 8«قصة على المقياس»
9. 9«محدّد مقاس الإطار»
10. 10«نص متحرك»
11. 11«منتج مميز»
12. 12«تشريح المنتج»
13. 13«منشئ العدسات»
14. 14«مجموعة البطاقات»
15. 15«عارض الإطلالات»
16. 16«مقالات المدونة»
17. 17«لحظات»
18. 18«الأسئلة الشائعة»
19. 19«لافتة النشرة البريدية»
20. 20«تذييل الصفحة»

لملابس الأطفال وحاجاتهم: المقاس هنا عمر الطفل، فالمقياس شرايح أعمار والعبارة «مناسب لطفلك». الصفحة الرئيسية فيها «تسوّق حسب العمر» و«قائمة المشتريات» للمولود، بالأزرق والأصفر الدافي وخط Grandstander للعناوين.

1. 1«شريط الإعلانات»
2. 2«رأس الصفحة»
3. 3«شرائح بنصفين متعاكسين»
4. 4«أيقونات مع نص»
5. 5«قائمة المجموعات»
6. 6«تبويبات المنتجات»
7. 7«منتج ثلاثي الأبعاد»
8. 8«قصة على المقياس»
9. 9«تسوّق حسب العمر»
10. 10«نص متحرك»
11. 11«منتج مميز»
12. 12«تشريح المنتج»
13. 13«قائمة المشتريات»
14. 14«مجموعة البطاقات»
15. 15«عارض الإطلالات»
16. 16«مقالات المدونة»
17. 17«لحظات»
18. 18«الأسئلة الشائعة»
19. 19«لافتة النشرة البريدية»
20. 20«تذييل الصفحة»

العربي بيتضاف وبيتنشر من «الإعدادات» (Settings) > «اللغات» (Languages)، وصفحاتك العربي بتفتح على رابط متجرك وبعده /ar.

1. 1«إضافة لغة» (Add language)
   بيفتح قائمة اللغات عشان تختار منها العربي.
2. 2«العربية» (Arabic)
   صف العربي؛ القائمة اللي جنبه فيها النشر والدومينات.
3. 3«تم النشر» (Published)
   بيظهر جنب العربي بعد ما تنشره؛ قبلها اللغة مضافة ومستخبية عن الزوار.
4. 4«تغيير الافتراضية» (Change default)
   في قائمة صف لغتك الأساسية الحالية؛ منه تخلي العربي لغة المتجر الأساسية، اللي المحرر بيحفظ بيها كلامك.

الأزرار ورسايل السلة والبحث وكل كلام Caliper مترجم للعربي، والصفحة العربي كلها بتتقلب من اليمين للشمال: رأس الصفحة والشرائح والبطاقات والسلة ومقياس المقاسات. مش محتاج تظبط حاجة.

اللي بتكتبه أنت مش بيتترجم لوحده: المنتجات و«المجموعات» (Collections) والقوايم والصفحات وكل عنوان وكلام في الأقسام. بتترجمه في تطبيق «Translate & Adapt» المجاني، وفيه ترجمة تلقائية للعربي؛ لو مش متثبّت هتلاقي كارته في «الإعدادات» (Settings) > «اللغات» (Languages).

لو لغة حسابك في Shopify عربي، المحرر بيعرض إعدادات Caliper بأساميها العربي، زي صور الدليل ده. ده بيغيّر اللي بتشوفه أنت بس، مش متجرك. لو حسابك إنجليزي، الدليل بيكتب الاسم الإنجليزي بخط صغير جنب العربي في قوايم الإعدادات.

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

في الصفحة العربية الإعدادات دي ملهاش أثر: «وزن الخط العريض للنص»، و«حجم النص»، و«حالة أحرف العناوين»، و«حالة أحرف التسميات»، و«تباعد أحرف العناوين»، و«تباعد أحرف التسميات»، و«حالة الأحرف» في «الأزرار».

اختيار اللغة بيظهر لما يبقى عندك أكتر من لغة منشورة، واختيار الدولة والعملة لما متجرك يبيع في أكتر من دولة من «الأسواق» (Markets). مكانهم «نافذة القائمة» و«تذييل الصفحة»، وكل واحد فيهم بيخفيهم بـ «إظهار تبديل اللغة» و«إظهار اختيار الدولة والعملة».

اسم متجرك زي ما الزائر بيقراه، وأيقونة تبويب المتصفح. صورة الشعار نفسها بتحطها في «رأس الصفحة» و«تذييل الصفحة».

كل الألوان في أنظمة ألوان (خلفية ونص وأزرار) بيختار منها كل قسم. وهنا كمان نظام الصفحة ونظام النوافذ وألوان الشارات فوق الصور والخلفية ورا النوافذ.

1. 1«الأنظمة» (Schemes)
   الأنظمة اللي الأقسام بتختار منها. الثيم جاي بسبعة وتقدر تزوّد، وتعديل نظام بيغيّر كل قسم بيستخدمه.
2. 2«نظام ألوان الصفحة» (Page color scheme)
   نظام الصفحة نفسها: خلفيتها ونصها. ومنه لون نص شارتي التخفيض ونفاد الكمية فوق الصور.
3. 3«نظام ألوان النوافذ الجانبية» (Drawer color scheme)
   نوافذ السلة والبحث والقائمة والإضافة السريعة، والعرض السريع، ودليل المقاسات، وفلاتر المجموعة، والنوافذ في صفحة المنتج.
4. 4«خلفية الشارات والأزرار» (Badge and button background)
   ورا الشارات وأزرار الإضافة السريعة والعرض السريع واللوحات الصغيرة فوق الصور. نص شارتي التخفيض ونفاد الكمية من نظام الصفحة.
5. 5«نص الشارات والأزرار» (Badge and button text)
   الكلام والأيقونات على الشارات والأزرار فوق الصور، ما عدا شارتي التخفيض ونفاد الكمية.
6. 6«الخلفية خلف النوافذ الجانبية» (Backdrop behind drawers)
   الطبقة اللي بتغطي الصفحة ورا النوافذ الجانبية ونافذة الترحيب.
7. 7«شفافية الخلفية» (Backdrop opacity)
   قد إيه الطبقة دي معتمة؛ ٠ بيخليها شفافة خالص.

1. 1«الخلفية» (Background)
   خلفية الأقسام اللي بتستخدم النظام؛ والنظام المختار في «نظام ألوان الصفحة» بيلوّن الصفحة نفسها كمان.
2. 2«تدرّج الخلفية» (Background gradient)
   تدرّج بياخد مكان لون الخلفية في الأقسام والنوافذ اللي بتستخدم النظام. الصفحة والأقسام اللي على نظام ألوان الصفحة بيفضلوا باللون الثابت.
3. 3«اللوحات وإطارات الصور» (Panels and image boxes)
   اللون ورا الصور وهي بتتحمّل، وورا الحقول واللوحات الهادية، وحوالين صورة المنتج مع «إظهار الصورة كاملة».
4. 4«النص» (Text)
   لون النص والروابط والأيقونات.
5. 5«النص الثانوي» (Secondary text)
   النص الأخف: الأوصاف والتسميات الصغيرة والسطر تحت عنوان البطاقة والسعر قبل الخصم.
6. 6«الخطوط والحدود» (Lines and borders)
   الخطوط الفاصلة وحدود الحقول والبطاقات واللوحات.
7. 7«الزر الرئيسي» (Primary button)
   خلفية الزر الرئيسي وحدوده، زي «أضف إلى السلة».

1. 1«نص الزر الرئيسي» (Primary button text)
   لون كلام الزر الرئيسي؛ لازم يبان بوضوح على لون الزر.
2. 2«الزر الرئيسي عند التمرير» (Primary button on hover)
   لون الزر الرئيسي تحت الماوس أو لما لوحة المفاتيح توصله.
3. 3«الزر الثانوي» (Secondary button)
   كلام وإطار الزر الثانوي المفرّغ؛ تحت الماوس بيتملي باللون ده وكلامه بياخد لون الخلفية.
4. 4«لون التمييز» (Accent)
   لون الكرة والعلامات الصغيرة: نقطة «بمقاسك» على المقياس، ونقط الصور على البطاقة، وكرة زر العودة إلى الأعلى.
5. 5«شارات التخفيض والتوفير» (Sale badges and savings)
   شارة التوفير جنب السعر، ومبالغ التوفير، وتنبيهات المخزون، والخصم في السلة، وأخطاء الحقول. الشارات فوق صور البطاقات بتاخد لونها من نظام الصفحة.
6. 6«سعر التخفيض» (Sale price)
   السعر بعد الخصم. في شريط لون التخفيض فيه صعب يتقري، خليه زي لون النص.

الخطوط وأحجام العناوين وحالة الأحرف. مكتبة خطوط Shopify مفيهاش حروف عربي، فالعربي دايمًا بخط جهاز الزائر وليه إعداداته تحت «النص العربي».

1. 1«خط العناوين» (Heading font)
   خط العناوين للحروف اللاتينية والأرقام. في الصفحة العربية بيظهر على الكلام والأرقام اللاتينية جوه العناوين بس.
2. 2«خط النص» (Body font)
   خط النص والأزرار والتسميات للحروف اللاتينية؛ في الصفحة العربية على الكلام والأرقام اللاتينية بس.
3. 3«خط القياسات» (Readout font)
   خط الأرقام: حروف المقاس على مقياس البطاقة، وأرقام القياسات، والترقيم الصغير زي 01.
4. 4«وزن الخط العريض للنص» (Bold body weight)
   وزن الكلام العريض والأسعار والأزرار في الصفحة الإنجليزي؛ الخط اللي مفيهوش الوزن ده بياخد أقرب وزن. الصفحة العربية دايمًا ٧٠٠.
5. 5«حجم النص» (Body text size)
   حجم النص في الصفحة الإنجليزي؛ الصفحة العربية بتستخدم «حجم النص العربي».
6. 6«تباعد أحرف العناوين» (Heading letter spacing)
   المسافة بين حروف العناوين اللاتينية، بأجزاء من الألف من حجم الخط: السالب بيقرّب والموجب بيبعّد. مش بيأثر على العنوان الصغير ولا الصفحة العربية.
7. 7«العنوان الكبير على الكمبيوتر» (Large heading on desktop)
   العنوان الكبير (عناوين الصفحات والبانرات الكبيرة) على الكمبيوتر؛ بين الهاتف والكمبيوتر بيكبر بالتدريج.

1. 1«العنوان الكبير على الهاتف» (Large heading on phones)
   العنوان الكبير على الهاتف.
2. 2«العنوان المتوسط على الكمبيوتر» (Medium heading on desktop)
   العنوان المتوسط، عنوان الأقسام، على الكمبيوتر.
3. 3«العنوان المتوسط على الهاتف» (Medium heading on phones)
   العنوان المتوسط على الهاتف.
4. 4«العنوان الصغير على الكمبيوتر» (Small heading on desktop)
   العنوان الصغير، للعناوين الفرعية جوه الأقسام، على الكمبيوتر.
5. 5«العنوان الصغير على الهاتف» (Small heading on phones)
   العنوان الصغير على الهاتف.
6. 6«العناوين العربية» (Arabic headings)
   شكل الحروف العربية في العناوين، بخط جهاز الزائر: «حديث» خط بسيط و«نسخ» الخط التقليدي. النص العادي بيفضل «حديث».

1. 1«حجم العناوين العربية» (Arabic heading size)
   بيكبّر أو بيصغّر كل العناوين العربية بالنسبة لأحجام العناوين، و١٠٠٪ نفس الحجم؛ فاضبط أحجام اللاتيني الأول.
2. 2«تباعد أسطر العناوين العربية» (Arabic heading line spacing)
   مسافة زيادة بين أسطر العناوين العربية، بأجزاء من المئة من حجم الخط؛ خطوط النسخ الطويلة محتاجة أكتر.
3. 3«حجم النص العربي» (Arabic body text size)
   حجم النص في الصفحة العربية، مكان «حجم النص».
4. 4«حالة أحرف العناوين» (Heading case)
   «أحرف كبيرة» بتكتب العناوين الإنجليزي كلها بالحروف الكبيرة، و«كما كُتبت» بتسيبها. ملوش أثر في الصفحة العربية.
5. 5«حالة أحرف التسميات» (Label case)
   التسميات الصغيرة فوق العناوين وعناوين القوائم: «أحرف كبيرة» أو «كما كُتبت». ملوش أثر في الصفحة العربية.
6. 6«تباعد أحرف التسميات» (Label letter spacing)
   المسافة بين حروف التسميات، بأجزاء من المئة من حجم الخط. ملوش أثر في الصفحة العربية.

مقاسات الصفحة العامة: أقصى عرض، والهوامش، والمسافات بين الأقسام، واستدارة الزوايا، والظل.

1. 1«عرض الصفحة» (Page width)
   أقصى عرض للمحتوى؛ في الشاشة الأضيق بياخد العرض كله ناقص الهوامش.
2. 2«الهوامش الجانبية على الكمبيوتر» (Side margins on desktop)
   المسافة بين حافة الشاشة والمحتوى على الكمبيوتر. الجهاز اللوحي بياخد ٣٢ على الأكتر والهاتف ١٦.
3. 3«المسافة بين الأعمدة» (Space between columns)
   المسافة بين الأعمدة جوه الأقسام؛ على الهاتف ١٦ على الأكتر.
4. 4«المسافة الكبيرة على الكمبيوتر» (Large spacing on desktop)
   فوق وتحت أي قسم «المسافة حول القسم» فيه «كبيرة»، على الكمبيوتر؛ بين الهاتف والكمبيوتر بتتدرّج.
5. 5«المسافة الكبيرة على الهاتف» (Large spacing on phones)
   نفس مسافة «كبيرة» على الهاتف.
6. 6«المسافة المتوسطة على الكمبيوتر» (Medium spacing on desktop)
   فوق وتحت القسم اللي مسافته «متوسطة»، على الكمبيوتر.

1. 1«المسافة المتوسطة على الهاتف» (Medium spacing on phones)
   نفس مسافة «متوسطة» على الهاتف.
2. 2«المسافة الصغيرة على الكمبيوتر» (Small spacing on desktop)
   فوق وتحت القسم اللي مسافته «صغيرة»، على الكمبيوتر.
3. 3«المسافة الصغيرة على الهاتف» (Small spacing on phones)
   نفس مسافة «صغيرة» على الهاتف.
4. 4«استدارة الزوايا» (Corner radius)
   استدارة العناصر الصغيرة: مربع الكمية، وقوائم الدولة والعملة، ورسائل النماذج، والصور المصغّرة. الشارات والأزرار والحقول والبطاقات ليها إعداداتها.
5. 5«استدارة زوايا اللوحات» (Panel corner radius)
   استدارة القوائم المنسدلة واللوحات الصغيرة: القائمة الكبيرة في الرأس، ولوحات صفحة المنتج، وملخص السلة، وجدول المقاسات.
6. 6«استدارة زوايا الصور» (Image corner radius)
   استدارة صور الأقسام: المدونة والبانرات وقوائم المجموعات و«صورة مع نص». صور البطاقات ليها «استدارة زوايا الصورة» في «بطاقات المنتجات».

1. 1«استدارة زوايا الصور الكبيرة» (Large image corner radius)
   استدارة الصور الكبيرة (صورة المقال، وبانر المجموعة، واللحظات، والمنتج ثلاثي الأبعاد) وشكل «زوايا مستديرة».
2. 2«شكل الصور التحريرية» (Editorial image shape)
   شكل الصورة لما تختار «الشكل التحريري (إعدادات القالب)» في «نمط الصورة» بقسم «صورة مع نص» أو «شكل الصورة» بقسم «قصة العلامة»: «قوس» أعلاه مدوّر، و«كبسولة» بيضاوي كامل.
3. 3«كثافة الظل» (Shadow opacity)
   كثافة ظل النوافذ الجانبية والقوائم المنسدلة واللوحات العايمة؛ ٠ بيشيله. لونه من نص الصفحة.
4. 4«نعومة الظل» (Shadow blur)
   نعومة الظل: كل ما زادت حافته أنعم وأوسع.
5. 5«إزاحة الظل» (Shadow offset)
   إزاحة الظل لتحت؛ ٠ بيوزّعه حوالين العنصر.
6. 6«امتداد الظل» (Shadow spread)
   السالب بيصغّر الظل عن العنصر، و٠ بنفس حجمه.

شكل الأزرار في الثيم كله: الاستدارة والارتفاع وحالة الأحرف وأطراف الشرائح والتبويبات. ألوانها من نظام ألوان القسم: «الألوان».

حقول الكتابة (البحث والنشرة ونموذج التواصل وملاحظة الطلب) وعينات الألوان على المنتجات.

البطاقة اللي بتتكرر في المجموعات والبحث والشرائح. الإعدادات دي لكل البطاقات، ما عدا «النمط» اللي كل قسم يقدر يغيّره.

1. 1«النمط» (Style)
2. 2«شكل الصورة» (Image shape)
3. 3«ملاءمة الصورة» (Image fit)
   «ملء الإطار» بيقص الصورة عشان تملا البطاقة، و«إظهار الصورة كاملة» بيعرضها كلها بحواف بلون «خلفية الصورة» أو «اللوحات وإطارات الصور».
4. 4«خلفية الصورة» (Picture field)
   لون هادي ورا صور المنتجات المصوّرة على أبيض (البطاقات، وصفحة المنتج، والسلة، والنوافذ، والبحث): الأبيض بياخد اللون ده. سيبه فاضي للصور اللي ليها خلفيتها.
5. 5«تأثير التمرير» (Hover effect)
   تأثير الماوس على البطاقة (الأجهزة اللي فيها ماوس بس):
   • الصور تتبع المؤشر: أول ٤ صور حسب مكان الماوس، وتحتها نقط.
   • الصورة الثانية بانزلاق (التانية في القائمة): الأولى بتتزحلق ناحية بداية القراءة والتانية مكانها.
   • الصورة الثانية بدائرة: التانية بتتفتح دايرة من مكان دخول الماوس.
   • الصورة الثانية بانزلاق (الرابعة في القائمة): التانية بتتكشف من ناحية بداية القراءة.
   • الصورة الثانية بتلاشٍ: التانية بتظهر بالتدريج.
   • تكبير: الصورة بتكبر ببطء.
6. 6«محاذاة النص» (Text alignment)
7. 7«استدارة زوايا الصورة» (Image corner radius)
   استدارة صورة البطاقة؛ نمط «بإطار» بيزوّد ٦ على إطاره الخارجي.

1. 1«المسافة بين البطاقات» (Space between cards)
   المسافة بين البطاقات في الشبكات والشرائح؛ على الهاتف ١٢ على الأكتر.
2. 2«إظهار الإضافة السريعة» (Show quick add)
3. 3«إظهار العرض السريع» (Show quick view)
   أيقونة عين على الصورة بتفتح المنتج في نافذة بصوره وخياراته وزر الإضافة للسلة، على الأجهزة اللي فيها ماوس بس.
4. 4«عدد عينات الألوان المعروضة» (Color swatches shown)
5. 5«السطر أسفل العنوان» (Line under the title)
6. 6«إظهار تقييم المنتج» (Show product rating)
   نجمة بالتقييم وعدد التقييمات تحت السعر. محتاج تطبيق تقييمات بيملا حقل التقييم القياسي، ومن غيره مفيش حاجة بتظهر.
7. 7«إظهار زر «قارن»» (Show Compare button)
   مربع «قارن» تحت كل بطاقة. ضيف قسم «مقارنة المواصفات» وفيه «إظهار قائمة المتسوق الخاصة» مفعّل، وإجراء «قارن» في «رأس الصفحة» بيودّي عليه.

علامات صغيرة على البطاقات وفي صفحة المنتج: نفاد الكمية، والتخفيض، وجديد، وأي كلمات من وسم على المنتج. المنتج بيعرض شارتين على الأكتر، من بياناته الحقيقية بس.

1. 1«الموضع فوق الصور» (Position on images)
   زاوية الشارات على صورة البطاقة: «أعلى البداية» ناحية بداية القراءة (يمين في العربي) و«أعلى النهاية» الناحية التانية. شارات صفحة المنتج مش بتتأثر.
2. 2«استدارة الزوايا» (Corner radius)
   ٠ زوايا حادة، وكل ما زاد بتستدير أكتر. نفس الاستدارة لشارة «وفّر» جنب السعر وأكواد الخصم في السلة.
3. 3«ألوان الشارات» (Badge colors)
   «ألوان ما فوق الصور»: من «خلفية الشارات والأزرار» و«نص الشارات والأزرار» في «الألوان». «ألوان الصفحة»: «اللوحات وإطارات الصور» ونص نظام الصفحة، أنسب للصفحة الغامقة. في الحالتين نص شارتي التخفيض ونفاد الكمية بلون التخفيض واللون الثانوي لنظام الصفحة.
4. 4«شارة التخفيض» (Sale badge)
   «المبلغ الموفَّر» و«النسبة الموفَّرة» بيكتبوا «وفّر» والقيمة أو النسبة، و«تخفيض» الكلمة بس، و«بلا شارة» بيشيلها. بتظهر لما «السعر المقارن» (Compare-at) أعلى من السعر؛ والمنتج اللي متغيراته بأسعار مختلفة بيكتب «تخفيض» دايمًا.
5. 5«إظهار شارة نفاد الكمية» (Show sold out badge)
   المنتج اللي مفيش منه حاجة تتشرى بيظهر عليه «نفدت الكمية».
6. 6«وسم شارة الجديد» (New badge tag)
   المنتج اللي عليه الوسم ده بيظهر عليه «جديد»، أيًا كانت حالة الحروف؛ فاضي: مفيش شارة جديد.
7. 7«شارات من الوسوم» (Badges from tags)
   وسم بيبدأ بـ badge: بيطلع شارة بالكلام اللي بعد النقطتين زي ما كتبته، زي badge:محدود.

إعداد واحد لشكل كل سعر: برمز العملة أو من غيره.

روابط حساباتك. اللي بتملاه بس هو اللي بيظهر، وكل رابط بيفتح في تبويب جديد.

1. 1«إنستغرام» (Instagram)
2. 2«تيك توك» (TikTok)
3. 3«فيسبوك» (Facebook)
   الرابط كامل، زي https://facebook.com/….
4. 4«إكس» (X)
   الرابط كامل، زي https://x.com/….
5. 5«يوتيوب» (YouTube)
   رابط القناة، زي https://youtube.com/@….

1. 1«بنترست» (Pinterest)
   الرابط كامل، زي https://pinterest.com/….
2. 2«سناب شات» (Snapchat)
   الرابط كامل، زي https://snapchat.com/add/….
3. 3«ثريدز» (Threads)
   الرابط كامل، زي https://threads.net/@….
4. 4«لينكدإن» (LinkedIn)
   رابط صفحة الشركة، زي https://linkedin.com/company/….
5. 5«واتساب» (WhatsApp)
   https://wa.me/ وبعده رقمك بكود الدولة من غير مسافات.

زر مدوّر بسهم بيرجّع الزائر لأول الصفحة، بيظهر بعد ما ينزل شوية، وحواليه حلقة بتوري قد إيه قرأ.

حركة الصفحة: ظهور الأقسام مع النزول، وتحرك الشرائح لوحدها، وفتح النوافذ، وتأثيرات الماوس. الزائر اللي جهازه مظبوط على تقليل الحركة مبيشوفش حركة ولا تشغيل تلقائي.

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

المجموعة اللي بتشغّل نظام المقاسات في المتجر كله: لما تكون مفعّلة، كل بطاقة وصفحة منتج وسطر في السلة بيقول للزائر هل المنتج بمقاسه، وبيظهر زر «مقاسي» في رأس الصفحة. الفكرة كلها في «الفكرة: كل منتج يقول هل بيناسبك»، والتجهيز خطوة خطوة في «تجهّز المقاسات: المقياس والوسوم والخيارات».

الزائر بيكتب التلات أرقام المطبوعة جوه ذراع نظارته (العدسة، الجسر، الذراع) أو بيختار عرض وجهه، فيشوف مقاسه ورسم للإطار بالمقياس الحقيقي والإطارات اللي بمقاسه. المقاس بيتحفظ «مقاسي»، وباقي المتجر بيرد عليه: «الفكرة: كل منتج يقول هل بيناسبك».

جدول المقاسات هو بلوكات «مقاس» اللي بتضيفها، وكل إطار بيتعرف على مقاسه من وسم زي size-m.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان؛ فاضي: مش بيظهر.
2. 2«العنوان» (Heading)
   عنوان القسم، بيقبل تنسيق بسيط زي الغامق؛ فاضي: من غير عنوان.
3. 3«النص» (Text)
   سطر تحت العنوان بيقول للزائر يعمل إيه؛ فاضي: مش بيظهر.
4. 4«عرض العدسة» (Lens width)
   عرض العدسة اللي الأداة بتبدأ بيه، من ٣٨ لـ ٦٢ مم؛ مع الجسر بيحدد المقاس اللي بيظهر الأول.
5. 5«الجسر» (Bridge)
   الجسر اللي الأداة بتبدأ بيه، من ١٢ لـ ٢٦ مم؛ مجموعه مع العدسة بيختار المقاس الأول من جدولك.
6. 6«طول الذراع» (Temple length)
   طول الذراع في البداية، من ١٢٠ لـ ١٦٠ مم؛ بيغيّر الرسم والأرقام بس، مش المقاس.
7. 7«المجموعة» (Collection)
   مجموعة إطارات الشريط (اللي عليها وسم مقاس بس)، ومنها رابط أي مقاس من غير «مجموعة المقاس». الشريط بيقرا أول ٥٠ منتج فيها؛ فاضية: أول ٥٠ منتج في المتجر.

1. 1«بادئة وسم المقاس» (Size tag prefix)
   أول الوسم قبل مفتاح المقاس: مع size- وسم المقاس M هو size-m؛ فاضية: size-. خليها زي «تبدأ وسوم المقاس بـ» في «المقاسات».
2. 2«إطارات في المقدمة» (Frames first)
   إطارات بتختارها (لحد ١٢) بتيجي أول الشريط بترتيبك، وبعدها باقي المجموعة. الإطار اللي من غير وسم مقاس مش بيظهر.
3. 3«عدد الإطارات في الشريط» (Frames in the rail)
   أقصى عدد إطارات في شريط كل مقاس، من ٤ لـ ٢٤.
4. 4«نمط بطاقة المنتج» (Product card style)
   شكل بطاقة الإطار في الشريط. «كما في إعدادات القالب» بيتبع «النمط» في «بطاقات المنتجات»، والخيارات التانية موصوفة هناك.
5. 5«معرّف الرابط» (Anchor)
   معرّف للقسم عشان رابط بينتهي بـ #frame-size-finder (أو اللي تكتبه) يوصل له على طول. حروف لاتينية وأرقام وشرطات؛ فاضي: من غير معرّف.
6. 6«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
7. 7«المسافة حول القسم» (Section spacing)
   المسافة فوق وتحت القسم: «بلا مسافة» بتلزقه في اللي جنبه، و«صغيرة» و«متوسطة» و«كبيرة» بتزوّدها.

1. 1«الحرف» (Letter)
   الحرف في الدايرة الكبيرة وعلى زر المقاس، زي M؛ فاضي: «المفتاح».
2. 2«الاسم» (Name)
   اسم المقاس في الإجابة، زي متوسط؛ فاضي: الحرف بس.
3. 3«المفتاح» (Key)
   اللي بعد البادئة في وسم الإطار: m مع size- يعني size-m. وهو اللي بيتحفظ «مقاسي»، فخليه زي مقاس في «المقاسات بالترتيب» في «المقاسات». من غير مسافات ومن غير تكرار.
4. 4«مجموعة المقاس» (Size collection)
   مجموعة إطارات المقاس (الأحسن ذكية شرطها الوسم): منها رابط «تسوّق مقاس» والعدد الحقيقي. فاضية: الرابط بيفلتر مجموعة الشريط بالوسم، والعدد من أول ٥٠ منتج فيها.
5. 5«من (مم)» (From (mm))
   أصغر مجموع للعدسة والجسر بالمليمتر في المقاس؛ فاضي: من غير حد أدنى. لو المجموع دخل في مقاسين، الأول في الترتيب هو اللي بيطلع.
6. 6«إلى (مم)» (To (mm))
   أكبر مجموع للعدسة والجسر في المقاس؛ فاضي: من غير حد أعلى. المجموع اللي في فجوة بين مقاسين بياخد أقرب مقاس.
7. 7«القاعدة المعروضة» (Rule shown)
   سطر تحت اسم المقاس في الإجابة، زي إن مجموع العدسة والجسر من ٦٩ لـ ٧١ مم. بتكتبه بإيدك، فخليه مطابق لـ «من (مم)» و«إلى (مم)».

1. 1«ملاحظة الملاءمة» (Fit note)
   جملة قصيرة عن الوجه اللي المقاس يناسبه، تحت القاعدة في الإجابة.
2. 2«عرض الوجه» (Face width)
   اسم عرض الوجه اللي المقاس يناسبه، زي ضيق أو متوسط، كخيار في «حسب عرض الوجه». فاضي: المقاس مش في الاختيار ده؛ ولو كلهم فاضيين الاختيار كله بيختفي.
3. 3«وصف عرض الوجه» (Face hint)
   سطر صغير تحت اسم عرض الوجه بيوصفه؛ بيظهر بس مع «عرض الوجه».
4. 4«العدسة في الرسم» (Lens drawn)
   عرض العدسة في رسم المقاس لما الزائر يختار بعرض الوجه، من ٣٨ لـ ٦٢ مم؛ مع أرقامه هو الرسم بيتبعها.
5. 5«الجسر في الرسم» (Bridge drawn)
   الجسر في الرسم لما الزائر يختار بعرض الوجه، من ١٢ لـ ٢٦ مم.
6. 6«الذراع في الرسم» (Temple drawn)
   الذراع في الرسم لما الزائر يختار بعرض الوجه، من ١٢٠ لـ ١٦٠ مم.

الزائر بيختار الإطار ولونه ومقاسه، وبعدين العدسة خطوة خطوة (الاستخدام، الطلاء، السُمك)، كل خيار بسعره الحقيقي والإجمالي قدامه، وبدوسة واحدة الإطار والعدسات يدخلوا السلة.

كل خطوة بلوك «خطوة» وبعده بلوكات «خيار»، وأول خيار في الخطوة هو المختار في الأول. الخيار اللي ليه «منتج الإضافة» بياخد سعره، ومن غيره بيبان «مشمول».

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان. فاضي: مبيظهرش.
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان. فاضي: مبيظهرش.
4. 4«الإطارات» (Frames)
5. 5«صورة الإطار» (Frame picture)
6. 6«صورة بديلة عند عدم وجود صورة للإطار» (Picture when a frame has none)
   بتظهر مكان صورة أي إطار ملوش صور. سيبها فاضية لو كل إطاراتك ليها صور.
7. 7«مع كل إطار» (With every frame)

1. 1«السطر أسفل الزر» (Line under the button)
   سطر صغير تحت زر الإضافة. فاضي: «يُضاف سعر العدسات إلى سعر الإطار.». اكتب هنا إزاي متجرك بياخد الوصفة الطبية، زي «نراسلك بالبريد لطلب الوصفة بعد الطلب».
2. 2«موضع الصورة على الديسكتوب» (Image position on desktop)
   جهة الصورة على الكمبيوتر: «البداية» ناحية بداية القراءة (يمين في العربي، شمال في الإنجليزي)، و«النهاية» الناحية التانية. على الجوال والتابلت الصورة بعد العنوان على طول.
3. 3«اسم الرابط» (Link name)
   اسم القسم في الروابط: رابط بينتهي بـ #lens-builder (أو اللي تكتبه) بينقل لهنا. حروف لاتينية وأرقام وشرطات؛ فاضي: اسم تلقائي مينفعش تربط بيه.
4. 4«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
5. 5«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته؛ «بلا مسافة» بتلزقه في اللي جنبه. المقاسات من «التخطيط».
6. 6«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
7. 7«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

مسار أعمار: كل محطة عمر بصورته واسمه وعدد منتجات مجموعته، والدوس على عمر بيبدّل شريط المنتجات تحت المسار من غير تحميل الصفحة. الزائر اللي حافظ عمر طفله بيلاقي المسار مفتوح على عمره.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان. فاضي: مبيظهرش.
2. 2«العنوان» (Heading)
   عنوان القسم في النص، وبيقبل تنسيق بسيط. فاضي: مفيش عنوان.
3. 3«النص» (Text)
   سطر تحت العنوان. فاضي: مبيظهرش.
4. 4«العمر المختار عند البداية» (Age chosen at first)
5. 5«عدد المنتجات لكل عمر» (Products per age)
6. 6«شكل المسار» (Path style)

1. 1«نمط بطاقة المنتج» (Product card style)
   شكل البطاقة في الشريط. «كما في إعدادات القالب» بياخده من «بطاقات المنتجات»، والباقي للقسم ده بس.
2. 2«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
3. 3«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته؛ «بلا مسافة» بتلزقه في اللي جنبه. المقاسات من «التخطيط».
4. 4«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
5. 5«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

قائمة منتجات حقيقية، كلها معلّمة من الأول. الزائر بيشيل العلامة عن اللي عنده ويختار المقاس من الصف، والإجمالي بيتغير قدامه، وبدوسة واحدة كل المعلّم بيدخل السلة. الإجمالي مجموع الأسعار بس، من غير سعر مجمّع ولا خصم.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان. فاضي: مبيظهرش.
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
4. 4«ملاحظة أسفل الزر» (Note under the button)
5. 5«الصورة» (Image)
   صورة طولية جنب القائمة على الكمبيوتر وفوقها على الجوال، عليها دايرة بعدد المنتجات. من غيرها العنوان بيفضل ثابت جنب القائمة على الكمبيوتر وانت بتنزل.
6. 6«موضع الصورة على الكمبيوتر» (Image position on desktop)
   جهة الصورة على الكمبيوتر: «البداية» ناحية بداية القراءة (يمين في العربي، شمال في الإنجليزي)، و«النهاية» الناحية التانية. من غير «الصورة» مبيغيرش حاجة.

1. 1«معرّف القسم» (Anchor)
   اسم قصير زي help عشان رابط بـ #help (ومن صفحة تانية /#help) ينقل لهنا. كل اسم مرة واحدة في الصفحة: القسم المنسوخ بياخد نفس الاسم، فغيّره أو امسحه.
2. 2«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
3. 3«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته؛ «بلا مسافة» بتلزقه في اللي جنبه. المقاسات من «التخطيط».
4. 4«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
5. 5«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

قسم تحت عمود الشراء في صفحة المنتج: لوحة ملوّنة فيها مقياس المنتج بالكبير، وقصادها رسم الإطار بمقياس رسم من أرقامه، أو منحنى نمو للملابس من «دليل المقاسات»، أو صورة المنتج التانية. المنتج من غير مقاسات ولا أرقام (علبة، قطعة تنظيف) مبيظهرش عليه القسم.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   فقرة تحت العنوان بتنسيق كامل. فاضية: مبتظهرش.
4. 4«أرقام الإطار» (Frame numbers)
5. 5«جهة الصورة» (Picture side)

1. 1«نظام الألوان» (Color scheme)
   خلفية القسم حوالين اللوحة والصورة، من أنظمة «الألوان» في «إعدادات القالب» (Theme settings). اللوحة ليها «نظام ألوان اللوحة».
2. 2«نظام ألوان اللوحة» (Panel color scheme)
3. 3«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته؛ «بلا مسافة» بتلزقه في اللي جنبه. المقاسات من «التخطيط».
4. 4«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
5. 5«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

نافذة جانبية بتفتح من رابط «دليل المقاسات» جنب خيار المقاس في صفحة المنتج والإضافة السريعة: جدول المقاسات بزر سم/إنش، وطريقة القياس. كل منتج بيفتح جدوله؛ التجهيز في «جداول المقاسات: دليل المقاسات ومنحنى النمو».

1. 1«عنوان النافذة» (Drawer title)
   عنوان النافذة. فاضي: «دليل المقاسات».
2. 2«الخيارات التي يظهر معها الدليل» (Options that show the guide)
   أسماء خيارات المنتج اللي بيظهر جنبها رابط الدليل، بفواصل وبكل لغات المتجر، زي Size, Sizes, المقاس؛ حالة الحروف مش فارقة. المنتج اللي مفيهوش خيار منها مفيش له رابط.
3. 3«ملاحظة تحت الجدول» (Note under the chart)
   ملاحظة تحت كل الجداول، زي إن المقاس الأكبر أريح؛ الجدول اللي «إظهار النقاط المشتركة والملاحظة» فيه مقفول مبيعرضهاش. فاضية: مبتظهرش.
4. 4«عنوان طريقة القياس» (How to measure heading)
   عنوان نقاط القياس. فاضي: «طريقة القياس»؛ ومبيظهرش لو مفيش نقطة ليها نص.
5. 5«عرض طريقة القياس» (How to measure layout)
   «نقاط بعناوين» كل نقطة بعنوانها ونصها، و«خطوات مرقّمة» نفس النقاط بأرقام.

1. 1«نصيحة في إطار» (Boxed tip)
   جملة في إطار بارز تحت نقاط القياس، زي نصيحة. فاضية: مبتظهرش.
2. 2«اسم رابط المقال» (Article link label)
   كلام رابط المقال في آخر النافذة؛ الرابط بيظهر بس لما «رابط المقال» يتملي كمان.
3. 3«رابط المقال» (Article link)
   الصفحة اللي رابط المقال بيفتحها، زي مقال عن اختيار المقاس؛ محتاج «اسم رابط المقال» كمان.
4. 4«صفحة المساعدة» (Help page)
   صفحة (غالبًا التواصل) بيظهر لها في آخر النافذة سطر «ما زلت متردداً في اختيار المقاس؟» ورابط «اسأل فريقنا». فاضية: مفيش السطر ده.
5. 5«عرض النافذة» (Drawer width)
   عرض النافذة على الكمبيوتر، من ٤٤٠ لـ ٦٤٠؛ على الجوال بتملا العرض.

1. 1«الاسم» (Name)
   عنوان الجدول فوقه، وبيظهر كمان تحت منحنى النمو في «كيف يناسب».
2. 2«ملاحظة فوق الجدول» (Note above the chart)
   فقرة قبل الجدول ده بس، زي «القياسات للجسم مش للقطعة». فاضية: مبتظهرش.
3. 3«عنوان العمود الأول» (First column heading)
   عنوان عمود المقاسات (الأول)، زي «العمر». فاضي: «المقاس».
4. 4«عناوين الأعمدة الأخرى» (Other column headings)
   عناوين باقي الأعمدة بفواصل، بترتيب قيم الصفوف (الطول، الصدر). منحنى النمو بيرسم أولهم، والقيمة اللي ملهاش عنوان مبتظهرش.
5. 5«القيم» (Values)
   «بالسنتيمتر مع التحويل إلى الإنش» بيضيف زر سم/إنش، و«بالمليمتر» و«كما كُتبت» بيعرضوا القيم زي ما هي. السنتيمتر بس هو اللي بيرسم منحنى النمو في «كيف يناسب».

1. 1«إظهار النقاط المشتركة والملاحظة» (Show the shared points and note)
   مفعّل: نقاط «طريقة القياس» اللي قبل أول جدول والملاحظة تحت الجدول بيظهروا معاه. اقفله لجدول مش مناسبين له، زي الأحزمة.
2. 2«المنتجات» (Products)
   منتجات بتفتح الدليل على الجدول ده. اذكر كل منتج أو نوع أو وسم في جدول واحد بس: لو جدولين ذكروه بيفتح الأخير.
3. 3«أنواع المنتجات» (Product types)
   أنواع منتجات بفواصل (حالة الحروف مش فارقة)، بتتقري لو مفيش جدول فيه المنتج نفسه.
4. 4«وسوم المنتجات» (Product tags)
   وسوم بفواصل (حالة الحروف مش فارقة)، بتتقري لو مفيش جدول فيه المنتج أو نوعه.

الزائر بيحفظ مقاسه (أو عمر طفله) مرة، وكل مقياس في المتجر بيرد عليه بالكرة: بتقعد على مقاسه لو المنتج متاح فيه. بيشوف ده في:

• البطاقات والبحث السريع: صف مقاسات، المتاح منها ممتلئ، وكلمة «بمقاسك» أو «قريب من مقاسك» أو «ليس بمقاسك».
• صفحة المنتج: بلوك «المقاسات» تحت السعر، وقسم «كيف يناسب».
• رأس الصفحة: زر «مقاسي» («طفلي» مع شرائح الأعمار)، وعلى الجوال كمان في أول القائمة.
• المجموعات والبحث: شريط بنفس المقياس لو عندك فلتر اسمه Size أو Age.
• السلة: سطر تحت كل منتج بيقول هل المقاس ده مقاسه.

والزائر بيحدد مقاسه من «مقاسي»، أو «محدّد مقاس الإطار»، أو «تسوّق حسب العمر».

الثيم بيعرف مقاسات المنتج من وسم عليه، أو من خيار اسمه Size أو Age. من غير الاتنين المنتج مبيعرضش مقاسات. جرّب على منتج واحد قبل الباقي.

أي نظارة مكتوب جوه ذراعها تلات أرقام بالمليمتر، زي 49-21-145: عرض العدسة والجسر وطول الذراع. Caliper بيقراها من حقل مخصص للمنتج اسمه custom.subtitle (نص من سطر واحد، زي 49-21-145 · 3 مقاسات)، ويعرضها في سطر تحت اسم المنتج في البطاقة، وفي رسمة الإطار بمقياس رسم في «كيف يناسب».

«دليل المقاسات» بيفتح من رابط جنب الخيار اللي اسمه في «الخيارات التي يظهر معها الدليل» (زي Size)، في صفحة المنتج والإضافة السريعة، على الجدول اللي فيه اسم المنتج، وإلا نوعه، وإلا وسم من وسومه.

ولمنتج من غير أرقام إطار، الجدول بالسنتيمتر بيخلّي «كيف يناسب» يرسم منحنى نمو: شريط لكل مقاس على مقياس بالسنتيمتر من أول عمود قيم في الجدول (زي الطول)، وقياسات المقاس المختار في اللوحة. محتاج صفين على الأقل فيهم أرقام. المنحنى بيتبع المقاس اللي الزائر بيختاره، سواء اسمه بأرقام زي 3-6m أو بحروف زي S.

الزائر بيختار عدسات الإطار في صفحته: خطوات مرقّمة (الاستخدام، الطلاء، السُمك)، كل خيار بسعره الحقيقي. الإطار والعدسات المدفوعة بيدخلوا السلة مع بعض، كل عدسة سطر مكتوب عليه الإطار، وكل اختيار (مدفوع أو مشمول) بيتكتب على سطر الإطار. زر الدفع المباشر بيختفي طول ما فيه عدسة مدفوعة مختارة، عشان محدش يشتري الإطار من غير عدساته.

مقاس الزائر (أو عمر طفله) بيتحفظ في متصفحه بس، ومبيتبعتش لأي مكان، ولا لمتجرك. لو مسح بيانات الموقع أو فتح نافذة خاصة بيبدأ من الأول، وزر «مسح» في لوحة «مقاسي» بيشيله على طول.

شريط رفيع فوق رأس الصفحة بيعرض رسالة واحدة في المرة، زي التوصيل المجاني أو مدة الإرجاع. لو أكتر من رسالة بتتبدل لوحدها، والزائر يقدر يوقفها أو يتنقل بالأسهم.

الشريط اللي فوق كل صفحة: الشعار والقائمة والبحث والحساب والسلة.

مستويات القائمة اللي بتعملها في «القوائم» (Menus) بتحدد إيه يظهر فين:

• المستوى الأول: الكلمات اللي في الشريط.
• المستوى التاني: روابط اللوحة الكبيرة بتاعة العنصر على الكمبيوتر، وصفحة العنصر جوه «نافذة القائمة» على الجوال.
• المستوى التالت: الروابط تحت عنوان كل عمود في اللوحة، وتحت عنوان كل مجموعة في نافذة القائمة.

1. 1«التخطيط» (Layout)
2. 2«القائمة» (Menu)
3. 3«محاذاة القائمة» (Menu alignment)
   لتخطيط الصف الواحد: «المنتصف» القائمة في نص الصف، و«البداية» جنب الشعار.
4. 4«أثناء التمرير» (While scrolling)
   «يختفي عند النزول ويظهر عند الصعود» بيخبّي الرأس والزائر نازل ويرجّعه أول ما يطلع، و«ظاهر دائماً» بيثبّته، و«يتحرك مع الصفحة» بيسيبه يمشي معاها.
5. 5«الظهور فوق القسم الأول من الصفحة الرئيسية» (Lie over the first section of the home page)
   في الصفحة الرئيسية بس: الرأس بيقعد فوق القسم الأول من غير خلفية، ويبقى ملوّن لما الصفحة تتحرك أو الماوس يعدّي عليه أو لوحة تتفتح. حطه آخر قسم في مجموعته، قبل عرض الشرائح أو الصورة الرئيسية على طول.
6. 6«النص فوق الصورة» (Text over the picture)
   لون الكلام وقت ما الرأس فوق الصورة: «فاتح مع ظل خفيف» أبيض على ظل غامق خفيف، و«داكن» غامق، و«داكن مع غشاء فاتح» غامق على غشاء فاتح.
7. 7«الشعار» (Logo)
   صورة شعارك في كل الصفحات. من غيرها بيظهر «الاسم عند عدم وجود شعار».
8. 8«الشعار فوق الصورة» (Logo over the picture)
   اختياري: نسخة فاتحة من الشعار بتظهر وقت ما الرأس فوق القسم الأول، ومحتاجة «الشعار» كمان.

1. 1«عرض الشعار على الكمبيوتر» (Logo width on desktop)
   عرض الشعار على الكمبيوتر، والارتفاع بيتبع الصورة.
2. 2«عرض الشعار على الجوال» (Logo width on mobile)
   عرض الشعار على الجهاز اللوحي والجوال.
3. 3«جعل الشعار العنوان الرئيسي للصفحة الرئيسية» (Make the logo the home page's main heading)
   الشعار يبقى العنوان الرئيسي (h1) للصفحة الرئيسية. اقفله لما عنوان صورة رئيسية يبقى هو العنوان الرئيسي: الصفحة ليها عنوان رئيسي واحد.
4. 4«الاسم عند عدم وجود شعار» (Name without a logo)
5. 5«خط الاسم» (Name font)
   الاسم بخط العناوين أو بخط النصوص، من «الخطوط».
6. 6«سماكة الاسم» (Name weight)
   سماكة الاسم في الصفحات الإنجليزية؛ «مثل العناوين» بتتبع سماكة العناوين. في الصفحات العربية الاسم دايماً «شبه عريض (600)».
7. 7«حجم الاسم» (Name size)
   حجم الاسم كنسبة من حجمه العادي.
8. 8«تباعد حروف الاسم» (Name letter spacing)
   المسافة بين حروف الاسم، بأجزاء من مية من حجم الحرف. الحروف العربية مش بتتباعد.

1. 1«رمز قبل الاسم» (Mark before the name)
2. 2«إظهار رابط الحساب» (Show the account link)
3. 3«قائمة حساب العميل» (Customer account menu)
   الروابط اللي في لوحة زرار الحساب (الطلبات والملف الشخصي)، وبتعدّلها في «القوائم» (Menus).
4. 4«رابط المفضّلة» (Wishlist link)
   صفحة تطبيق المفضّلة عندك: بيظهر زرار قلب مع أزرار الرأس على الكمبيوتر. فاضي: مفيش زرار.
5. 5«خانة البحث» (Search field)
   «هادئة» خانة بسيطة، و«بإطار وزر بحث» بإطار واضح وزرار، و«مستديرة وفاتحة على شريط ملوّن» لرأس ملوّن.
6. 6«النص المؤقت في خانة البحث» (Search field placeholder)
   الكلام الباهت جوه الخانة الفاضية. فاضي: «ابحث عن منتج أو قسم».
7. 7«عمليات البحث المقترحة تحت الخانة» (Suggested searches under the field)
   عدد عمليات البحث المقترحة اللي بتظهر روابط تحت الخانة على الكمبيوتر، وكلماتها من «البحث». ٠ بيخفيها.
8. 8«البحث حسب نوع المنتج» (Search by product type)
   أنواع منتجات بينها فواصل، بتظهر قايمة في أول الخانة. لكلمة تانية للنوع اكتب النوع ثم | ثم الكلمة (Audio | الصوتيات)، وفي ترجمة الإعداد غيّر الكلمات بس. صفحة البحث محتاجة فلتر نوع المنتج من تطبيق Search & Discovery.

1. 1«إظهار إجمالي السلة تحت اسمها» (Show the cart total under its label)
   إجمالي السلة تحت كلمة «السلة» على الشاشات الكبيرة، لما يكون في السلة حاجة.
2. 2«الأقسام» (Categories)
   لحد ٢٠ مجموعة، بعدد منتجاتها تحت زرار «كل الأقسام» وكأزرار صغيرة على الجوال. من غير مجموعات لا الزرار ولا الأزرار الصغيرة بيظهروا.
3. 3«إظهار كل الأقسام في الشريط» (Show All categories in the bar)
   زرار «كل الأقسام» في أول شريط الأقسام، وبيفتح «الأقسام» بعدد منتجاتها.
4. 4«اسم زر كل الأقسام» (All categories label)
   الكلام على الزرار ده. فاضي: «كل الأقسام».
5. 5«رابط كل الأقسام عند تعطيل البرمجيات» (All categories link without scripts)
   الصفحة اللي زرار «كل الأقسام» بيفتحها لما الزائر يدوس عليه وقايمته مفتوحة، أو من غير سكربتات. فاضي: كل المنتجات.
6. 6«إظهار أزرار الأقسام على الجوال» (Show category chips on phones)
   «الأقسام» صف أزرار صغيرة بتتسحب تحت خانة البحث على الجهاز اللوحي والجوال.
7. 7«شريط الأقسام» (Category bar)
   شكل عناصر الشريط على الكمبيوتر: اختيارات الأيقونات بتوزّع العناصر على عرض الشريط، والأيقونة جنب الكلمة أو فوقها. الأيقونات من بلوكات «عنصر قائمة».
8. 8«إعطاء شريط الأقسام ألواناً خاصة» (Give the category bar its own colors)
   بيدّي شريط الأقسام «نظام ألوان شريط الأقسام» بدل ألوان الرأس، لو النظامين مختلفين.

1. 1«نظام ألوان شريط الأقسام» (Category bar color scheme)
   ألوان شريط الأقسام من «الألوان»، لما «إعطاء شريط الأقسام ألواناً خاصة» يكون مفعّل.
2. 2«أزرار الأقسام على الجوال تأخذ ألوان الشريط» (Category chips on phones take the bar's colors)
   أزرار الأقسام على الجوال بتاخد ألوان الشريط كمان، لما الشريط ليه ألوان خاصة.
3. 3«ملاحظة في نهاية الشريط» (Note at the end of the bar)
   سطر قصير في آخر شريط الأقسام على الكمبيوتر. «حد التوصيل المجاني» بيكتب المبلغ اللي حطيته لعملة الزائر في «السلة» (من غير مبلغ مفيش ملاحظة)، و«نص من اختياري» بيكتب «نص الملاحظة».
4. 4«نص الملاحظة» (Note text)
   كلام الملاحظة مع «نص من اختياري». فاضي: مفيش ملاحظة.
5. 5«أيقونة الملاحظة» (Note icon)
   الأيقونة قبل الملاحظة. «بلا أيقونة» بتعرض برضه شاحنة لملاحظة التوصيل وفقاعة محادثة للنص بتاعك.
6. 6«رابط الملاحظة» (Note link)
   بيخلي الملاحظة رابط للصفحة دي. فاضي: نص عادي.
7. 7«نظام الألوان» (Color scheme)
   ألوان الرأس ولوحاته الكبيرة، من «الألوان».
8. 8«عدد منتجات السلة» (Cart count)
   لون الرقم على أيقونة السلة: لون الأزرار أو اللون المميز.

1. 1«عنصر القائمة» (Menu item)
   العنصر اللي البلوك بتاعه: عنوانه زي ما في القائمة (نساء)، أو ترتيبه (1 للأول)، والترتيب بيشتغل بكل لغات المتجر. أزرار الأقسام بتطابق عنوان المجموعة.
2. 2«الجمهور» (Audience)
   اختياري: الجمهور اللي البلوك تابع لقائمته، بالاسم (نساء) أو بالترتيب (1 للأول). فاضي: كل الجماهير، فممكن بلوكين لنفس العنصر، واحد لكل جمهور.
3. 3«الأيقونة» (Icon)
   أيقونة جنب اسم العنصر في شريط القائمة وعلى زرار القسم بتاعه. «صورة الأيقونة» بتحل محلها.
4. 4«صورة الأيقونة» (Icon image)
   صورة صغيرة بدل الأيقونة؛ الأحسن تكون مربعة.
5. 5«إظهاره بلون التخفيضات» (Show in the sale color)
   العنصر وأيقونته وزرار القسم بتاعه بلون التخفيضات، لعنصر زي العروض.
6. 6«في اللوحة الكبيرة» (In the large panel)
   اللي بتعرضه اللوحة جنب العناصر الفرعية، وكل اختيار بيستخدم حقوله بس. «مربعات مجموعات» بتحل محل العناصر الفرعية على الكمبيوتر. الاختيار اللي ملوش محتوى ومن غير عناصر فرعية بيفتح في المحرر بس، وفي المتجر العنصر رابط عادي.
7. 7«مجموعة البطاقة» (Card collection)
   لـ«بطاقة مجموعة»: صورتها وعنوانها ورابطها. ولـ«بطاقات منتجات»: منها المنتجات لو ما اخترتش منتجات، ولها بيودّي «عرض الكل».
8. 8«صورة البطاقة» (Card image)
   صورة «بطاقة مجموعة»، بنسبة 3:4. فاضي: صورة المجموعة.

1. 1«عنوان البطاقة» (Card title)
   العنوان تحت صورة البطاقة. فاضي: عنوان المجموعة، وبعده اسم العنصر.
2. 2«رابط البطاقة» (Card link)
   اختياري: الصفحة اللي البطاقة بتفتحها. فاضي: المجموعة، وإلا رابط العنصر نفسه.
3. 3«مجموعات المربعات» (Tile collections)
   المجموعات اللي بتظهر مربعات في «مربعات مجموعات»، لحد ٦، كل واحدة بصورتها واسمها وعدد منتجاتها. من غير مجموعات ومن غير عناصر فرعية، العنصر بيبقى رابط عادي في المتجر.
4. 4«المنتج» (Product)
   منتج «منتج واحد»: صورته واسمه وسعره ورابط «تسوّق الآن». من غيره مفيش بطاقة، ومن غير عناصر فرعية كمان العنصر بيبقى رابط عادي.
5. 5«سطر فوق المنتج» (Line above the product)
   السطر فوق المنتج في «منتج واحد» (فاضي: «اختيارنا»)، وعنوان «بطاقات منتجات» (فاضي: «الأكثر طلباً في» واسم العنصر).
6. 6«المنتجات» (Products)
   «قائمة قصيرة من المنتجات» بتعرض أول ٣ بصورتهم وسعرهم، و«بطاقات منتجات» بتعدّي لحد ١٢. «بطاقات منتجات» من غير منتجات بتعرض أول ٨ من «مجموعة البطاقة».
7. 7«عدد بطاقات المنتجات الظاهرة» (Product cards in view)
   عدد البطاقات الظاهرة مرة واحدة في «بطاقات منتجات»، والباقي بيتحرك. الشاشات الأصغر بتعرض ٢.
8. 8«إظهار مقياس المقاسات أسفل اللوحة» (Show the size scale under the panel)
   شريط في أسفل اللوحة فيه مقياس المقاسات (أو عمر الطفل) يختار منه الزائر، ورابط أداة المقاس، لما المقاسات شغالة في «المقاسات».

رأس الصفحة ونافذة القائمة والتذييل بيقروا قوايم بتعملها في «المحتوى» (Content) > «القوائم» (Menus)؛ Shopify بيعمل لك «Main menu» و«Footer menu». القايمة ليها لحد ٣ مستويات (عنصر، وتحته فرعي، وتحته فرعي تاني)، وكل مستوى بيظهر في مكان: «رأس الصفحة».

1. 1«الاسم» (Name)
   اسم القايمة؛ هو اللي بتشوفه في اختيار «القائمة» في المحرر.
2. 2«المعرّف» (Handle)
   اسم القايمة في الروابط والكود، بيتكتب من الاسم.
3. 3«إضافة عنصر قائمة» (Add menu item)
   بيضيف عنصر جديد للقايمة.
4. 4«مقبض السحب» (Drag handle)
   اسحب العنصر لفوق أو لتحت عشان ترتبه، ولناحية الداخل عشان يبقى فرعي.
5. 5«تعديل العنصر» (Edit item)
   بيفتح اسم العنصر ورابطه.
6. 6«حفظ» (Save)
   من غيره التعديلات مبتتحفظش.

صورة كبيرة بنصفين بيتحركوا عكس بعض: صورة من الحياة اليومية، وصورة المنتج على خلفية ملوّنة وتحتها الكلام. على الجوال الصورتين فوق بعض والكلام تحتهم.

1. 1«اسم العرض لقارئات الشاشة» (Name for screen readers)
   اسم العرض لقارئ الشاشة؛ مش بيظهر للزائر. فاضي: «شرائح مختارة».
2. 2«عنوان الشريحة الأولى هو العنوان الرئيسي للصفحة (H1)» (The first slide's heading is the page's main heading (H1))
   عنوان أول شريحة يبقى العنوان الرئيسي (h1) للصفحة. لأول قسم في الصفحة بس؛ وفي الصفحة الرئيسية اقفل كمان «جعل الشعار العنوان الرئيسي للصفحة الرئيسية» في «رأس الصفحة».
3. 3«بدّل الشرائح كل» (Change slides every)
4. 4«مدة الانتقال» (Travel time)
   مدة انتقال الشريحة؛ الرقم الأكبر حركة أبطأ. لمن جهازه على تقليل الحركة: تلاشي سريع بدل الحركة.
5. 5«الارتفاع على الجهاز اللوحي والحاسوب» (Height on tablets and desktop)
   «ملء الشاشة» بيملا النافذة تحت رأس الصفحة. على الجوال الارتفاع من شكل الصورتين (الإعدادين اللي بعده).

1. 1«شكل صورة الحياة اليومية على الجوال» (Lifestyle picture shape on phones)
   الصورة بتتقص على الشكل ده على الجوال، وقص الجوال في كل شريحة بيختار الجزء اللي يفضل.
2. 2«شكل صورة المنتج على الجوال» (Product picture shape on phones)
   زي اللي قبله لصورة المنتج؛ «شريط (2:1)» الأعرض وبيقص أكتر.
3. 3«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
4. 4«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».

1. 1«صورة من الحياة اليومية» (Lifestyle picture)
2. 2«القص الأفقي على الجهاز اللوحي والحاسوب» (Horizontal crop on tablets and desktop)
   الجزء الأفقي اللي يفضل ظاهر لما الصورة تتقص: ٠ الحافة الشمال، ٥٠ النص، ١٠٠ اليمين. لو للصورة «نقطة محورية» (Focal point) في Shopify، هي اللي بتحدد القص.
3. 3«القص الرأسي على الجهاز اللوحي والحاسوب» (Vertical crop on tablets and desktop)
   الجزء الرأسي اللي يفضل ظاهر: ٠ الحافة العليا و١٠٠ السفلى.
4. 4«القص الأفقي على الجوال» (Horizontal crop on phones)
   نفس القص الأفقي على الجوال، على «شكل صورة الحياة اليومية على الجوال».
5. 5«القص الرأسي على الجوال» (Vertical crop on phones)
   نفس القص الرأسي على الجوال.
6. 6«صورة المنتج» (Product picture)
   المنتج على خلفية سادة؛ أسفلها بيتلاشى في «لون الخلفية» ورا الكلام. فاضية: أول صورة للمنتج المختار، ومن غير منتج صورة مؤقتة.

1. 1«صورة المنتج: القص الأفقي على الجهاز اللوحي والحاسوب» (Product picture: horizontal crop on tablets and desktop)
   الجزء الأفقي اللي يفضل ظاهر من صورة المنتج: ٠ الحافة الشمال و١٠٠ اليمين.
2. 2«صورة المنتج: القص الرأسي على الجهاز اللوحي والحاسوب» (Product picture: vertical crop on tablets and desktop)
   الجزء الرأسي اللي يفضل ظاهر من صورة المنتج: ٠ الحافة العليا و١٠٠ السفلى. على الحاسوب الصورة بتاخد الجزء العلوي من نصها بس.
3. 3«صورة المنتج: القص الأفقي على الجوال» (Product picture: horizontal crop on phones)
   نفس القص الأفقي لصورة المنتج على الجوال، على «شكل صورة المنتج على الجوال».
4. 4«صورة المنتج: القص الرأسي على الجوال» (Product picture: vertical crop on phones)
   نفس القص الرأسي لصورة المنتج على الجوال؛ مهم مع «شريط (2:1)» اللي بيقص كتير.
5. 5«لون الخلفية» (Field color)
6. 6«المنتج» (Product)

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان. بيظهر على الجوال وشاشات الكمبيوتر العالية بس؛ الجهاز اللوحي وأغلب اللابتوبات بيخبّوه عشان الشريحة تفضل في شاشة واحدة.
4. 4«لون النصوص على الجهاز اللوحي والحاسوب» (Words color on tablets and desktop)
   لون الكلام على «لون الخلفية»: داكن لخلفية فاتحة أو أبيض لخلفية داكنة. على الجوال الكلام تحت الصور بألوان القسم.

وعود متجرك الصغيرة بأيقونات، زي التوصيل والإرجاع والضمان: كل واحد أيقونة وعنوان وسطر، في صف أو بطاقات أو في المنتصف.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
2. 2«العنوان» (Heading)
   عنوان القسم، وبيقبل خط غامق ومائل. من غيره «اسم القسم لقارئات الشاشة» هو اللي بيسمّي القسم.
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«اسم القسم لقارئات الشاشة» (Name for screen readers)
   اسم القسم لقارئ الشاشة لما يكون من غير «العنوان»؛ مش بيظهر للزائر. فاضي: «لماذا تتسوّق معنا».
5. 5«التخطيط» (Layout)
6. 6«الأعمدة على الكمبيوتر» (Columns on desktop)
   عدد العناصر جنب بعض على الكمبيوتر. «تلقائي (حتى 4)» عدد العناصر لحد ٤. الشاشات الأصغر بتعرض أقل.

1. 1«المحاذاة» (Alignment)
   «تلقائي» بداية في «صف» ومنتصف في الباقي. في «صف» المنتصف بيشتغل على الكمبيوتر بس.
2. 2«عمودان على الهاتف» (Two columns on phones)
   في «صف»: على الجوال عنصرين في كل صف والأيقونة فوق الكلام، بدل عنصر تحت التاني.
3. 3«نمط البطاقة» (Card style)
   في «بطاقات»: «ملوّنة» بطاقة بلون هادي، و«بإطار» إطار رفيع بزوايا حادة من غير لون.
4. 4«نمط الأيقونة» (Icon style)
5. 5«لون الأيقونة» (Icon color)
   «اللون الأساسي» هو لون القالب الأساسي. صورة «أيقونة خاصة بك» بتفضل بألوانها.
6. 6«أرقام الخطوات» (Step numbers)
   بيرقّم العناصر ٠١ و٠٢ و٠٣ بترتيبها. «صغيرة في الزاوية» رقم صغير والأيقونة باقية، و«كبيرة بدل الأيقونة» رقم كبير مفرّغ مكان الأيقونة.

1. 1«خط العنوان» (Title font)
   خط عنوان كل عنصر في «صف». «بطاقات» و«في المنتصف» دايماً بخط العناوين.
2. 2«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
3. 3«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
4. 4«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
5. 5«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

1. 1«الأيقونة» (Icon)
2. 2«أيقونة خاصة بك» (Your own icon)
   صورة مكان الأيقونة اللي فوق، بتظهر صغيرة وبألوانها. الأحسن SVG أو PNG مربع.
3. 3«العنوان» (Heading)
4. 4«النص» (Text)
5. 5«الرابط» (Link)
   الصفحة اللي العنصر كله بيفتحها.
6. 6«نص الرابط» (Link words)
   كلمة صغيرة تحتها خط تحت السطر، زي اعرف أكتر؛ بتظهر مع «الرابط» بس.
7. 7«لون الخلفية» (Tint)
   لون العنصر ده: بيملا بطاقته في «بطاقات»، وفي باقي التخطيطات بيلوّن دايرة الأيقونة مع «داخل حلقة» أو «على دائرة ملوّنة». فاضي: ألوان القسم.

مجموعاتك بصورها وعدد منتجات كل واحدة، والدوس على مجموعة بيفتحها. ٥ أنماط: دوائر وبطاقات ولوحات وبلاطات وشريط شارات.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«نص الرابط» (Link text)
   كلام رابط في آخر صف العنوان (تحت العنوان على الجوال)، زي عرض الكل؛ محتاج «الرابط» كمان.
5. 5«الرابط» (Link)
   الصفحة اللي الرابط بيفتحها، زي صفحة كل المجموعات؛ محتاج «نص الرابط».
6. 6«المحاذاة» (Alignment)
   مكان رأس القسم. «تلقائي» منتصف للدوائر وشريط الشارات وبداية للباقي. أسهم الدوائر والبطاقات بتظهر في الرأس إلا مع «المنتصف».
7. 7«الاسم لقارئات الشاشة» (Name for screen readers)
   اسم القسم لقارئ الشاشة لما يكون من غير «العنوان»؛ مش بيظهر للزائر. فاضي: «تسوّق حسب المجموعة».

1. 1«النمط» (Style)
2. 2«اللوحات تنفتح واحدة بعد الأخرى» (Panels open one after another)
   في نمط اللوحات على الكمبيوتر: اللوحة اللي بعدها بتنفتح لوحدها كل حوالي ٥ ثواني، وخط تحت رقمها بيعدّ الوقت. بتستنى طول ما المؤشر على القائمة.
3. 3«إظهار عدد المنتجات» (Show product count)
4. 4«شكل الصورة» (Image shape)
   للبطاقات والبلاطات. «تلقائي» طولي (3:4) للبطاقات ومربع للبلاطات.
5. 5«ملاءمة الصورة» (Picture fit)
   للدوائر والبلاطات. «مقصوصة على لون» بتحط صورة المنتج المتصورة على أبيض فوق «خلفية الصورة المقصوصة» بتاعة كل مجموعة، والأبيض بيدوب فيها.
6. 6«تخطيط البلاطات» (Tiles layout)
   «بنتو» على الكمبيوتر: شبكة ٤ أعمدة، الأولى بطول صفين والسادسة بعرض عمودين، وإعدادات الأعمدة مبتشتغلش هناك.
7. 7«تحديد العناصر الظاهرة» (Set the items in view)
   للدوائر والبطاقات: مفعّل، الأرقام الأربعة اللي تحته بتحدد كام عنصر ظاهر. مقفول: توزيع كل نمط.

1. 1«على الهواتف» (On phones)
   كام عنصر ظاهر مرة واحدة؛ الكسر زي ٣٫٣ بيبيّن طرف اللي بعده. مع «تحديد العناصر الظاهرة» بس.
2. 2«على الأجهزة اللوحية» (On tablets)
   زي «على الهواتف»، للأجهزة اللوحية.
3. 3«على الشاشات المكتبية الصغيرة» (On small desktops)
   زي «على الهواتف»، للشاشات المكتبية الصغيرة.
4. 4«على الشاشات المكتبية الكبيرة» (On large desktops)
   زي «على الهواتف»، للشاشات المكتبية الكبيرة.
5. 5«الأعمدة على الهاتف» (Columns on mobile)
   أعمدة «بلاطات» على الهاتف.
6. 6«الأعمدة على الجهاز اللوحي» (Columns on tablet)
   أعمدة «بلاطات» على الجهاز اللوحي.

1. 1«الأعمدة على الشاشات المكتبية الصغيرة» (Columns on small desktops)
   أعمدة «بلاطات» على الشاشات المكتبية الصغيرة؛ «بنتو» دايماً ٤.
2. 2«الأعمدة على الكمبيوتر» (Columns on desktop)
   أعمدة «بلاطات» على الكمبيوتر؛ «بنتو» دايماً ٤.
3. 3«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
4. 4«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
5. 5«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
6. 6«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

1. 1«المجموعة» (Collection)
2. 2«العنوان» (Title)
3. 3«الصورة» (Image)
   صورة بدل صورة المجموعة. فاضية: صورة المجموعة من «المجموعات» (Collections)، ولو مفيش صورة مؤقتة.
4. 4«سطر قصير» (Line)
   في نمط اللوحات: سطر قصير بيظهر لما اللوحة تتفتح.
5. 5«صورة الشاشات المكتبية» (Desktop image)
   لبلاطات «بنتو»: صورة البلاطة على الكمبيوتر، معمولة للأولى الطويلة والسادسة العريضة. الجوال بيستخدم «الصورة».
6. 6«الأيقونة» (Icon)
   لشريط الشارات: أيقونة من ٢٥ في دايرة الشارة. «بدون» بتعرض الصورة في دايرة صغيرة.
7. 7«خلفية الصورة المقصوصة» (Cut-out background)
   الخلفية الملونة ورا صورة المنتج مع «مقصوصة على لون». فاضية: لون اللوحة.

منتجات مجموعاتك في تبويبات: الزائر يدوس اسم تبويب فيشوف منتجاته في صف بيتسحب أو شبكة بزر «عرض المزيد»، وبعدها «عرض الكل».

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«نمط التبويبات» (Tab style)
5. 5«خط التبويبات» (Tab font)
   «خط العناوين» الكلمات المسطّرة كبيرة بخط العناوين، و«خط النص بحجم القائمة» بخط النص بحجم القائمة. مع «شارات» الاختيار التاني بيغيّر حجم كلامها بس.
6. 6«المحاذاة» (Alignment)
   «في الوسط» العنوان والتبويبات تحته في النص. التاني بيحطهم في صف واحد على الكمبيوتر، وعلى الأصغر كله عند البداية.
7. 7«التخطيط» (Layout)
   «صف قابل للسحب» صف بأسهم تحته. «شبكة مع زر عرض المزيد» بتعرض جزء والزر بيكمّل الباقي.

1. 1«عدد البطاقات في الصف» (Cards per row)
   على الشاشات العريضة؛ الشاشات المكتبية الأصغر ٤ بالكتير، والجهاز اللوحي ٣، والهاتف من «الأعمدة على الهاتف».
2. 2«الأعمدة على الهاتف» (Columns on mobile)
   ١ بطاقة كبيرة (وطرف اللي بعدها في الصف)، أو ٢.
3. 3«عدد المنتجات لكل تبويب» (Products per tab)
   أقصى عدد منتجات في كل تبويب، بترتيب المجموعة أو بترتيبك لو اخترتها بإيدك.
4. 4«عدد المنتجات قبل زر عرض المزيد» (Products before Load more)
   للشبكة: البطاقات الظاهرة قبل «عرض المزيد». ٠ بيعرض الكل مرة واحدة، ولو الرقم مش أقل من «عدد المنتجات لكل تبويب» مفيش زر.
5. 5«عدد المنتجات التي يضيفها كل نقر على عرض المزيد» (Products each Load more adds)
   للشبكة: البطاقات اللي كل دوسة على «عرض المزيد» بتضيفها؛ العدّاد (يُعرض ٦ من ٩) بيتحدّث معاها.
6. 6«نمط بطاقة المنتج» (Product card style)
   «كما في إعدادات القالب» من «بطاقات المنتجات»؛ الباقي للقسم ده بس.
7. 7«إظهار شارات الخيارات على البطاقات» (Show option pills on cards)
   قيم خيار واحد (زي المقاسات) كشارات صغيرة تحت عنوان كل بطاقة، والقيمة اللي نفدت في كل النسخ عليها شطب. للمنتجات اللي ليها أكتر من قيمة.

1. 1«الخيار المعروض كشارات» (Option shown as pills)
   اسم الخيار بكل لغات متجرك بينهم فاصلة، زي Size, المقاس؛ ضيف أسماء تانية لو المنتجات بتسمّيه بأسماء مختلفة.
2. 2«إظهار عرض الكل» (Show View all)
3. 3«نص عرض الكل» (View all text)
   كلام زر عرض الكل. فاضي: «عرض الكل».
4. 4«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
5. 5«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
6. 6«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
7. 7«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

الزائر بيلف مجسم المنتج ثلاثي الأبعاد ويكبّره، ويفتح نقط مرقّمة عليه بتشرح تفاصيله. دواير صغيرة بصور المنتجات بتنقل بين المجسمات.

1. 1«التخطيط» (Layout)
   «بجانب النص» المجسم جنب العنوان والكلام. «داخل دائرة» العنوان في النص فوق مساحة دايرية، والنقط مكتوبة على جانبيها (تحتها على الجوال).
2. 2«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
3. 3«العنوان» (Heading)
4. 4«النص» (Text)
   سطر تحت العنوان.
5. 5«الزر يفتح عرضاً سريعاً» (The button opens a quick view)
   زرار المنتج تحت المجسم بيفتح عرض سريع؛ مقفول: بيروح لصفحة المنتج. الزرار بيظهر مع «المنتج» بس.
6. 6«يدور تلقائياً» (Turns on its own)
   المجسم بيلف ببطء لوحده، بزرار إيقاف، لحد ما الزائر يفتح نقطة أو يوقفه. مش بيلف أبداً لمن جهازه على تقليل الحركة.

1. 1«التكبير» (Zoom)
2. 2«شاهدها في مكانك (الواقع المعزز)» (See it in your room (AR))
   زرار «شاهدها في مكانك» على الجوالات والأجهزة اللوحية اللي بتدعم الواقع المعزز، بيحط المجسم في مكان الزائر بالكاميرا. الشاشات التانية بتعرض شارة 3D.
3. 3«الظل تحت المجسم» (Shadow under the model)
   الظل تحت المجسم؛ ٠ بيشيله، والأكبر أغمق.
4. 4«المجسم التالي تلقائياً» (Next model on its own)
   مع مجسمين أو أكتر، اللي بعده بيظهر لوحده والقسم باين ومحدش بيستخدمه، بزرار إيقاف. مش بيشتغل لمن جهازه على تقليل الحركة ولا في المحرر.
5. 5«مدة كل مجسم» (Time on each model)
   ثواني كل مجسم قبل اللي بعده؛ الحلقة حوالين دايرته الصغيرة بتتملي وهي بتعدّ.
6. 6«موضع المجسم على الشاشات الكبيرة» (Model position on large screens)
   في «بجانب النص»: «البداية» المجسم ناحية بداية القراءة (اليمين في العربي)، و«النهاية» الناحية التانية. على الجهاز اللوحي والجوال المجسم فوق الكلام.

1. 1«شكل المساحة» (Stage shape)
2. 2«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
3. 3«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
4. 4«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
5. 5«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

1. 1«المنتج» (Product)
   المنتج اللي مجسمه بيظهر (ملف .glb في «الوسائط»؛ Shopify بتعمل ملف الآيفون لوحدها)، واسمه وسعره وزراره تحت المجسم.
2. 2«رابط ملف ثلاثي الأبعاد» (3D file link)
   رابط ملف .glb لمنتج مالوش مجسم، زي ملف مرفوع في «المحتوى» (Content) > «الملفات».
3. 3«صورة أثناء التحميل» (Picture while loading)
   الصورة لحد ما المجسم يتحمّل. فاضي: صورة المجسم نفسه، وبعدها صورة المنتج.
4. 4«لون المجسم» (Model color)
   لون المجسم ده: القسم كله بياخده طول ما المجسم ظاهر، والمساحة والدايرة الصغيرة درجة أفتح منه. فاضي: ألوان نظام الألوان.
5. 5«صورة الدائرة الصغيرة» (Picture on its chip)
   اختيارية: صورة الدايرة الصغيرة. فاضي: صورة المنتج.
6. 6«الاسم» (Name)
   اسم المجسم لو ما اخترتش «المنتج». من غير الاتنين: «عرض ثلاثي الأبعاد».

1. 1«النص» (Text)
   سطر تحت اسم المجسم.
2. 2«نص الزر» (Button label)
3. 3«زاوية البداية» (Starting angle)
   زاوية البداية الأفقية؛ ٠ بيواجه الأمام. زرار الرجوع تحت المجسم بيرجّع للعرض ده.
4. 4«ارتفاع النظر في البداية» (Starting height)
   ارتفاع النظر في البداية: ٩٠ نظرة مستوية، والأقل نظرة من فوق.

قصة بتتحكي والزائر نازل في الصفحة: الصور ثابتة على جنب وكل مشهد بيفتح صورته فوق اللي قبلها، وكلامه ومنتجاته بتعدّي جنبها. مقياس نقط تحت الصور بيقول هو فين.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«موضع الصور المثبتة على الديسكتوب» (Pinned pictures on desktop)
5. 5«طول تمرير المشهد» (Scroll length of a scene)
   قد إيه من النافذة بياخده كل مشهد والزائر نازل: الأكبر قصة أبطأ. الصور بتفضل ثابتة.

1. 1«إظهار المقياس تحت الصور» (Show the scale under the pictures)
2. 2«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
3. 3«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
4. 4«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
5. 5«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

1. 1«الاسم على المقياس» (Name on the scale)
   كلمة أو كلمتين بتسمّي نقطة المشهد، وبتظهر سطر صغير فوق عنوانه، زي شاشات أو شمس. فاضي: النقطة بتاخد العنوان.
2. 2«الصورة» (Image)
3. 3«العنوان» (Heading)
4. 4«النص» (Text)
   كلام المشهد، وبيقبل فقرات وخط غامق وروابط.
5. 5«المنتجات» (Products)
6. 6«نص الزر» (Button label)
   كلام زرار المشهد؛ الزرار محتاج «رابط الزر» كمان.
7. 7«رابط الزر» (Button link)
   الصفحة اللي الزرار بيفتحها؛ محتاج «نص الزر».

شريط عبارات قصيرة بيتحرك لوحده، وبين العبارات صورة صغيرة أو رمز. بيقف تحت المؤشر أو بزر الإيقاف.

1. 1«اسم القسم لقارئات الشاشة» (Name for screen readers)
   اسم الشريط لقارئ الشاشة؛ مش بيظهر للزائر. فاضي: «أبرز ما يميّزنا».
2. 2«السرعة» (Speed)
3. 3«مرات التكرار في الدورة» (Repeats per loop)
   التكرار الأكتر بيطوّل الدورة، فالكلام بيتحرك أسرع على نفس «السرعة». القايمة القصيرة بتاخد تكرار زيادة لوحدها.
4. 4«حجم النص» (Text size)
5. 5«نمط النص» (Text style)
   العبارات بتتبادل: مفرّغة ومصمتة، أو مفرّغة وبلون التمييز. في العربي «عبارة مفرّغة وأخرى بلون التمييز» بيبدّل بين لون الكلام ولون التمييز.
6. 6«أحرف كبيرة» (Capital letters)
   حروف كبيرة في الصفحات الإنجليزية؛ العربي مبيتغيرش.

1. 1«لون النص» (Text color)
   لون العبارات. فاضي: لون الكلام في نظام الألوان.
2. 2«بين العبارات» (Between the phrases)
   «صورة العبارة» صورة كل عبارة؛ الباقي رموز مرسومة، أو «لا شيء».
3. 3«شكل الصورة» (Picture shape)
   إطار الصورة لما «بين العبارات» على «صورة العبارة»؛ «كبسولة» الأعرض.
4. 4«لون الرمز» (Sign color)
   للرموز المرسومة. فاضي: لون التمييز.
5. 5«لون الرمز الثاني» (Second sign color)
   لرمز من كل اتنين. فاضي: نفس «لون الرمز».
6. 6«الشريط» (Band)

1. 1«لون الخط خلف الشريط المائل» (Ribbon stripe color)
   الخط ورا الشريط المائل. فاضي: لون التمييز.
2. 2«الحواف» (Edges)
   «متموّجة» حافة فوق وتحت على شكل موجات صغيرة.
3. 3«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
4. 4«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
5. 5«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
6. 6«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

منتج واحد بصوره وصندوق شراء كامل، فالزائر يختار ويضيف للسلة من غير ما يسيب الصفحة. «المعرض» على الكمبيوتر ٦ أشكال:

• جنباً إلى جنب: صورتين والصندوق جنبهم.
• متداخلة: صورة كبيرة وصورة صغيرة مايلة فوق ركنها، والضغط بيقدّمها.
• متراصة: الصور تحت بعض والصندوق ماشي جنبها.
• طبقات: كل صورة تثبت والتانية تنزلق فوقها.
• تدخل من الجانب: كل صور المنتج بكل ألوانه تدخل واحدة ورا التانية مع النزول.
• شبكة: اتنين في اتنين.

على الجوال معرض بيتسحب، وعلى الجهاز اللوحي صورتين جنب بعض.

1. 1«المنتج» (Product)
   صوره وسعره وخياراته ووصفه بيتاخدوا منه. فاضي: صور مؤقتة والاسم «اسم منتجك»، في المتجر كمان.
2. 2«تسمية صغيرة أعلى العنوان» (Small label above)
3. 3«العنوان» (Heading)
   العنوان، وبيفتح صفحة المنتج. فاضي: اسم المنتج.
4. 4«السطر تحت العنوان» (Line under the title)
   «رمز المنتج» بيظهر «رقم القطعة» ويتغير مع النسخة المختارة. المنتج من غير مورّد بيظهر الرمز بس.
5. 5«إظهار مقدار التوفير» (Show the saving)
   «وفّر» ومبلغ التوفير بعد السعر، لما «السعر المقارن» (Compare-at) للنسخة المختارة يكون أعلى من سعرها.
6. 6«الوصف» (Description)
7. 7«عدد كلمات الوصف المختصر» (Words in the short description)
   عدد كلمات «مختصر».

1. 1«المعرض» (Gallery)
2. 2«عدد الصور لكل لون» (Pictures per color)
   الصور الظاهرة من صورة النسخة المختارة وما بعدها؛ رتّب صور المنتج لون بعد لون في «المنتجات» (Products). مع «الصور تدخل من الجانب» كل الصور بتظهر.
3. 3«شكل الصورة» (Image shape)
   شكل إطار كل صورة؛ القص أو العرض الكامل من «ملاءمة الصورة».
4. 4«ملاءمة الصورة» (Picture fit)
   «إظهار الصورة كاملة» الصورة كلها بهوا بسيط على خلفية فاتحة، مناسب للمنتجات المصورة على أبيض.
5. 5«ملاحظة» (Note)
6. 6«إظهار رابط التفاصيل» (Show details link)
   رابط تحت الصندوق لصفحة المنتج الكاملة.
7. 7«نص رابط التفاصيل» (Details link text)
   كلام رابط التفاصيل. فاضي: «عرض كل التفاصيل».

1. 1«نص الرابط الثاني» (Second link text)
   كلام رابط تاني بأيقونة مسطرة جنب رابط التفاصيل، زي اعرف مقاسك؛ محتاج «الرابط الثاني».
2. 2«الرابط الثاني» (Second link)
   مكان الرابط التاني، زي أداة المقاس في الصفحة دي؛ محتاج «نص الرابط الثاني».
3. 3«معرّف القسم» (Anchor)
   اختياري: اسم قصير زي help عشان رابط بـ #help (ومن صفحة تانية /#help) ينقل للقسم ده. كل اسم مرة واحدة في الصفحة: النسخة المكررة من القسم بتاخد نفس الاسم، فغيّره فيها أو امسحه.
4. 4«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
5. 5«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
6. 6«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
7. 7«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

صورة منتج عليها علامات مرقّمة على أجزائه، وجنبها قايمة بنفس الأرقام بتسمّي كل جزء. الوقوف على علامة أو صف بينوّر التاني.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«الصورة» (Image)
5. 5«وصف الصورة» (Picture description)
   وصف الصورة لقارئ الشاشة. فاضي: النص البديل المحفوظ مع الصورة.
6. 6«الصورة على الديسكتوب» (Picture on desktop)
   «البداية» الصورة ناحية بداية القراءة (اليمين في العربي) والقايمة جنبها، و«النهاية» العكس. على الجهاز اللوحي والجوال الصورة فوق القايمة.

1. 1«نص الزر» (Button label)
2. 2«رابط الزر» (Button link)
   الصفحة اللي الزرار بيفتحها؛ محتاج «نص الزر».
3. 3«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
4. 4«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
5. 5«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
6. 6«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

أول الصفحة كروت مستديرة فوق بعض زي رزمة: الكارت اللي قدام وتحته اتنين باينين، والزائر يسحبه أو يدوس سهم فيروح ورا. كل كارت صورة جنب لوحة كلام بألوانها.

إطلالات بصور عليها نقط: الزائر يدوس نقطة فيشوف القطعة وسعرها ويضيفها. «معرض» صف إطلالات، و«عرض مفرد» إطلالة واحدة جنب قطعها وزرار بيضيفها كلها.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«النمط» (Style)
   «معرض» صف إطلالات بيتسحب، وتحت كل صورة اسمها وعدد قطعها. «عرض مفرد» إطلالة في المرة جنب قطعها بأسعارها وزرار «أضف الإطلالة».
5. 5«شكل الصورة» (Image shape)
6. 6«الصورة على الهواتف والأجهزة اللوحية» (Picture on phones and tablets)
   لـ«عرض مفرد» تحت مقاس الكمبيوتر: «طولية (4:5)» بتقص الصورة طولية، و«بالشكل نفسه كما على الشاشات المكتبية» بتسيب شكلها؛ اختارها لصور الغرف العريضة.
7. 7«نقاط مرقّمة» (Numbered spots)
   لـ«معرض»: رقم على كل نقطة؛ مقفول: علامة +. «عرض مفرد» بيرقّم نقطه دايماً.

1. 1«الإطلالات الظاهرة على الهواتف» (Looks in view on phones)
   عدد الإطلالات الباينة مرة واحدة على الهواتف.بيظهر لما تختار «معرض» في «النمط»
2. 2«الإطلالات الظاهرة على الأجهزة اللوحية» (Looks in view on tablets)
   عدد الإطلالات الباينة على الأجهزة اللوحية؛ الكسر زي ٢٫٥ بيسيب جزء من اللي بعدها باين.بيظهر لما تختار «معرض» في «النمط»
3. 3«الإطلالات الظاهرة على الشاشات المكتبية» (Looks in view on desktop)
4. 4«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
5. 5«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
6. 6«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
7. 7«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

أحدث مقالات مدونتك: صورة وتاريخ وعنوان وأول سطور، والبطاقة كلها بتفتح المقال. بتكتب المقالات في «منشورات المدونة» (Blog posts)، والقسم بيعرض أحدثها لوحده.

1. 1«المدونة» (Blog)
   المدونة اللي بتتاخد منها أحدث المقالات. فاضي: بطاقات تجريبية من غير روابط؛ والمدونة من غير مقالات: جملة قصيرة.
2. 2«التخطيط» (Layout)
3. 3«عدد المقالات» (Articles)
4. 4«عرض الأسطر الأولى» (Show the first lines)
5. 5«تسمية صغيرة أعلى العنوان» (Small label above)
6. 6«العنوان» (Heading)

1. 1«عرض رابط إلى المدونة» (Show a link to the blog)
2. 2«نص الرابط» (Link label)
   كلام الرابط. فاضي: «كل المقالات».
3. 3«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
4. 4«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
5. 5«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
6. 6«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

صور وفيديوهات قصيرة لمنتجاتك في الحقيقة، في صف بيتسحب. على كل بطاقة كبسولة بصورة المنتج الدايرية بيفتح منها اسمه وسعره، والدوس عليها بيفتح المنتج.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«نص الرابط» (Link label)
   كلام رابط في آخر صف العنوان (تحت العنوان على الجوال)، زي عرض الكل؛ محتاج «الرابط» كمان.
5. 5«الرابط» (Link)
   الصفحة اللي الرابط بيفتحها؛ محتاج «نص الرابط».
6. 6«عدد البطاقات في الصف على الشاشات الكبيرة» (Cards in a row on large screens)
7. 7«شكل الصورة» (Image shape)

1. 1«اسم المنتج وسعره» (Product name and price)
   صورة المنتج الدايرية دايماً على البطاقة. «ينفتح تحت المؤشر» بيفتح الاسم والسعر والماوس على البطاقة أو التركيز على الكبسولة، و«ظاهر دائماً» مفتوح على طول. على اللمس مفتوح دايماً.
2. 2«تشغيل الفيديو» (Videos play)
   «تحت المؤشر» الفيديو بيشتغل والماوس أو التركيز على بطاقته، و«ما دام ظاهراً» وهو باين. شاشات اللمس بتستخدم التاني، ومش بيشتغل لوحده أبداً لمن جهازه على تقليل الحركة.
3. 3«يفتح المنتج في عرض سريع» (The product opens in a quick view)
   الكبسولة بتفتح عرض سريع؛ مقفول: صفحة المنتج.
4. 4«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
5. 5«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
6. 6«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
7. 7«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

أسئلة وأجوبة بتفتح وتقفل، في مجموعات (التوصيل، المقاسات، الإرجاع...). الأجوبة في الصفحة نفسها فمحركات البحث بتقراها، ومعاها بطاقة تواصل اختيارية.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
2. 2«العنوان» (Heading)
3. 3«النص» (Text)
   سطر تحت العنوان، نص عادي.
4. 4«التخطيط» (Layout)
   «العنوان بجانب الأجوبة»: على الكمبيوتر العنوان وبطاقة التواصل ثابتين في الجنب، وعلى الأصغر تحت بعض. «عمود واحد في المنتصف»: البطاقة تحت الأجوبة.
5. 5«مجموعات الأسئلة» (Question groups)
6. 6«جواب واحد مفتوح في كل مرة» (One answer open at a time)
   فتح جواب بيقفل اللي مفتوح في نفس المجموعة.

1. 1«إضافة بيانات منظمة للأسئلة الشائعة» (Add FAQ structured data)
   بيانات منظمة بتساعد محركات البحث تفهم أجوبتك. لقسم أسئلة واحد في الصفحة: لو اتفعّلت في قسمين، الأول بس اللي بيتوسم.
2. 2«عنوان التواصل» (Contact heading)
3. 3«نص التواصل» (Contact text)
   سطر تحت عنوان البطاقة، زي إمتى بترد.
4. 4«نص الزر» (Button label)
   كلام الزر الأول (زر رئيسي)؛ محتاج «رابط الزر».
5. 5«رابط الزر» (Button link)
   الصفحة اللي الزر الأول بيفتحها، زي صفحة التواصل؛ محتاج «نص الزر».
6. 6«نص الزر الثاني» (Second button label)
   كلام الزر التاني (زر ثانوي)؛ محتاج «رابط الزر الثاني».

1. 1«رابط الزر الثاني» (Second button link)
   الصفحة اللي الزر التاني بيفتحها، زي رابط إيميل؛ محتاج «نص الزر الثاني».
2. 2«معرّف القسم» (Anchor)
   اختياري: اسم قصير زي help عشان رابط بـ #help (ومن صفحة تانية /#help) ينقل للقسم ده. كل اسم مرة واحدة في الصفحة: النسخة المكررة من القسم بتاخد نفس الاسم، فغيّره فيها أو امسحه.
3. 3«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
4. 4«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
5. 5«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
6. 6«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

اشتراك في نشرتك البريدية: الزائر يكتب إيميله ويدوس الزر، فيوصلك في Shopify كعميل عليه الوسم newsletter. بصورة جنبه أو وراه، أو شريط رفيع من غير صورة.

1. 1«التخطيط» (Layout)
   «بطاقة فوق صورة»: على الجوال البطاقة بتنزل تحت الصورة وراكبة على حافتها. «شريط رفيع»: من غير صورة.
2. 2«تسمية صغيرة أعلى العنوان» (Small label above)
3. 3«العنوان» (Heading)
4. 4«النص» (Text)
5. 5«النص داخل الحقل» (Words in the field)
6. 6«نص الزر» (Button)

1. 1«سطر الموافقة» (Consent line)
   سطر صغير تحت الخانة عن الموافقة. فاضي: سطر بيقول إن الاشتراك موافقة على رسائلك وإن الإلغاء ممكن في أي وقت.
2. 2«الصورة» (Picture)
   الصورة جنب النموذج أو ورا البطاقة. من غيرها صورة مؤقتة.بيظهر لما تختار حاجة غير «شريط رفيع» في «التخطيط»
3. 3«الصورة على الهاتف» (Picture on phones)
   اختيارية: بتحل محل «الصورة» على الهاتف، بنسبة ٤:٣.بيظهر لما تختار حاجة غير «شريط رفيع» في «التخطيط»
4. 4«موضع التركيز في الصورة» (Picture focus)
   اختياري: الجزء اللي يفضل ظاهر بصيغة x% y%، زي 40% 50%. فاضي: «نقطة محورية» (Focal point) الصورة.بيظهر لما تختار حاجة غير «شريط رفيع» في «التخطيط»
5. 5«موضع التركيز على الهاتف» (Picture focus on phones)
   نفس اللي قبله للهاتف. فاضي: نفس موضع الكمبيوتر.بيظهر لما تختار حاجة غير «شريط رفيع» في «التخطيط»
6. 6«جهة الصورة» (Picture side)
   «البداية» ناحية بداية القراءة (اليمين في العربي).بيظهر لما تختار «صورة بجانب النموذج» في «التخطيط»

1. 1«نظام ألوان اللوحة» (Panel color scheme)
   ألوان اللوحة أو البطاقة أو الشريط، من «الألوان». للبطاقة فوق الصورة، نظام القسم نفسه بيديها ألوان الصفحة.
2. 2«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
3. 3«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
4. 4«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
5. 5«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.

مكان لبلوكات التطبيقات اللي نصّبتها (تقييمات، نقاط ولاء، جداول مقاسات) في أي صفحة من غير كود.

لافتات ترويجية جنب بعض، كل واحدة صورة وعنوان ورابط، زي عرض أو مجموعة جديدة. مش في الصفحات الرئيسية الجاهزة؛ ضيفه لأي صفحة.

1. 1«تسمية صغيرة أعلى العنوان» (Small label above)
   سطر صغير فوق العنوان.
2. 2«العنوان» (Heading)
   عنوان القسم، وبيقبل خط غامق ومائل.
3. 3«النص» (Text)
   سطر تحت العنوان.
4. 4«نص الرابط» (Link text)
   كلام رابط في آخر صف العنوان (تحت العنوان على الجوال)، زي عرض الكل؛ محتاج «الرابط» كمان.
5. 5«الرابط» (Link)
   الصفحة اللي الرابط بيفتحها؛ محتاج «نص الرابط».
6. 6«الاسم لقارئات الشاشة» (Name for screen readers)
   اسم القسم لقارئ الشاشة لما يكون من غير «العنوان»؛ مش بيظهر للزائر. فاضي: «عروض مختارة».
7. 7«التخطيط» (Layout)
   «فسيفساء» لافتة كبيرة جنب الباقي، لحد ٥ والزيادة مبتظهرش.

1. 1«مكان النص» (Text place)
   في «فسيفساء» الكلام دايماً فوق الصورة، واللافتة من غير صورة كلامها جواها.
2. 2«شكل الصورة» (Image shape)
   شكل اللافتة في «ثلاث في صف» و«اثنتان في صف»، واللوحات الملونة كمان. «تلقائي» طولي (4:5) للثلاث وعرضي (5:4) للاتنين.
3. 3«ارتفاع الصف» (Row height)
   للفسيفساء: ارتفاع كل صف؛ اللافتة الكبيرة بطول صفين.
4. 4«على الهواتف» (On phones)
   «تلقائي» صف بيتسحب لـ«ثلاث في صف» وتحت بعض للاتنين. الصف اللي بيتسحب بيفضل صف واحد على كل الشاشات، فاللافتات الزيادة بتتسحب. الفسيفساء بتتجاهله.
5. 5«عبارة الدعوة» (Call to action)
   شكل عبارة الدعوة على كل لافتة ليها رابط؛ كلامها من «عبارة الدعوة» في اللافتة.
6. 6«تأثير التمرير» (Hover effect)
   «تكبير هادئ» بيكبّر الصورة ببطء تحت المؤشر أو التركيز. مع «الألوان فقط» في «تأثيرات التمرير» («الحركة») الصورة بتفضل ثابتة.

1. 1«طبقة خلف النص الداكن» (Veil behind dark text)
   طبقة خفيفة بلون الصفحة ورا الكلام الداكن عشان يتقري فوق الصور المزدحمة: للافتات اللي «النص فوق الصورة» فيها «نص داكن»، مع «فوق الصورة».
2. 2«النص على بطاقة فوق الصورة» (Words on a card over the picture)
   العنوان والرابط على بطاقة بيضاء هادية فوق الصورة، في مكان «موضع النص» بتاع كل لافتة («الوسط» في نص الصورة). مع «فوق الصورة».
3. 3«نظام الألوان» (Color scheme)
   ألوان القسم: الخلفية والكلام والروابط والأزرار، من أنظمة الألوان اللي بتظبطها في «الألوان». غيّر النظام عشان القسم يبقى فاتح أو غامق أو بلون التمييز من غير ما تغيّر ألوانه واحد واحد.
4. 4«المسافة حول القسم» (Section spacing)
   المسافة فوق القسم وتحته، ومقاساتها من «إعدادات القالب» (Theme settings) > «التخطيط».
5. 5«خط أعلى القسم» (Line above the section)
   خط رفيع على حافة القسم العليا.
6. 6«خط أسفل القسم» (Line below the section)
   خط رفيع على حافة القسم السفلى.