الهيدر والتنقل

أعلى متجرك هو أول ما يراه كل زائر. في Rawnaq يتكوّن من قسمين: Announcement bar وHeader. وفي أسفل الصفحة يكمل Footer وMobile tab bar العمل. تشرح هذه الصفحة كل واحد منها.

لفتحها، اذهب إلى Online Store > Themes > Customize. أقسام الهيدر في أعلى كل صفحة داخل المحرر، وأقسام الفوتر في أسفلها. وهي نفسها في كل الصفحات.

تخطيطات الهيدر

اختر قسم Header، ثم اختر Layout:

1. Logo center, menu below: الشعار في المنتصف والقائمة في صف تحته. مظهر كلاسيكي لمتاجر الأزياء.
2. Logo start, wide search, menu below: الشعار في البداية، وشريط بحث عريض يملأ المنتصف، والقائمة تحتهما. مناسب للمتاجر ذات المنتجات الكثيرة.
3. Logo start, menu inline: الشعار والقائمة في صف واحد. أكثر الخيارات إحكامًا.
4. Logo center, menu in drawer: يظهر الشعار والأيقونات فقط، وتُفتح القائمة في لوحة جانبية على كل أحجام الشاشات. مناسب للكتالوجات الصغيرة والمظهر البسيط.

إعدادات أخرى في الهيدر:

1. Search style: خيار Bar يعرض حقل بحث، وخيار Icon يعرض عدسة مكبرة تفتح نافذة بحث منبثقة.
2. Sticky header: None أو Always أو On scroll up. خيار On scroll up يخفي الهيدر عندما ينزل المتسوق بالتمرير ويعيده فور أن يصعد بالتمرير، وبذلك تبقى مساحة أكبر من الشاشة فارغة على الموبايل.
3. Full page width: يسمح للهيدر بالامتداد إلى حواف الشاشة.
4. Vertical padding: من 4 إلى 32 px.

القائمة (Menu)

1. Menu: القائمة التي تظهر في الهيدر. اخترها من قوائم Shopify الخاصة بك.
2. Secondary menu: تظهر في أسفل قائمة الموبايل. مكان مناسب لروابط مثل الحساب واتصل بنا وتتبع طلبي.
3. Open dropdowns on: Hover أو Click.

الأيقونات (Icons)

1. Show labels next to icons
2. Cart icon: Bag أو Cart.
3. Show account icon
4. Customer account menu: قائمة الروابط التي تظهر مع زر الحساب عندما يكون العميل مسجلًا دخوله.
5. Show wishlist icon: يظهر فقط إذا كانت قائمة الرغبات مفعّلة من Theme settings > Product cards > Enable wishlist.
6. Show WhatsApp contact: يعرض رابط WhatsApp مع رقم هاتفك في الهيدر. يحتاج إلى رقم في Theme settings > Chat and contact > WhatsApp number.

الألوان (Colors)

1. Color scheme: ألوان الهيدر نفسه.
2. Menus and drawers color scheme: ألوان القوائم المنسدلة والميجا منيو واللوحات الجانبية.
3. Transparent header on home page: يظهر الهيدر فوق أول قسم في الصفحة الرئيسية، مثل عرض شرائح، إلى أن يبدأ المتسوق بالتمرير. استخدم شعارًا فاتحًا في Theme settings > Logo and favicon > Logo for transparent header.
4. Transparent header color scheme: الألوان المستخدمة أثناء كون الهيدر شفافًا.

إعداد الهيدر

1. افتح محرر الثيم واختر قسم Header.
2. اختر Layout وSearch style.
3. حدد Menu وSecondary menu.
4. اختر الأيقونات التي تريد إظهارها.
5. احفظ وعاين على الموبايل وعلى الكمبيوتر.

الميجا منيو (Mega menus)

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

يبني Rawnaq الميجا منيو بطريقتين:

• تلقائيًا، عندما يكون لعنصر المستوى الأول روابط من المستوى الثاني لها هي نفسها روابط من المستوى الثالث. تصبح روابط المستوى الثاني عناوين للأعمدة، وتصبح روابط المستوى الثالث القوائم التي تحتها.
• بإضافة بلوك Mega menu إلى قسم Header، وهذا يتيح لك أيضًا إضافة صور.

إضافة ميجا منيو بالصور

1. من لوحة تحكم Shopify، افتح Content > Menus > Main menu. تأكد أن عنصر المستوى الأول موجود، مثل نساء، وتحته روابط المستوى الثاني مثل ملابس وإكسسوارات، واختياريًا روابط المستوى الثالث مثل فساتين وتريكو.
2. في محرر الثيم، اختر قسم Header ثم اضغط Add block، ثم Mega menu.
3. في Menu item، اكتب عنوان عنصر المستوى الأول تمامًا كما يظهر في القائمة. مثلًا، اكتب نساء. المطابقة تتجاهل اختلاف الحروف الكبيرة والصغيرة والمسافات الزائدة، لكن الكلمات يجب أن تكون نفسها. وإذا أُعيدت تسمية عنصر القائمة لاحقًا، فحدّث هذا الحقل.
4. أضف حتى عرضين ترويجيين. للعرض الأول اضبط Image 1 وHeading 1 وLink 1. وللثاني استخدم Image 2 وHeading 2 وLink 2.
5. كرر ذلك لكل عنصر في المستوى الأول يجب أن تكون له ميجا منيو، بلوك واحد لكل عنصر.
6. احفظ ومرّر المؤشر على عنصر القائمة في المعاينة.

مفيد أن تعرف

• عناصر المستوى الأول التي ليس لها بلوك ولا روابط من المستوى الثالث تحصل على قائمة منسدلة عادية.
• تنتهي كل ميجا منيو برابط "View all" إلى صفحة عنصر المستوى الأول.
• على الموبايل تظهر القائمة نفسها في اللوحة الجانبية كقوائم قابلة للطي ومتداخلة. وتستخدم اللوحة Menus and drawers color scheme.
• استخدم صورًا طولية أو مربعة بنفس الشكل في العرضين الترويجيين ليبدو المنيو منظمًا.
• يجب أن يكون لعنصر القائمة رابط (مثلًا إلى مجموعة) حتى يكون رابط "View all" مفيدًا.

شريط الإعلانات (Announcement bar)

Announcement bar هو الشريط الرفيع فوق الهيدر. استخدمه لعروض الشحن والتخفيضات والإشعارات.

الإعدادات

1. Color scheme
2. Autoplay: يدوّر رسائلك واحدة بعد الأخرى.
3. Change every: من 3 إلى 12 ثانية.
4. Let shoppers close the bar: يضيف زر إغلاق. يبقى الشريط مغلقًا لذلك الزائر إلى أن تغيّر محتواه.
5. Show social links: يستخدم الروابط من Theme settings > Social media.
6. Show country and language selectors
7. Full page width
8. Vertical padding: من 4 إلى 20 px.

يتكوّن الشريط من بلوكات. يمكنك إضافة 8 بلوكات كحد أقصى.

• Message: Text مع Link اختياري وIcon اختياري.
• Countdown: عدّاد تنازلي حتى تاريخ معين. اضبط End date (بصيغة YYYY-MM-DD، حسب المنطقة الزمنية لمتجرك) وEnd time. أضف Text after the timer ends حتى يظل الشريط منطقيًا بعد انتهاء العرض. ويحوّله Link وLink label الاختياريان إلى دعوة لاتخاذ إجراء. يمكنك إضافة حتى بلوكين منه.
• Discount code: يعرض Text الخاص بك وCode يستطيع المتسوقون نسخه بنقرة واحدة.

إضافة رسالة متناوبة

1. اختر قسم Announcement bar.
2. اضغط Add block واختر Message.
3. اكتب Text، وأضف Link إذا أردت، واختر Icon.
4. أضف بلوكًا آخر لكل رسالة إضافية وفعّل Autoplay.

مفيد أن تعرف

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

شريط التبويبات للموبايل (Mobile tab bar)

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

الإعدادات: Color scheme وShow labels.

كل تبويب هو بلوك Tab. يمكنك إضافة حتى 5 تبويبات. لكل تبويب اختر Action:

1. Home
2. Open menu
3. Search
4. Cart
5. Account
6. Wishlist
7. WhatsApp chat
8. Custom link، مع Link

يمكنك أيضًا ضبط Label (اتركه فارغًا لاستخدام الاسم الافتراضي)، واختيار Icon (خيار Automatic يختار الأنسب للإجراء)، وتفعيل Raised center style ليبرز التبويب. استخدم النمط البارز على تبويب واحد فقط، ويفضّل أن يكون الأوسط.

إعداد شريط التبويبات

1. اختر قسم Mobile tab bar في مجموعة الفوتر.
2. احذف التبويبات التي لا تريدها، أو اضغط Add block ثم Tab.
3. اضبط Action لكل تبويب واسحب التبويبات إلى الترتيب الذي تريده.
4. عاين بعرض شاشة الموبايل.

مفيد أن تعرف

• أربعة أو خمسة تبويبات هي الأنسب. الأكثر من ذلك يصعب الضغط عليه.
• تبويب WhatsApp يحتاج إلى رقمك في Theme settings > Chat and contact.
• إذا كان زر الدردشة العائم مفعّلًا أيضًا، فقد يتزاحمان على المساحة. استخدم أحدهما فقط. راجع WhatsApp والدردشة.

اختيار الدولة واللغة

يستطيع Rawnaq عرض محدد الدولة (والعملة) ومحدد اللغة في ثلاثة أماكن: Header وAnnouncement bar وFooter. لكل منها إعداد Show country and language selectors. وللهيدر والفوتر أيضًا Show country selector وShow language selector، فتستطيع إظهار أحدهما دون الآخر.

لا تظهر المحددات إلا إذا كان متجرك يقدم أكثر من دولة أو لغة. أعدّ ذلك من لوحة تحكم Shopify:

1. اللغات: Settings > Languages. أضف لغة وانشرها للأسواق التي يجب أن تراها.
2. الدول والعملات: Settings > Markets. أضف الأسواق التي تبيع لها.

مفيد أن تعرف

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

حسابات العملاء

زر الحساب في الهيدر يستخدم حسابات العملاء من Shopify، فيسجل المتسوقون دخولهم عبر تسجيل الدخول الآمن الخاص بـ Shopify. لا تحتاج إلى بناء أي صفحات له.

1. راجع Settings > Customer accounts في لوحة تحكم Shopify وتأكد أن حسابات العملاء مفعّلة.
2. في قسم Header، أبقِ Show account icon مفعّلًا.
3. اختر Customer account menu. تظهر روابطها مع زر الحساب بمجرد أن يسجل العميل دخوله.

على الموبايل، يمكن أن يعرض Mobile tab bar تبويب Account أيضًا.

الفوتر (Footer)

يتكوّن قسم Footer من بلوكات يمكنك إعادة ترتيبها: Logo and text وMenu (أضف منها ما تشاء) وText وContact وNewsletter وImage والتطبيقات. ويتسع لـ 6 بلوكات كحد أقصى.

إعدادات الشريط السفلي: Show country and language selectors وShow payment icons وShow Follow on Shop وShow policy links وShow "Powered by Shopify".

ملاحظات

• بلوك Contact يعرض العنوان والهاتف وWhatsApp والبريد الإلكتروني التي أدخلتها في Theme settings > Chat and contact. ويمكنك إضافة Opening hours داخل البلوك.
• بلوك Newsletter يضيف المشتركين إلى قائمة عملائك مع قبول التسويق عبر البريد الإلكتروني.
• Show Follow on Shop لا يظهر إلا عندما تكون قناة Shop مثبتة وShop Pay مفعّلًا.
• Show payment icons يعرض وسائل الدفع التي يقبلها متجرك.

مفيد أن تعرف

• تغييرات الهيدر والفوتر تنطبق على كل الصفحات.
• تُعدَّل القوائم من Content > Menus وليس من محرر الثيم. غيّر اسم رابط هناك فيتحدث في كل مكان، ما عدا بلوك Mega menu الذي يطابق بالعنوان ويحتاج إلى نفس التغيير.
• افحص قوائمك على الموبايل وعلى الكمبيوتر. عناوين القوائم الطويلة تلتف إلى سطر جديد وقد تزدحم بها منطقة الهيدر.

نص الشعار وقائمة Editorial

عندما لا تكون هناك صورة شعار، يعرض الهيدر نصًا. غيّره من Logo text (اتركه فارغًا لاستخدام اسم المتجر) واختر Logo text style: خيار Heading font، أو Spaced capitals لعلامة نصية مثل R A W N A Q.

Menu drawer style يحدد شكل القائمة التي تُفتح على الموبايل (وعلى الكمبيوتر في تخطيط اللوحة الجانبية). خيار List هو القائمة الكلاسيكية. وخيار Editorial يعرض الروابط الرئيسية بخط كبير يظهر واحدًا بعد الآخر من الأسفل، مع رابطي صورتين على الأكثر تحتها: اضبط Menu photo 1 وMenu photo 2، لكل منهما تسمية ورابط، مثل نساء ورجال.

فوق افتتاحية بملء الشاشة (Header > Transparent header on home page)، اختر Sticky header: On scroll up: يطفو الهيدر فوق الفيديو، ويختفي تمامًا بينما ينزل المتسوقون بالقراءة، ويعود فور أن يصعدوا بالتمرير.