في عالم التجارة الإلكترونية، تُعد تقييمات العملاء بمثابة شهادات ثقة لا تُقدر بثمن، إنها ليست مجرد أرقام أو نجوم، بل هي انعكاس حقيقي لتجربة العميل مع منتجك أو خدمتك، بالنسبة لأصحاب المتاجر الإلكترونية، وخاصةً الذين يعتمدون على منصة يوكـان (YouCan)، فإن عرض هذه التقييمات بشكل فعال وجذاب يُعد جزءًا أساسيًا من استراتيجية زيادة المبيعات وبناء المصداقية، ولكن قد يواجه البعض تحديًا، خصوصًا على شاشات الهواتف الصغيرة، حيث تظهر التقييمات بشكل رأسي وتستهلك مساحة كبيرة من الشاشة، مما قد يؤثر على تجربة المستخدم.
فهرس المحتوى
تخيل أن زائرًا يتصفح متجرك من هاتفه المحمول، ويريد أن يرى تقييمات المنتج الذي يفكر في شرائه، إذا كانت التقييمات تظهر بشكل متتابع وطويل، فقد يمل بسرعة ويغادر المتجر، الحل الأمثل هو عرض تقييمين أو أكثر في سطر واحد، مما يوفر مساحة، ويعطي انطباعًا بصريًا أفضل، ويُشجع الزائر على التفاعل بشكل أسرع مع المحتوى، في هذا المقال الشامل، سنتعرف خطوة بخطوة على كيفية تحقيق هذا التعديل البسيط والفعال باستخدام كود CSS بسيط، وسنغوص في الأسباب التي تجعل هذا التغيير مهمًا جدًا لمتجرك على يوكـان، وكيف يمكن أن يؤثر إيجابًا على أداء موقعك.
أولا: لماذا يُعد عرض التقييمات في سطر واحد أمرًا ضروريًا لمتجرك؟
قد يرى البعض أن هذا التغيير مجرد تعديل جمالي بسيط، لكنه في الحقيقة يحمل أبعادًا استراتيجية مهمة جدًا، دعنا نلقي نظرة على أبرز الفوائد التي ستحصل عليها عند تطبيق هذا التعديل على متجرك في يوكـان:
1- تحسين تجربة المستخدم (UX) على الهواتف المحمولة
تُعتبر تجربة المستخدم (UX) حجر الزاوية في أي متجر إلكتروني ناجح، عندما يكون المتجر سهل التصفح، ويُقدم المعلومات بطريقة منظمة وجذابة، فإن العميل يكون أكثر استعدادًا للبقاء فيه والتفاعل معه، عرض التقييمات في سطر واحد يقلل من حجم التمرير (Scrolling) الطويل الذي يضطر العميل للقيام به، مما يجعل الصفحة تبدو أكثر ترتيبًا ونظافة، هذه السهولة في التصفح تُقلل من احتمالية شعور العميل بالإحباط، وتُزيد من فرص استكشافه للمزيد من المنتجات، وهذا ينعكس إيجابًا على معدلات التحويل.
2- زيادة معدلات التحويل (Conversion Rate)
عندما يكون الوصول إلى المعلومات المهمة، مثل تقييمات العملاء، أسهل وأسرع، فإن ذلك يُشجع العميل على اتخاذ قرار الشراء بشكل أسرع، التقييمات الإيجابية التي تظهر بوضوح في أول الصفحة تُعطي انطباعًا أوليًا ممتازًا عن جودة المنتج أو الخدمة، عندما تُعرض هذه التقييمات بشكل جذاب، فإنها تُعزز الثقة في العلامة التجارية، وتُقلل من حالة التردد لدى العميل، وهذا التأثير النفسي القوي يُترجم مباشرة إلى زيادة في عدد المبيعات.
3- مظهر أكثر احترافية وجمالية
المتاجر الاحترافية تُولي اهتمامًا كبيرًا للتفاصيل البصرية، عرض التقييمات بشكل متناسق ومنظم يُعطي انطباعًا بأن متجرك مُصمم بعناية واحترافية، هذا المظهر الجذاب يُعزز من هوية علامتك التجارية، ويُفصلك عن المتاجر العشوائية التي لا تُراعي أدق التفاصيل في التصميم، الجماليات البصرية لها تأثير مباشر على تصور العميل لجودة المنتجات والخدمات التي تقدمها.
4- الاستفادة القصوى من مساحة الشاشة
في شاشات الهواتف الصغيرة، كل بكسل له أهميته، عرض التقييمات بشكل رأسي يستهلك مساحة ثمينة يمكن استغلالها لعرض معلومات أخرى مهمة، مثل زر الشراء (Call to Action) أو تفاصيل المنتج، من خلال وضع تقييمين في سطر واحد، فإنك تُوفر مساحة كبيرة وتُتيح للعميل رؤية المزيد من المحتوى المهم في الجزء الأول من الشاشة (Above the fold)، وهذا يُحسن من تفاعله مع المتجر بشكل عام.
ثانيا: كيفية تطبيق التعديل خطوة بخطوة
الآن، وبعد أن عرفنا الأسباب التي تجعل هذا التغيير مهمًا، حان الوقت لتطبيق الكود الذي سيُحدث الفرق، عملية التطبيق بسيطة جدًا ولا تتطلب أي خبرة برمجية عميقة، كل ما عليك فعله هو اتباع الخطوات التالية بدقة:
1- الخطوة الأولى: الوصول إلى إعدادات الكود المخصص (Custom Code)
- قم بتسجيل الدخول إلى لوحة تحكم متجرك في منصة يوكـان.
- من القائمة الجانبية، اذهب إلى الإعدادات.
- ثم، اختر أونلاين (القالب القديم).
- ابحث عن خيار CSS/JavaScript configs واضغط عليه.
2- الخطوة الثانية: إضافة الكود إلى ملف CSS
قم بنسخ الكود أسفل ولصقه في مكان رمز العنوان الإضافي، وبعد ذلك اضغط على زر حفظ الموجود في الآسفل:
<style>
@media (max-width: 425px) {
.reviews-body .reviews-grid {
-moz-column-count: 1;
column-count: 2;
}
}
@media (max-width: 425px) {
.reviews-body .review-thumbnail {
min-height: 100%;
}
}
[dir] .app-heading .heading-description {
margin: 5px 0 0;
display: none;
}
@media (max-width: 425px) {
[dir] .reviews-body .add-reviews h3 {
margin: 0 0 10px;
display: none;
}
}
</style>الكود بسيط للغاية، ولكن فهمه يُمكنك من تخصيصه بشكل أكبر إذا أردت، دعنا نحلل كل جزء:
@media (max-width: 425px): هذا الجزء هو ما يُعرف بـ “استعلامات الوسائط (Media Queries)”، وهو يُخبر المتصفح بأن الكود الذي بين القوسين{}يجب أن يُطبق فقط عندما يكون عرض الشاشة 425 بكسل أو أقل،. هذا هو العرض النموذجي لمعظم شاشات الهواتف المحمولة، هذا يضمن أن التغيير لن يؤثر على مظهر المتجر على أجهزة الكمبيوتر أو الأجهزة اللوحية..reviews-body .reviews-grid: هذا هو المحدد (Selector) الذي يُشير إلى العنصر الذي نريد تعديله في صفحة المنتج، هو يحدد “الشبكة” التي تحتوي على تقييمات العملاء.column-count: 2;: هذا هو الجزء الأهم، هو يُخبر المتصفح بأن يقسم محتوى هذا العنصر إلى عمودين، بفضل هذه الخاصية، ستظهر تقييمات العملاء في عمودين بدلًا من عمود واحد، مما يؤدي إلى ظهور تقييمين في نفس السطر.-moz-column-count: 1;: هذا جزء خاص بالمتصفح فايرفوكس، وهو يُستخدم لضمان التوافق مع هذا المتصفح، وجوده مهم لضمان أن التعديل يعمل بشكل صحيح على كل المتصفحات الرئيسية..reviews-body .review-thumbnail: هذا “المُحدد” يستهدف الصورة المصغرة أو الرمز (Avatar) الخاص بالعميل داخل قسم التقييمات.min-height: 100%;: هذه الخاصية تُحدد الحد الأدنى لارتفاع الصورة، القيمة100%تجعل ارتفاع الصورة المصغرة مساوياً لارتفاع التقييم الذي يحتويها. هذا يُستخدم لمنع التقييمات من الظهور بارتفاعات مختلفة، مما يضمن أن جميع العناصر تظل بنفس الحجم في السطر الواحد، حتى لو كان أحد التقييمات يحتوي على نص أقصر من الآخر، مما يعطي مظهرًا أكثر تنسيقًا واحترافية.
إذا أردت أن تُظهر 3 تقييمات في السطر، يمكنك ببساطة تغيير القيمة من 2 إلى 3، ولكن من الأفضل أن تلتزم بالقيمة 2 لأنها الأكثر ملاءمة لمعظم شاشات الهواتف الصغيرة، كما أن ظهور 3 تقييمات قد يجعل الخط صغيرًا جدًا وغير مقروء.
نصائح إضافية لتحسين صفحة تقييمات العملاء في متجر يوكـان
تطبيق الكود هو خطوة رائعة، ولكن يمكنك دائمًا الذهاب إلى أبعد من ذلك لتحسين مظهر وأداء صفحة التقييمات في متجرك، إليك بعض النصائح الإضافية:
- شجع العملاء على ترك التقييمات: لا تكتفِ بعرض التقييمات الموجودة، بل ابذل جهدًا للحصول على المزيد، يمكنك إرسال رسائل بريد إلكتروني تلقائية بعد كل عملية شراء لتشجيع العميل على تقييم المنتج.
- الرد على التقييمات: سواء كانت إيجابية أو سلبية، الرد على تقييمات العملاء يُظهر أنك تهتم بآرائهم، الرد على التقييمات السلبية باحترافية يُمكن أن يُحول التجربة السلبية إلى إيجابية، ويزيد من مصداقية متجرك.
- عرض التقييمات الأفضل أولًا: إذا كان متجرك يحتوي على نظام لترتيب التقييمات، حاول أن تظهر التقييمات التي تحتوي على صور أو تعليقات مفصلة أولًا، فهي أكثر تأثيرًا.
- استخدم صورًا وفيديوهات من العملاء: لا شيء يُعزز الثقة أكثر من صور وفيديوهات حقيقية للمنتج من استخدام العملاء الفعليين، شجع عملاءك على مشاركة صورهم واعرضها بجانب التقييمات.
- لا تُخفِ التقييمات السلبية: إخفاء التقييمات السلبية يُفقدك المصداقية، وجود بعض التقييمات السلبية يُظهر أن التقييمات حقيقية، ويُعطي انطباعًا أكثر واقعية، المهم هو كيفية تعاملك معها.
إقرا أيضا: طريقة إنشاء متجر إلكتروني في يوكان Youcan Shop خطوة بخطوة
باختصار، عرض تقييمين للعملاء في سطر واحد على الهاتف في متجر يوكـان ليس مجرد تعديل تقني، بل هو استثمار في تجربة المستخدم ومظهر المتجر، مما ينعكس إيجابًا على أدائه بشكل عام.
من خلال تطبيق الكود البسيط الذي تعلمناه في هذا المقال، ستُحدث فرقًا كبيرًا في كيفية تفاعل العملاء مع متجرك، وستُعزز من فرصك في تحقيق المزيد من المبيعات والنمو المستدام.
