أصبح التواصل الفوري مع العملاء من أساسيات التجارة الإلكترونية الحديثة، ولا شك أن تطبيق واتساب WhatsApp يُعد من أشهر وسائل التواصل التي يفضلها المستخدمون في العالم العربي وخارجه. ولذلك، فإن وجود زر واتساب عائم (Floating WhatsApp Button) على موقعك في شوبيفاي Shopify، يُعَد خطوة ذكية لتعزيز تجربة المستخدم وزيادة فرص التواصل والمبيعات.
في هذا المقال، سنشرح لك كيفية إضافة زر واتساب ثابت في الزاوية اليمنى السفلية من صفحات متجرك على شوبيفاي، باستخدام كود بسيط يتم إدراجه في ملف Snippet بدون الحاجة إلى استخدام أي تطبيقات مدفوعة.
لماذا تحتاج إلى زر واتساب في متجرك؟
قبل أن نخوض في التفاصيل التقنية، دعنا نوضح لماذا يعتبر هذا الزر مهمًا لمتجرك:
- سهولة التواصل: يمكن للعملاء النقر على الزر والانتقال فورًا إلى محادثة واتساب معك دون الحاجة للبحث عن رقم الهاتف أو استخدام البريد الإلكتروني.
- زيادة الثقة: وجود وسيلة تواصل مباشرة مثل واتساب يعطي انطباعًا بالاحترافية والاهتمام بالعملاء.
- تحسين خدمة العملاء: يمكنك الرد على استفسارات الزوار في الوقت الفعلي، مما يرفع نسبة التحويل إلى مبيعات.
- متوافق مع الهواتف: واتساب هو التطبيق الأكثر استخدامًا في الهواتف المحمولة، وبالتالي فإن هذا الزر يتيح تواصلاً مباشرًا من الموبايل دون تعقيدات.
خطوات إضافة زر واتساب في متجر شوبيفاي
بإذن الله الخطوات سهلة و بسيطة جدا، برغم أنها تعديل علي الكود الا انها فعلا بسيطة فقط اتبع الخطوات التالية و ستتمكن من اضافة زر واتس اب بكل سهولة الي متجرك علي شوبيفاي.
الخطوة الأولى: إنشاء ملف كود جديد
- سجل دخولك إلى لوحة تحكم شوبيفاي.
- من القائمة الجانبية، اختر: المتجر الإلكتروني > السمات > تخصيص الشيفرة (Edit Code).
- انتقل إلى مجلد Snippets، ثم اضغط على زر “Add a new snippet”.
- قم بتسمية الملف مثلاً:
whatsapp-button.liquid. - الصق الكود التالي داخل الملف
<!-- زر واتساب في متجر شوبيفاي -->
<style>
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.whatsapp-float img {
width: 60px;
height: 60px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.whatsapp-float img:hover {
transform: scale(1.1);
}
</style>
<a href="https://wa.me/YOURPHONE" class="whatsapp-float" target="_blank" aria-label="تحدث معنا على واتساب">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp Button">
</a>
نصيحة: لا تنسَ استبدال رقم الهاتف في الرابط wa.me/YOURPHONE برقمك الحقيقي المرتبط بحساب واتساب الخاص بنشاطك التجاري.
الخطوة الثانية: تضمين الزر في جميع صفحات الموقع
بعد إنشاء ملف الـ Snippet، نحتاج إلى إدراجه داخل البنية الأساسية للموقع ليظهر في كل الصفحات.
- افتح ملف
theme.liquidمن مجلد Layout. - مرر إلى نهاية الملف وابحث عن وسم الإغلاق
</body>. - قبل هذا الوسم مباشرة، أضف الكود التالي:
{% render 'whatsapp-button' %}
بهذا الشكل، يتم استدعاء ملف الزر ليظهر في أسفل كل صفحة من صفحات الموقع، سواء كانت الصفحة الرئيسية أو صفحة المنتج أو صفحة السلة.
هل زر واتساب شوبيفاي يعمل على الموبايل؟
نعم، الكود الذي قدمناه متجاوب تمامًا ويعمل بشكل ممتاز على الهواتف الذكية. وعند النقر على الزر من الموبايل، يفتح تطبيق واتساب مباشرة ويبدأ المستخدم في المحادثة معك فورًا.
لماذا لا أنصح باستخدام التطبيقات لهذا الغرض؟
رغم وجود العديد من تطبيقات شوبيفاي التي تقدم زر واتساب، إلا أن لها بعض العيوب:
- معظمها مدفوع بعد فترة تجريبية.
- قد تبطئ من أداء الموقع نتيجة تحميل ملفات خارجية.
- تقلل من تحكمك الكامل في تصميم الزر أو مكانه.
بينما باستخدام الكود اليدوي، تحصل على حل خفيف وسريع ومخصص بالكامل لاحتياجاتك.
خلاصة المقال
إضافة زر واتساب عائم لمتجرك على شوبيفاي هي واحدة من أبسط وأذكى الخطوات التي يمكنك اتخاذها لتحسين تفاعل العملاء وزيادة نسبة التحويل. باتباع الخطوات في هذا الدليل، ستتمكن من تنفيذ ذلك بسهولة بدون أي إضافات أو أكواد معقدة.