تخيل أنك تبيع مجموعة لتبييض الأسنان، أو خدمة تنظيف وتلميع السيارات، أو مجموعة من إعدادات Lightroom الجاهزة. ما الذي يدفع العميل المحتمل لاتخاذ قرار الشراء؟ مع مثل هذه المنتجات، يريد الناس أكثر من مجرد وعودك؛ إنهم يريدون رؤية النتائج بأعينهم.
يسمح شريط التمرير قبل وبعد للمتسوقين بتصور ما يدفعون مقابل الحصول عليه بدقة. بمجرد سحب المقبض ومشاهدة التحول، تفرض قيمة المنتج نفسها. إنها واحدة من أسرع الطرق لبناء الثقة وتمييز منتجك في سوق مزدحم.
إذا كنت تقوم بـ البيع على Shopify، فهناك مشكلة صغيرة: ثيماتها الافتراضية لا تتضمن ميزة “shopify before and after slider” بشكل جاهز ومباشر. لإضافة هذا الشريط، لديك ثلاثة خيارات: تثبيت تطبيق من متجر تطبيقات Shopify، أو تضمين أداة مجانية بدون كود، أو كتابة كود مخصص لشريط التمرير داخل ملفات الثيم الخاص بك. يستعرض هذا الدليل الطرق الثلاث بالتفصيل حتى تتمكن من البدء في تحويل المتصفحين إلى مشترين فعليين.
الخيار 1: تثبيت إضافة من متجر تطبيقات Shopify
بالنسبة لمعظم التجار، فإن أول ما يتبادر إلى الذهن هو فتح متجر تطبيقات Shopify والبحث عن “shopify before and after slider”. ستجد الكثير من الخيارات، ويتم تثبيت معظمها كقسم أو كتلة تطبيق أصلية (app block). بمجرد إضافة التطبيق، يظهر شريط التمرير مباشرة داخل محرر الثيم الخاص بك كقسم أو كتلة يمكنك إسقاطها في صفحة المنتج. تكمن جاذبية هذا الخيار في سهولة استخدامه.
ومع ذلك، فإن هذا الخيار يأتي بتكلفتين.
الأولى هي ما يسميه أصحاب المتاجر “ضريبة التطبيقات”. تعمل جميع تطبيقات أشرطة التمرير المخصصة تقريبًا باشتراك شهري — يتراوح عادةً بين 1 و10 دولارات شهريًا مقابل ميزة تفاعلية واحدة. شريط تمرير هنا، ومؤقت تنازلي هناك، وبعد عام تجد نفسك تدفع مبالغ حقيقية مقابل ميزات كانت تُباع سابقًا كإضافات تدفع قيمتها لمرة واحدة فقط.
التكلفة الثانية هي السرعة. غالبًا ما تحقن التطبيقات المرئية للواجهة الأمامية أكواد JavaScript الخاصة بطرف ثالث في كل صفحة تلمسها. قم بتثبيت عدد قليل منها، وستحمل صفحات منتجاتك عبئًا من البرمجيات الخارجية، مما قد يؤدي إلى إبطاء سرعة الصفحة — وهو ما يؤثر بشكل مباشر على معدل التحويل وأداء السيو (SEO) الخاص بك.
إذا كنت قد وازنت بين هذه العيوب والمزايا ولا تزال ترغب في سلك مسار التطبيقات الأصلية، فإليك خطوات الإعداد:
- انتقل إلى متجر تطبيقات Shopify، وتأكد من تسجيل الدخول إلى حساب Shopify الخاص بك. ابحث عن “before-and-after slider”.
- اختر أحد التطبيقات وانقر على تثبيت (Install) لإضافته إلى متجرك.
- اتبع تعليمات التطبيق لإعداده. تطلب منك معظم التطبيقات إعداد طريقة الدفع قبل استخدامها، لذا ستحتاج إلى القيام بذلك قبل إضافتها إلى ثيم متجرك.
الخيار 2: استخدام أداة شريط تمرير مجانية وبدون كود (موصى به)
إذا كنت تريد شريط تمرير للمقارنة قابلًا للتخصيص ومتوافقًا مع الجوال دون الحاجة لاشتراك شهري، فإن أفضل خيار هو استخدام أداة مضمنة مجانية. تم تصميم أداة Jotform Before and After Slider خصيصًا لهذا الغرض. ما عليك سوى تخصيصها مرئيًا، ونسخ كود التضمين، ثم لصقه في صفحة Shopify الخاصة بك. لا توجد تطبيقات لتثبيتها ولا توجد رسوم متكررة.
ولأن الأداة يتم تحميلها من خوادم Jotform بدلاً من حقن البرمجيات في الثيم الخاص بك، فإنها تحافظ على نظافة كود متجرك وخفته، مما يساعد على حماية سرعة تحميل الصفحة. يمكنك ضبط الكشف الأفقي أو العمودي، واختيار طريقة التفاعل عبر السحب أو النقر أو التمرير، وإضافة تسميات وتسميات توضيحية، وحتى تكديس ما يصل إلى ثلاث مقارنات في عرض دوار (carousel) مدمج.
إليك كيفية إضافتها:
- في صفحة Jotform Before and After Slider، أضف صورك الخاصة بـ “قبل وبعد” واكتب تسمية وتسمية توضيحية لكل زوج من الصور. يسحب Jotform الصور عبر رابط URL، لذا إذا لم تكن صورك مرفوعة على الإنترنت بعد، فقم برفعها إلى Shopify أولاً من خلال الذهاب إلى الإعدادات > الملفات (Settings > Files) وانسخ رابط كل صورة. يمكنك أيضًا اختيار خيار رفع الصور إذا كنت تفضل إضافة الصور مباشرة على Jotform.
- قم بتخصيص اتجاه الكشف، وموضع الفاصل، والألوان، والحجم بما يتناسب مع تصميم متجرك.
- انسخ كود التضمين الذي يوفره Jotform. يمكنك القيام بذلك بالنقر فوق زر Copy Code (نسخ الكود) في علامة التبويب Publish (نشر).
- في محرر ثيم Shopify، افتح نموذج المنتج أو الصفحة التي تريد إدراج شريط التمرير فيها، وانقر فوق إضافة قسم (Add section) (أو إضافة كتلة – Add block)، واختر Custom Liquid. الصق كود التضمين ثم انقر فوق حفظ (Save).
الخيار 3: تعديل كود ثيم Shopify الخاص بك
إذا كنت تفضل عدم استخدام أي تطبيق خارجي أو أداة مضمنة على الإطلاق، فيمكنك بناء شريط تمرير المقارنة مباشرة داخل الثيم الخاص بك. يمنحك هذا الخيار أقصى درجات التحكم وأقل قدر من الأكواد الإضافية، ولكنه أيضًا الخيار الأسهل للتسبب في أخطاء برمجية إن لم تكن حذرًا.
تتكون عملية البناء من ثلاثة أجزاء: كود HTML لاحتواء الصورتين، وكود CSS لترتيبهما فوق بعضهما وقصهما، وكود JavaScript لتحريك الفاصل أثناء سحب الزائر له. المكان الأبسط لوضع كل هذه الأكواد معًا هو داخل كتلة Custom Liquid واحدة، حتى لا تضطر إلى تعديل ملفات القوالب الأساسية مباشرة.
إليك ما يجب فعله:
- أضف الكود البرمجي مع رابطي الصورتين الخاصين بك. توضع صورة “قبل” في الأعلى ويتم قصها، بينما توضع صورة “بعد” في الأسفل.
html<div class="ba-slider" id="baSlider"> <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore"> <img src="AFTER_IMAGE_URL" alt="After" - أضف كود CSS. يعمل تحديد الموضع المطلق (Absolute positioning) على تداخل الصور فوق بعضها، وتكشف خاصية clip-path عن نصف صورة “قبل” في البداية، وتمنع خاصية touch-action: none الصفحة من التمرير أثناء قيام المستخدم بالسحب على الهاتف المحمول.
html<style> .ba-slider { position: relative; width: 100%; max-width: 600px; aspect-ratio: 3 / 2; overflow: hidden; touch-action: none; user-select: none; } .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ba-before { clip-path: inset(0 50% 0 0); } .ba-handle { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: #fff; transform: translateX(-50%); cursor: ew-resize; } .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 4px rgba>(0,0,0,.4); }</style>- أضف كود JavaScript. تغطي أحداث المؤشر (Pointer events) كلاً من الماوس واللمس في مسار واحد، بحيث يتبع مقبض السحب حركة المؤشر أو سحب الإصبع. احفظ التغييرات، ثم اختبرها على هاتف حقيقي.
html<script> const s = document.getElementById('baSlider'); const before = document.getElementById('baBefore'); const handle = document.getElementById('baHandle'); let dragging = false; function setPos(x) { const r = s.getBoundingClientRect(); let pct = Math.max(0, Math.min(100, ((x - r.left) / r.width) * 100)); before.style.clipPath = `inset(0 ${100 - pct}% 0 0)`; handle.style.left = pct + '%'; } s.addEventListener('pointerdown', e => { dragging = true; setPos(e.clientX); }); window.addEventListener('pointermove', e => { if (dragging) setPos(e.clientX); }); window.addEventListener('pointerup', () => { dragging = false; });</script>تحذير صريح: هذا الخيار محفوف بالمخاطر؛ فقد تؤدي قوس مفقودة أو نمط تنسيق (style) يتسرب إلى بقية قالبك إلى إفساد تخطيط الهاتف المحمول، أو الأسوأ من ذلك، التداخل مع عملية إتمام الشراء. يجب اختبار استجابة اللمس عبر أجهزة حقيقية، وليس فقط متصفح سطح المكتب، كما أنك ستتحمل مسؤولية كل خطأ برمي وإصلاح مستقبلي بمفردك. إذا كانت هذه التنازلات تبدو أسوأ من استخدام أداة جاهزة، فإننا ننصحك بالخيار الثاني.
عزز متجرك على Shopify باستخدام أدوات ذكية بدون أكواد
يستحق شريط التمرير قبل وبعد الإضافة، ولكنه نادرًا ما يكون العنصر التفاعلي الوحيد الذي يحتاجه المتجر. تكتسب منصة Shopify مكانتها بين أفضل منصات إنشاء مواقع التجارة الإلكترونية جزئيًا لسهولة التوسع فيها، والإضافات المناسبة هي ما يحول المتجر العملي إلى متجر احترافي متكامل. لكن الفخ يكمن في دفع اشتراك شهري منفصل لكل أداة، حيث تلتهم هذه الرسوم بهدوء هوامش أرباحك التي تسعى لحمايتها.
هذا هو السبب الذي يدفعك للاستعانة بالأدوات المجانية المستضافة بدلاً من ذلك. تحافظ أدوات مثل Jotform Before and After Slider على أرباحك دون مساس، وتضمن تحميل صفحاتك بسرعة، وتبقي المتسوقين متفاعلين. كما أن نفس الدليل يغطي ما هو أكثر بكثير من مجرد مقارنة الصور.
تتضمن بعض أدوات Jotform الأخرى التي تستحق الاستكشاف لمتجر Shopify ما يلي:
- عداد تنازلي لإضافة عنصر العجلة على التخفيضات السريعة أو إطلاق المنتجات الجديدة
- أداة الأسئلة الشائعة للإجابة على استفسارات المنتجات الشائعة مباشرة على الصفحة
- التحقق من العمر للمنتجات المقيدة بفئات عمرية معينة
- زر العودة إلى الأعلى لتسهيل التصفح في صفحات المنتجات الطويلة
تصفح دليل أدوات موقع Jotform الكامل لتجد ما يناسب متجرك. بالإضافة إلى ذلك، يمكنك ربط نماذجك وبياناتك مباشرة من خلال تكامل Jotform وShopify. جرب أول أداة بدون أكواد مجانًا وابدأ استخدامها في بضع دقائق فقط.
هذا المقال موجه لمالكي متاجر Shopify، وممارسي الدروب شيبينغ، والعلامات التجارية للتجارة الإلكترونية (خاصة في مجالات التجميل، واللياقة البدنية، وتأثيرات الصور الجاهزة “presets”، والديكور المنزلي) الذين يرغبون في استعراض تحولات منتجاتهم بصريًا دون دفع اشتراك شهري لأحد التطبيقات.
كتابة تعليق: