عندما يضم المتجر عددًا كبيرًا من المنتجات أو التنويعات المختلفة لكل منتج، قد يواجه العميل صعوبة في استعراض الخيارات بسرعة واتخاذ القرار المناسب. وقد واجهت هذه المشكلة فعليًا أثناء عملي على أحد المتاجر، حيث كان التحدي الأساسي هو تحسين تجربة العميل ومساعدته على الوصول إلى خياره المثالي دون تشتت.
من هنا اعتمدت على الفلاتر البصرية (Color Swatches) في شوبيفاي، ولاحظت أنها لا تقتصر على عرض الألوان فحسب، بل تمنح وضوحًا وسهولة في التنقل بين الخيارات، مما يساعد العميل على اتخاذ قراره بثقة وسرعة. في هذا المقال سأشارك تجربتي الكاملة مع الفلاتر البصرية، وكيف ساعدتني على تحسين عرض المنتجات وجعل المتجر أكثر فعالية للعملاء.
كيف استخدمت الفلاتر البصرية (Color Swatches) على شوبيفاي؟
توجد العديد من التطبيقات التي تساعد على إنشاء نظام الفلاتر البصرية في شوبيفاي، لكنني فضّلت الاعتماد على تطبيق Shopify Search & Discovery المدمج ضمن المنصة، وذلك بفضل تكامله السلس مع المنتجات ومختلف قوالب شوبيفاي، بالإضافة إلى مرونة تخصيص خيارات العرض والمظهر على المتجر.
1- إنشاء متغيرات مخصصة (Metaobject) على شوبيفاي
في هذه الخطوة نبدأ بإنشاء متغيرات Metaobject التي سوف تضم تفاصيل أو خصائص المنتجات الإضافية، والتي ستكون الأساس لعرض الألوان أو أي خيارات أخرى مرتبطة بالمنتجات.
لذلك، نتوجه إلى تبويب Content >> Metaobjects، ثم نضغط على زر Add Definition كما هو موضح في الصورة التالية:
بعدها نكتب اسم المجموعة في تبويب Name، على سبيل المثال: Swatches.
بعد ذلك نحدد الحقول المطلوب إضافتها للمتغيرات، مثلًا: حقل للاسم (يُكتب بداخله اسم اللون)، وحقل آخر للّون (يُعرض بصريًا داخل المتجر).
نبدأ بإضافة حقل الاسم عبر الضغط على زر Add Field، ثم نختار نوع الحقل Single Line Text كما هو موضح في الصورة التالية:
بعدها نحدد اسم الحقل في تبويب Name، ثم نضيف وصفًا مختصرًا له في تبويب Description. ويمكنك كذلك ضبط بعض الإعدادات الإضافية مثل: جعل الحقل إلزاميًا، عدد المدخلات، نوعها، والحد الأقصى للأحرف. ثم نضغط على زر Add لإضافة الحقل إلى المجموعة.
بعد ذلك، نضيف حقل الألوان عبر الضغط مرة أخرى على Add Field، ثم نختار Color كما هو موضح في الصورة التالية:
نكتب اسم الحقل والوصف كما فعلنا في حقل الاسم، ثم نضغط على زر Add لإضافته إلى المتغيرات.
وأخيرًا، بعد الانتهاء من إضافة جميع الحقول المطلوبة، نضغط على زر Save لحفظ متغيرات Metaobject على المتجر.
2- تعيين الحقول المخصصة (Metafields) للمنتجات
بعد أن أنشأنا متغيرات Metaobject في الخطوة السابقة، نحتاج الآن إلى ربطها بالمنتجات من خلال Metafields، حتى نستطيع تخصيص هذه المتغيرات مباشرة من داخل صفحة المنتج.
لذلك نتوجه إلى تبويب Metafields and Metaobjects من قائمة إعدادات شوبيفاي، ثم نختار Variants كما هو موضح في الصورة التالية:
بعدها نضغط على زر Add Definition لإضافة مجموعة المتغيرات الخاصة بالمنتجات.
نكتب اسمًا مميزًا ووصفًا للمجموعة، مثل: Color Swatch كما هو موضح في الصورة التالية:
بعد ذلك نحدد نوع البيانات عبر الضغط على زر Select Type، ثم نختار Metaobjects من القائمة.
بعدها من تبويب Reference نحدد مجموعة الـ Metaobject التي أنشأناها في الخطوة السابقة (Swatches). وأخيرًا نضغط على زر Save لحفظ الإعدادات على المتجر.
3- تعيين متغيرات الألوان للمنتجات
الآن أصبح الفلتر البصري (Color Swatches) جاهزًا على المتجر، ونحتاج إلى تعيين درجة اللون المناسبة لكل منتج. لذلك نتوجه إلى إعدادات المنتج داخل لوحة التحكم، حيث ستلاحظ ظهور متغير Color Swatch ضمن قسم Variant Metafields كما هو موضح في الصورة التالية:
لإضافة اللون المناسب، نضغط على زر Select Entry ثم نختار Add New Entry لإضافة لون جديد للفلتر.
على سبيل المثال: لإضافة اللون الأحمر نكتب اسم اللون، ونحدد درجته بدقة من خلال أداة اختيار الألوان. بعدها نختار حالة المنتج Active ونضغط على زر Save لتفعيل اللون داخل الفلتر.
الآن نعين اللون المناسب للمنتج من خلال الفلتر، ثم نضغط على زر Save مرة أخرى لحفظ إعدادات المنتج.
نكرر الخطوات نفسها مع باقي المنتجات تدريجيًا، بحيث نحدد لكل منتج درجته اللونية المناسبة. وستلاحظ أن الألوان التي تمت إضافتها تظهر تلقائيًا في قائمة الفلتر حتى تختار بينهم بسهولة كما هو موضح في الصورة التالية:
4- إنشاء الفلتر البصري داخل تطبيق Shopify Search & Discovery
الخطوة الأخيرة هي عرض الفلتر البصري ضمن قائمة الفلاتر في صفحة المنتجات. وهنا اعتمدت على تطبيق Shopify Search & Discovery المدمج مع شوبيفاي لتخصيص محتويات شريط الفلترة.
بدأت أولًا بتثبيت التطبيق من متجر تطبيقات شوبيفاي عبر الضغط على زر Install كما هو واضح في الصورة التالية:
بعد ذلك، طلب التطبيق بعض الصلاحيات الخاصة بالمنتجات على المتجر، فقمت بمراجعتها جيدًا، ثم ضغطت على زر Install لاستكمال عملية التثبيت.
بعد التثبيت، توجهت إلى إعدادات الفلترة عبر المسار: Search & Discovery >> Filters. ستجد قائمة الفلاتر الحالية على صفحة المنتجات، لذلك ضغطت على Add Filter لإضافة فلتر جديد.
بعد ذلك ضغطت على زر Select Source لتحديد مصدر الفلتر كما هو واضح في الصورة التالية:
بعدها بحثت عن الـ Metafield الذي أنشأناه سابقًا وربطناه بالمنتجات (Color Swatch) لإضافة لقائمة الفلتر.
بعد ذلك ظهرت جميع المتغيرات (الألوان) المضافة، فقمت بتحديد العناصر المناسبة التي أرغب بعرضها، ثم ضغطت على Save لحفظ إعدادات الفلترة الجديدة.
الآن، وبمجرد زيارة صفحة المنتجات على المتجر، ستجد فلتر Color Swatch مدمجًا داخل القائمة الجانبية للفلاتر، ويعرض الألوان التي تمت إضافتها وبوضوح كما هو واضح في الصورة التالية:
بهذا الشكل استطعت استخدام ودمج الفلاتر البصرية (Color Swatches) في متجرنا على شوبيفاي، مما جعل العميل يصل بسهولة إلى المنتجات بالألوان التي يحتاجها، ويقارن بفاعلية بين الخيارات المتاحة دون أي تشتت. هذه الخطوة البسيطة عززت تجربة المستخدم بشكل واضح، وأعطت المتجر مظهرًا احترافيًا يعكس اهتمامًا بالتفاصيل.