لم يعد يكفي أن تمتلك متجرًا إلكترونيًا فقط، المنافسة شرسة والعميل يبحث دائمًا عن تجربة تسوق سهلة وسلسة وممتعة، وإذا كان متجرك لا يوفر هذه التجربة، فستخسر الكثير من العملاء لصالح منافسيك، أحد أهم التحديات التي يواجهها أصحاب المتاجر الإلكترونية اليوم هو تحسين واجهة المتجر على الهواتف المحمولة، فغالبية المتسوقين يستخدمون هواتفهم الذكية لإجراء عمليات الشراء.
فهرس المحتوى
تخيل معي هذا السيناريو: يتصفح عميل محتمل متجرك على هاتفه، يرى منتجًا واحدًا فقط في كل سطر، يضطر إلى التمرير باستمرار للأسفل لرؤية المزيد من المنتجات، هذه التجربة المملة قد تسبب له الإحباط وتجعله يغادر متجرك قبل أن يكتشف ما لديك من كنوز.
لكن ماذا لو كان بإمكانك أن تعرض منتجين في سطر واحد؟ هذا التغيير البسيط يمكن أن يحدث فرقًا كبيرًا في تجربة المستخدم، إنه يقلل من عدد التمريرات، ويعرض المزيد من المنتجات في نفس مساحة الشاشة، ويمنح العميل إحساسًا أكبر بالتحكم وسهولة الاستكشاف، إنه ببساطة يجعل عملية التصفح أسرع وأكثر كفاءة، مما يزيد من احتمالية بقاء العميل في متجرك لفترة أطول واكتشاف المزيد من المنتجات، وبالتالي زيادة المبيعات.
هذا المقال الحصري سيأخذك في رحلة مفصلة خطوة بخطوة، لن نتوقف عند مجرد شرح كيفية تطبيق هذا التعديل البسيط، بل سنتعمق في الأسباب التي تجعل هذا التغيير ضروريًا، وكيف يؤثر على تجربة المستخدم، وكيف يمكن أن يزيد من أرباحك بشكل لم تتوقعه، سنتناول كل الجوانب، من أهمية التعديل، إلى كيفية تطبيقه باستخدام الكود المرفق، وصولًا إلى نصائح احترافية لتحقيق أقصى استفادة منه.
لماذا يعتبر عرض منتجين في سطر واحد ضرورة ملحة لمتجرك على يوكان؟
ربما تتساءل الآن: هل يستحق الأمر كل هذا العناء؟ ألا يكفي أن أعرض المنتجات بالطريقة الافتراضية؟ الجواب القاطع هو لا، في عالم التجارة الإلكترونية، كل تفصيل صغير له تأثير كبير، إليك الأسباب التي تجعل هذا التعديل ليس مجرد خيار، بل ضرورة:
- تحسين تجربة المستخدم (UX): كما ذكرنا سابقًا، التصفح على الهاتف بوجود منتج واحد في كل سطر يصبح مرهقًا، عرض منتجين في سطر واحد يقلل من عدد التمريرات المطلوبة بنسبة 50%، هذا يجعل التصفح أكثر متعة وسلاسة، ويقلل من الإحباط، ويشجع العميل على استكشاف المزيد من صفحات المنتجات، عندما تكون تجربة المستخدم إيجابية، يميل العميل إلى قضاء وقت أطول في متجرك، مما يزيد من احتمالية الشراء.
- زيادة معدل التحويل (Conversion Rate): عندما يرى العميل منتجين بدلًا من منتج واحد في نفس اللحظة، فإنه يحصل على نظرة عامة أوسع وأسرع لما تقدمه، هذا يساعده على مقارنة المنتجات بسرعة واتخاذ قرار الشراء بشكل أسرع، بالإضافة إلى ذلك، وجود المزيد من المنتجات في نفس مساحة الشاشة قد يشجع على عمليات الشراء الاندفاعية.
- تحسين أداء المتجر على الموبايل: التعديل يجعل الصفحة تبدو أكثر تنظيمًا واحترافية، المنتجات تظهر بشكل متناسق ومريح للعين، وهذا يعطي انطباعًا جيدًا عن علامتك التجارية. متجر احترافي ومرتب يشجع العملاء على الثقة بمتجرك وإتمام عمليات الشراء.
- الميزة التنافسية: غالبية المتاجر الإلكترونية العربية لا تستخدم هذه الطريقة، تطبيقها يمنحك ميزة تنافسية كبيرة على منافسيك، عندما يدخل عميل محتمل إلى متجرك ويجد تجربة تسوق أفضل وأسرع، فمن المرجح أنه سيفضلك على غيرك.
الخطوات العملية لتطبيق التعديل على متجر يوكان
الآن وقد اقتنعت بأهمية هذا التعديل، حان الوقت للبدء في تطبيقه، العملية بسيطة جدًا ولا تتطلب أي خبرة برمجية معقدة، كل ما ستحتاجه هو نسخ ولصق كود صغير في المكان الصحيح على لوحة تحكم متجرك.
1. الوصول إلى إعدادات الكود المخصص:
أولًا، عليك تسجيل الدخول إلى لوحة تحكم متجرك على يوكان (YouCan)، من القائمة الجانبية، اذهب إلى إعدادات، ثم إضغط على صفحة أونلاين (القالب القديم)، اختر CSS/JavaScript configs، في مكان: رمز العنوان الإضافي، قم بنسخ الكود الآتي:
<style>
@media (max-width: 425px) {
.products-style-2,
.products-grid,
.categories-style-1 {
grid-template-columns: repeat(2, 1fr);
}
.content-box-with-icon-section .grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.content-box-with-icon-section .title {
font-weight: 600;
font-size: 13px;
}
.content-box-with-icon-section .description {
font-size: 12px;
word-break: break-word;
}
.content-box-with-icon-section .icon {
display: block;
height: 45px;
width: 45px;
line-height: 45px;
font-size: 25px;
}
.products-grid .product-item .product-actions .button {
min-width: 100%;
}
}
</style>2. لصق الكود وحفظ التغييرات:
قم بنسخ الكود بالكامل، بما في ذلك وسمي <style> و </style>، الصقه في الحقل المخصص للأكواد المخصصة، بعد لصق الكود، اضغط على زر “حفظ”.
3. التحقق من النتائج:
بمجرد حفظ التغييرات، قم بزيارة متجرك من هاتفك المحمول أو استخدم خاصية “معاينة الموبايل” في متصفح جهاز الكمبيوتر، ستلاحظ الفرق على الفور، المنتجات ستظهر الآن في صفين بدلًا من صف واحد، مما يمنح متجرك مظهرًا احترافيًا وسريعًا.
تحليل الكود وفهم وظيفته
فهم الكود الذي تستخدمه هو خطوة مهمة لكي تكون على دراية كاملة بما يجري في متجرك، الكود الذي أرفقناه لك هو كود CSS (Cascading Style Sheets) متخصص في تنسيق الصفحات على الويب.
@media (max-width: 425px): هذا الجزء هو ما يسمى بـ “Media Query”، ببساطة، هو يخبر المتصفح أن يطبق جميع الأوامر الموجودة بين القوسين المعقوفين فقط عندما يكون عرض الشاشة 425 بكسل أو أقل، هذا هو الحجم التقريبي للهواتف المحمولة الصغيرة والكبيرة، مما يضمن أن التغيير سيطبق فقط على الهواتف ولن يؤثر على مظهر المتجر على أجهزة الكمبيوتر اللوحية أو المكتبية..products-style-2, .products-grid, .categories-style-1: هذه هي الفئات (Classes) التي تستخدمها منصة يوكان لتحديد العناصر المختلفة في المتجر،products-gridهي الفئة الأكثر شيوعًا للمنتجات،categories-style-1هي الفئة المخصصة لتنسيق فئات المنتجات.grid-template-columns: repeat(2, 1fr);: هذا هو السطر الأكثر أهمية في الكود، هو الذي يقوم بالعمل السحري، يشرح للمتصفح أن عليه استخدام نظام الشبكة (Grid) وأن يحدد عمودين متساويين في العرض لكل صف،repeat(2, 1fr)تعني “كرر عمودًا واحدًا متساويًا في الحجم (1fr) مرتين”، هذا يجبر المتصفح على عرض المنتجات في عمودين بدلًا من عمود واحد.- بقية الكود: الأجزاء الأخرى من الكود هي تعديلات طفيفة ولكنها مهمة جدًا، فهي تقوم بتعديل تنسيق بعض العناصر الأخرى مثل الأزرار والأيقونات لضمان أن كل شيء يبدو متناسقًا ومناسبًا للعرض على شاشة صغيرة، على سبيل المثال،
min-width: 100%يجعل زر “أضف إلى السلة” يملأ عرض المساحة المتاحة بالكامل، وهذا يجعله أسهل في الضغط عليه.
نصائح إضافية لتحقيق أقصى استفادة من هذا التعديل
تطبيق الكود هو الخطوة الأولى، لتحقيق أقصى استفادة وزيادة مبيعاتك بشكل ملحوظ، عليك الانتباه إلى بعض التفاصيل الإضافية:
- صور المنتجات: تأكد من أن صور منتجاتك عالية الجودة ومحسّنة للهواتف المحمولة، بما أن الصور ستظهر أصغر قليلًا، يجب أن تكون واضحة جدًا وتظهر المنتج بشكل جذاب، استخدم صور مربعة للحصول على أفضل النتائج.
- عناوين المنتجات ووصفها: لا تجعل عناوين المنتجات طويلة جدًا، حاول أن تكون موجزًا ومباشرًا. تذكر أن المساحة محدودة، الوصف القصير الذي يظهر أسفل العنوان يجب أن يكون جذابًا ومقنعًا.
- اختبار السرعة: تأكد من أن تطبيق هذا التعديل لم يؤثر على سرعة تحميل متجرك، استخدام صور عالية الجودة جدًا قد يبطئ المتجر، وهذا له تأثير سلبي على المبيعات، استخدم أدوات مثل Google PageSpeed Insights للتأكد من أن متجرك لا يزال سريعًا.
- متابعة التحليلات: بعد تطبيق التعديل، تابع تحليلات متجرك، هل زاد معدل التحويل؟ هل زاد متوسط الوقت الذي يقضيه الزائر في متجرك؟ هذه الأرقام ستخبرك بمدى نجاح التغيير.
- تطبيق نفس المبدأ على الأقسام الأخرى: الكود الذي أرفقناه لك يطبق التغيير على صفحات المنتجات الرئيسية والفئات، يمكنك تطبيق نفس المبدأ على صفحات أخرى مثل “المنتجات الأكثر مبيعًا” أو “المنتجات المضافة حديثًا” إذا كانت متاحة كصفحات منفصلة في متجرك.
خاتمة: ابدأ ثورتك الخاصة في التجارة الإلكترونية
في النهاية، النجاح في التجارة الإلكترونية ليس بالضرورة مرتبطًا بإنفاق ميزانيات ضخمة على الإعلانات، في كثير من الأحيان، تكون التغييرات البسيطة والذكية هي التي تحدث الفارق الأكبر، عرض منتجين في سطر واحد على متجر يوكان الخاص بك هو أحد هذه التغييرات، إنه استثمار صغير في الوقت والجهد، ولكنه يعود عليك بعوائد هائلة.
لا تتردد في اتخاذ هذه الخطوة، طبق الكود اليوم وشاهد كيف تتحسن تجربة مستخدمي متجرك، وكيف تزيد مبيعاتك بشكل لم تتوقعه، تذكر أن العميل يبحث دائمًا عن الأسهل والأسرع والأكثر متعة، امنحه ذلك، وسيعود إليك مرارًا وتكرارًا.
هذه هي ثورة التجارة الإلكترونية الحقيقية: التركيز على التفاصيل التي تصنع تجربة لا تُنسى.
