صفحة المنتج

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

لتعديلها، افتح Online Store > Themes > Customize، ثم اختر Products > Default product من قائمة اختيار الصفحة. اختر أي منتج لمعاينة الصفحة به. يسمى القسم الموجود في اللوحة الجانبية Product information، وتُدرج البلوكات تحته. اسحب البلوكات لإعادة ترتيبها، واضغط على بلوك لتعديله، واستخدم Add block لإضافة المزيد. البلوكات المعلّمة بأنها محدودة يمكن إضافتها مرة واحدة فقط.

إعدادات صفحة المنتج

اختر Product information لتغيير الصفحة كلها:

1. Color scheme
2. Show breadcrumbs: مسار التنقل الرئيسية > المجموعة > المنتج.
3. Show previous and next product links: تظهر عندما يصل المتسوق من مجموعة.
4. Keep product info in view while scrolling: على الكمبيوتر، يبقى عمود المعلومات ظاهرًا أثناء تمرير الصور.
5. Show sticky add to cart bar: يظهر شريط رفيع فيه السعر وزر الإضافة إلى السلة بعد أن يتجاوز المتسوق زر الشراء الرئيسي بالتمرير.
6. Update the URL when a variant is selected: يُبقي المقاس أو اللون المختار في شريط العنوان ليمكن مشاركة الرابط.
7. Top padding وBottom padding.

تخطيطات معرض الصور

تحت Media في Product information:

1. Gallery layout:
   • Two column grid: الصور في عمودين، وهو المظهر الأقرب إلى المجلات.
   • Stacked: صورة كبيرة فوق الصورة التي تليها.
   • Thumbnails below: صورة كبيرة والصور المصغرة تحتها.
   • Thumbnails beside: صورة كبيرة والصور المصغرة على الجانب.
   • Carousel: تتصفح الصور بالسحب صورة صورة.
2. Media width on desktop: من 40 إلى 70 في المئة من الصفحة.
3. Gallery position: Start أو End.
4. Media shape: Natural أو Square أو Portrait.
5. Zoom: Open full screen أو Magnify on hover أو No zoom.
6. Group images by variant: انظر أدناه.
7. Loop and mute videos

يدعم المعرض الصور والفيديوهات المستضافة على Shopify وفيديوهات YouTube وVimeo والنماذج ثلاثية الأبعاد. النموذج ثلاثي الأبعاد المزود بالواقع المعزز يمنح المتسوقين خيار رؤية المنتج في مساحتهم الخاصة على الهواتف المدعومة.

تجميع الصور حسب اللون

عندما يأتي المنتج بألوان، يتوقع المتسوقون أن يروا صور اللون الذي اختاروه فقط. ويستطيع Rawnaq فعل ذلك.

1. في لوحة تحكم Shopify، افتح المنتج وارفع كل الصور. رتّب الصور بحيث تكون صور كل لون معًا: كل صور الأسود، ثم كل صور الرملي، وهكذا.
2. عيّن صورة متغير لكل لون. افتح كل متغير (أو مجموعة متغيرات اللون) واختر أول صورة لذلك اللون كصورته.
3. في محرر الثيم، اختر Product information وفعّل Group images by variant.
4. عاين الصفحة. اختيار لون سيعرض الآن صور ذلك اللون فقط.

مفيد أن تعرف

• أول صورة للون هي التي عيّنتها كصورة المتغير. والصور التي تليها، حتى صورة متغير اللون التالي، تنتمي إلى ذلك اللون.
• إذا لم تكن لمنتجاتك صورة مختلفة لكل لون، فأبقِ Group images by variant متوقفًا. لا يعمل إلا عندما يوجد أكثر من صورة متغير واحدة.
• اكتب نصًا بديلًا (alt text) لكل صورة. راجع الأداء وإمكانية الوصول.

بلوكات المنتج

بلوكات Text وVendor وTitle

• Text: سطر نص، مع Style بقيمة Body أو Subtitle أو Small caps.
• Vendor: اسم العلامة التجارية. يُضاف مرة واحدة.
• Title: اسم المنتج، مع Size بقيمة Small أو Medium أو Large، وShow badges لإظهار شارات التخفيض أو الجديد بجانبه.

السعر (Price)

يعرض Price السعر، والسعر قبل الخصم (compare at price) عند وجود تخفيض، وسعر الوحدة عندما تحدد واحدًا. الخيارات: Show saving وShow tax and shipping note وShow installments message الذي يعرض رسالة Shop Pay Installments عندما تكون متاحة لك.

التقييم (Rating)

يعرض Rating النجوم من تطبيق تقييمات يملأ حقول metafields القياسية لتقييم المنتج في Shopify. وأغلب تطبيقات التقييمات الكبرى تفعل ذلك. وبدون هذا التطبيق لا يظهر شيء. الضغط على النجوم ينقل الصفحة إلى قسم فيها. اضبط Reviews section ID to scroll to ليطابق Anchor ID الخاص بقسم تقييمات التطبيق (قسم Apps) الموجود أسفل الصفحة. وبشكل افتراضي ينتقل بلوك التقييم إلى معرّف اسمه reviews.

رمز المنتج (SKU)

يعرض رمز SKU، ومعه الباركود عند تفعيل Show barcode.

المخزون (Inventory)

يعرض الكمية المتبقية من المخزون. الخيارات: Low stock message at (من 0 إلى 50) وShow the number left وShow low stock bar. اضبط الحد على 0 لإخفاء الرسالة.

محدد المتغيرات (Variant picker)

يعرض الخيارات (المقاس واللون وغيرها). الإعدادات:

1. Style: Buttons أو Dropdown.
2. Swatch shape: Circle أو Square أو None. تستخدم العينات الألوان والصور المضبوطة في قيم خيارات المنتج لديك.
3. تحت Size guide: Size guide page وSize option names.

يضع المحدد علامة على التركيبات النافدة ويحدّث السعر والصور والرابط أثناء اختيار المتسوق. وهو مبني للمنتجات ذات المتغيرات الكثيرة (حتى 2048) ويدعم القوائم المدمجة (combined listings).

عينات الألوان

يستخدم Rawnaq عينات الألوان المدمجة في Shopify، فلا يوجد شيء إضافي لتثبيته.

1. في لوحة تحكم Shopify، افتح المنتج واختر خيار Color.
2. لكل قيمة لون، اختر عينة: لونًا أو صورة (مفيدة للنقوش والأقمشة).
3. احفظ. تظهر العينات في صفحة المنتج وعلى بطاقات المنتجات وفي فلاتر الألوان.

إذا لم تجد خيار العينة، فحدد فئة المنتج أولًا. يوفر Shopify العينات للخيارات المرتبطة بسمات الفئة مثل اللون. استخدم أسماء الألوان نفسها في كل المنتجات لتبقى الفلاتر مرتبة.

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

1. أنشئ صفحة بقياساتك: Online Store > Pages > Add page. الجدول يناسب هذا جيدًا. سمِّها دليل المقاسات.
2. في بلوك Variant picker، اضبط Size guide page على تلك الصفحة.
3. اترك Size option names فارغًا لاستخدام أسماء المقاسات الشائعة بلغات كثيرة (مثل Size وTaille والمقاس)، أو اكتب أسماء الخيارات الخاصة بك مفصولة بفواصل.
4. يظهر الآن رابط دليل المقاسات بجانب خيار المقاس ويفتح الصفحة في نافذة منبثقة.

يمكنك أيضًا إضافة بلوك Popup link في أي مكان من صفحة المنتج. فيه Link label وPopup page وIcon. استخدمه لمعلومات الشحن أو تعليمات العناية أو أي صفحة.

محدد الكمية وأزرار الشراء (Quantity selector and Buy buttons)

يعرض Quantity selector حقل الكمية. وإذا كان متجرك يستخدم قواعد الكمية أو تسعير الكميات من Shopify، فإن المحدد يتبعها.

يضم Buy buttons زر الإضافة إلى السلة والإضافات:

1. Show dynamic checkout buttons: Shop Pay وApple Pay وغيرهما من الوسائل المتاحة للمتسوق.
2. Show gift card recipient form: لمنتجات بطاقات الهدايا، تتيح للمشتري إرسال البطاقة إلى شخص آخر مع رسالة وتاريخ إرسال.
3. Show WhatsApp order button: يفتح WhatsApp مع اسم المنتج ورابطه. ويستخدم الرقم الموجود في Theme settings > Chat and contact > WhatsApp number.
4. Show back in stock request: تعرض المتغيرات النافدة نموذج بريد إلكتروني. تصلك الطلبات كرسائل من نموذج التواصل عليها الوسم back-in-stock.
5. Show pickup availability: انظر أدناه.

عندما لا يكون للمنتج مخزون لكنك تسمح ببيعه على أي حال، يصبح نص الزر Pre-order وتظهر ملاحظة قصيرة تقول إن المنتج يُشحن عندما يتوفر في المخزون من جديد. يحدث هذا تلقائيًا.

الاشتراكات (Subscriptions)

عند تثبيت تطبيق اشتراكات ينشئ خطط بيع (selling plans)، يرى المتسوقون خيارًا بين الشراء مرة واحدة والاشتراك، مع تفاصيل الخطة، فوق زر الإضافة إلى السلة مباشرة. وتنتقل خطة البيع إلى السلة والطلب. وتدير الخطط من تطبيق الاشتراكات.

بطاقات الهدايا (Gift cards)

1. في لوحة تحكم Shopify، أضف منتج بطاقة هدايا (Products > Gift cards، أو منتجًا من نوع بطاقة الهدايا).
2. أبقِ Show gift card recipient form مفعّلًا في بلوك Buy buttons.
3. يستلم العملاء صفحة بطاقة هدايا فيها رمز QR، ورابط Add to Apple Wallet حيثما كان مدعومًا. راجع المدونة والصفحات.

عودة المنتج للمخزون (Back in stock)

عندما يكون المتغير نافدًا، يعرض بلوك Buy buttons نموذج بريد إلكتروني. تصلك الطلبات كرسائل من نموذج التواصل عليها الوسم back-in-stock. راجع بريد متجرك وقائمة Customers، واكتب للمتسوق عندما يعود المنتج. وإذا كنت تفضل تطبيقًا يتولى ذلك تلقائيًا، فثبّت واحدًا وأوقف هذا الإعداد.

توفر الاستلام من الفرع (Pickup availability)

يعرض ما إذا كان يمكن استلام المنتج من مواقعك. ويحتاج إلى تفعيل الاستلام المحلي لموقع في Settings > Shipping and delivery > Local pickup. بدون مواقع استلام لا يظهر شيء. شغّل Show pickup availability أو أوقفه في بلوك Buy buttons.

الوصف والتبويبات (Description and tabs)

• Description: وصف المنتج. فعّل Show as a collapsible tab لطيّه، وOpen by default ليبدأ مفتوحًا.
• Collapsible tab: تبويب تكتبه بنفسك، مثل الشحن والاسترجاع. اضبط Heading وIcon، وأضف المحتوى بـText، أو املأه من صفحة باستخدام Page content، أو استخدم Custom Liquid. Open by default اختياري. أضف منها ما تحتاجه.

الأيقونات والتوصيل والاستعجال (Icons, delivery and urgency)

• Icons with text: حتى أربعة وعود قصيرة مع أيقونات (مثل شحن مجاني، واسترجاع خلال 30 يومًا، ودفع آمن). اختر Row أو List في Layout.
• Delivery estimate: يعرض فترة التوصيل المتوقعة. اضبط Earliest delivery, in days وLatest delivery, in days، وCutoff note اختياريًا مثل "اطلب قبل الساعة 2 ظهرًا". وهو تقدير تَعِد به أنت بنفسك. ولا يقرأ أسعار شركة الشحن لديك.
• Countdown: عدّاد لعرض معين. اضبط End date وEnd time، واستخدم Product tag لإظهاره فقط على المنتجات التي تحمل ذلك الوسم.
• Share: زر مشاركة مع Link label.

المنتجات المكمّلة (Complementary products)

يعرض منتجات تناسب هذا المنتج، مثل "أكمل الإطلالة". اخترها في تطبيق Search & Discovery المجاني من Shopify، تحت Recommendations. اضبط Heading وProducts to show (من 1 إلى 6).

الحقول المخصصة (Custom fields)

يجمع بلوك Custom field معلومة شخصية من المتسوق، مثل رسالة هدية أو نقش. تُحفظ الإجابة مع المنتج في السلة وفي طلبك.

1. أضف بلوك Custom field.
2. اضبط Field label (مثل النقش).
3. اختر Field type: Single line text أو Multi line text أو Dropdown أو Checkbox أو Date.
4. للقائمة المنسدلة (dropdown)، اكتب الخيارات في Dropdown choices مفصولة بفواصل.
5. اختياري: Placeholder وHelp text وCharacter limit (القيمة 0 تعني بلا حد) وRequired.
6. أضف بلوكًا واحدًا لكل حقل.

المواصفات من حقول metafields

يعرض بلوك Specifications جدولًا مرتبًا من التسميات والقيم، مثل الخامة والقصّة والعناية والمنشأ. يمكن أن يعرض كل منتج قيمه الخاصة بربطها بحقول metafields الخاصة بالمنتج.

1. في لوحة تحكم Shopify اذهب إلى Settings > Custom data > Products وأضف metafield definition لكل تفصيلة، مثل الخامة (single line text).
2. املأ القيم في كل منتج، في منطقة Metafields أسفل صفحة المنتج.
3. في محرر الثيم، أضف بلوك Specifications. اضبط Heading والتسميات (من Label 1 إلى Label 8).
4. لكل حقل قيمة (من Value 1 إلى Value 8)، اضغط على أيقونة المصدر الديناميكي الصغيرة واختر الـ metafield المطابق.
5. تُخفى الصفوف الفارغة في المنتجات التي ليس لها قيمة. ويمكنك إضافة البلوك مرتين، مثل التفاصيل والعناية.

بلوكات Custom Liquid وDivider والتطبيقات

• Custom Liquid: للمتقدمين. الصق مقتطفات كود التطبيقات أو أي كود.
• Divider: خط رفيع بين البلوكات.
• يمكن إضافة التطبيقات التي توفر بلوكات تطبيقات من تحت Add block.

المعاينة السريعة

تفتح المعاينة السريعة المنتج في نافذة منبثقة من أي بطاقة منتج، ليختار المتسوقون المقاس ويضيفوا إلى السلة دون مغادرة الصفحة. فعّلها من Theme settings > Product cards > Enable quick view. ولتعديل النافذة، اختر قالب Quick view من قائمة اختيار الصفحة وغيّر Media shape أو Show dynamic checkout buttons. وتظهر أيقونة المعاينة السريعة على الشاشات الكبيرة.

التقييمات والتوصيات والمنتجات التي شوهدت مؤخرًا

تحت المنتج، يعرض القالب Product recommendations وRecently viewed. عدّل عنوانهما وتخطيطهما وعدد المنتجات فيهما مثل أي قسم. ولإضافة أداة تقييمات من تطبيق، أضف قسم Apps في صفحة المنتج وأعطه Anchor ID يطابق بلوك التقييم.

مفيد أن تعرف

• ابدأ بترتيب بسيط للبلوكات: Vendor وTitle وRating وPrice وVariant picker وQuantity selector وBuy buttons وIcons with text وDescription وCollapsible tabs. أضف الباقي فقط إذا احتجت إليه.
• استخدم من أربع إلى ثماني صور لكل منتج، وضع صورة تُظهر المنتج وهو يُلبس أو يُستخدم.
• ضع إجابات الشحن والاسترجاع في صفحة المنتج. فهذا يرفع الثقة لحظة الشراء.
• التغييرات على هذا القالب تنطبق على كل المنتجات. ولإعطاء بعض المنتجات تخطيطًا مختلفًا، أنشئ قالب منتج آخر (من قائمة اختيار الصفحة، Create template) وعيّنه لتلك المنتجات.