إذا كنت تبيع على Shopify، فإن تصميم زر الدعوة لاتخاذ إجراء (CTA) الخاص بك له أهمية قصوى. وسواء كان هذا الزر يؤدي إلى صفحة ترويجية، أو للاشتراك في نشرة إخبارية مخصصة لكبار الشخصيات (VIP)، أو رابط تسويق بالعمولة، فإن الزر الذي يجذب الانتباه يتم النقر عليه بشكل متكرر أكثر من الزر الذي يندمج مع بقية عناصر الصفحة — وفي المتاجر الإلكترونية، يعني المزيد من النقرات زيادة في المبيعات.
تتضمن قوالب Shopify OS 2.0، بما في ذلك قالب Dawn، كتل أزرار مدمجة، ولكنها تمنحك تحكمًا محدودًا في مظهر هذه الأزرار. تتيح لك هذه الكتلة تحديد النص الظاهر على الزر، والرابط، وما إذا كان نمط الزر مصمتًا أو مفرغًا (مخططًا)، بينما تأتي الألوان من إعدادات القالب العامة الخاصة بك. يحافظ هذا على اتساق متجرك (وهو الهدف من إعدادات القالب)، ولكنه يعني أيضًا أن الزر المخصص للبروز سيظهر تمامًا مثل أي زر آخر على موقعك.
يتطلب الحصول على زر مستقل بألوانه وتأثيرات التمرير أو الأيقونة الخاصة به اتباع أحد نهجين. يمكنك إضافة كتلة Custom Liquid مخصصة في محرر القالب الخاص بك وكتابة كود HTML و CSS بنفسك، أو يمكنك استخدام أداة برمجية مجانية مستضافة تتولى عملية التنسيق وتمنحك كود تضمين لتبادر بلصقه.
إذا كنت ترغب في إضافة زر CTA مخصص ومحسّن لزيادة التحويلات على متجر Shopify الخاص بك دون تعديل كود القالب أو الدفع لمطور، فإن هذا الدليل يوضح لك كيفية إضافة زر في Shopify (how to add a button in shopify) باستخدام كلتا الطريقتين.
الخيار 1: استخدام Custom Liquid و CSS
الطريقة القياسية للحصول على تصميم زر فريد في متجر Shopify دون تثبيت تطبيق خارجي هي كتابة الكود بنفسك. يشتمل محرر قوالب Shopify على قسم Custom Liquid حيث يمكنك إضافة كود HTML و CSS الخاص بك، بحيث يمكنك تحديد زر وتنسيقه تمامًا كما تريد دون تعديل ملفات القالب الخاصة بك مباشرةً.
إليك كيفية إضافة زر في Shopify (how to add a button in shopify) باستخدام Custom Liquid و CSS:
- من لوحة تحكم مسؤول Shopify، انتقل إلى Online Store (المتجر الإلكتروني) من القائمة الجانبية اليسرى. ثم انقر فوق أيقونة القلم بجوار Online Store أو انقر فوق Edit theme (تعديل القالب) على الشاشة.
- في الشريط الجانبي الأيسر، انقر فوق Add section (إضافة قسم)، وابحث عن Custom Liquid، ثم حدده. سيظهر حقل نصي على اليمين حيث يمكنك وضع الكود الخاص بك.
- أضف كود HTML الخاص بزرك إلى جانب كتلة <style> تحتوي على كود CSS الخاص بك، ثم انقر فوق Save (حفظ) في الزاوية العلوية اليمنى. ستظهر تغييراتك في المعاينة أثناء العمل.
كلمة تحذير عند استخدام هذه الطريقة: كتابة التنسيق بنفسك يعني أنك تخاطر بارتكاب الأخطاء. فالقواعد المكتوبة بدون محددات مخصصة النطاق (scoped selectors) قد تؤثر على عناصر أخرى في الصفحة، كما أن إضافة كود Custom Liquid إلى الترويسة (header) أو التذييل (footer) يعرضه في كل صفحة من صفحات متجرك — لذا فإن خطأً صغيرًا يمكن أن يكون له تأثير أكبر من مجرد الزر الذي كنت تقوم بتنسيقه. توصي Shopify أيضًا بعمل نسخة احتياطية من قالبك قبل تعديل الكود، وهو ما يعكس نظرة المنصة إلى حجم هذه المخاطرة.
قد يحل توظيف مطور المشكلة التقنية ولكنه يضيف تكلفة يصعب تبريرها لزر واحد، لا سيما عندما تريد اختبار بضعة إصدارات ويعني كل تغيير تقديم طلب آخر.
الخيار 2: إضافة أداة زر مجانية وقابلة للتخصيص (موصى به)
هل تريد التحكم في التصميم دون المخاطرة؟ تعتبر أداة الزر المجانية المستضافة بديلًا لـ Custom Liquid في Shopify بألوانها الخاصة، وتأثير التمرير، والأيقونة المخصصة لها. يمكنك تخصيص الزر في منشئ مرئي، ونسخ كود التضمين، ولصقه في كتلة Custom Liquid في محرر القالب الخاص بك.
تقدم أداة الأزرار من Jotform خيارات التنسيق التي تفتقر إليها كتلة Shopify المدمجة. يمكنك تعيين ألوان الخلفية والنص والتمرير بشكل مستقل، وإضافة أيقونة قبل التسمية أو بعدها، وضبط زوايا الانحناء والارتفاع والهوامش الداخلية والظلال.
إليك كيفية إضافة زر في Shopify (how to add a button in shopify) باستخدام أداة الأزرار من Jotform:
- في صفحة مساحة عمل Jotform الخاصة بك، انقر فوق Create (إنشاء)، وحدد Website Widget (أداة موقع إلكتروني)، وابحث عن “Button”، ثم انقر فوق Use Widget (استخدام الأداة).
- ضمن علامة التبويب General (عام)، اختر الإجراء الخاص بزرك، وأدخل المعلومات المطلوبة (بريد إلكتروني، رقم هاتف، رابط URL، إلخ)، واكتب نص تسمية الزر. أضف سطرًا ثانيًا أو نصًا محيطًا إذا كان عرضك يحتاج إلى توضيح إضافي.
- ضمن علامة التبويب Styles (الأنماط)، قم بتعيين الألوان الخاصة بك، وتفعيل الأيقونة واختيار موضعها، ثم اضبط الشكل والحجم. تتحكم علامة التبويب Layout (التخطيط) في ما إذا كان الزر مدمجًا في الصفحة (inline) أو عائمًا (floating)، وما إذا كان يظهر على أجهزة الكمبيوتر أو الهواتف المحمولة أو كليهما.
- انقر فوق Publish (نشر) في شريط التنقل العلوي، ثم انقر فوق Copy Code (نسخ الكود) في قسم Embed (تضمين) في القائمة اليسرى.
يمكنك أيضًا النقر فوق Platforms (المنصات) واختيار Shopify للحصول على تعليمات التضمين الخاصة بهذه المنصة.
- لتضمين زرك المخصص في Shopify، افتح محرر القالب الخاص بك، وحدد قالب صفحتك، وانقر فوق Add section (إضافة قسم) أو Add block (إضافة كتلة)، واختر Custom Liquid، ثم الصق كود التضمين الخاص بك، وانقر فوق Save (حفظ) في الزاوية العلوية اليمنى.
باستخدام هذا الخيار، نظرًا لأنك تقوم بتنسيق الزر في Jotform بدلاً من تنسيقه مباشرة في قالب موقعك الإلكتروني، تظل تغييراتك منفصلة عن إعدادات قالبك العامة. اختبار لون أو تسمية مختلفة يعني تعديل الأداة بدلاً من تعديل كود القالب مرة أخرى. للإعداد الكامل، راجع كيفية إضافة زر إلى موقع إلكتروني.
عزز متجر Shopify الخاص بك بأدوات ذكية وبدون خوادم
يعد الزر واحدًا من عدة ميزات يمكنك إضافتها إلى موقعك دون الحاجة إلى توظيف مطور أو الدفع مقابل تطبيق شهري آخر. كبديل لعبارات الدعوة لاتخاذ إجراء (CTA) في Shopify، يحتوي دليل أدوات المواقع الإلكترونية المجانية من Jotform على أكثر من 150 خيارًا، بما في ذلك العديد من الأدوات التي تستهدف سد نفس الثغرات في واجهة المتجر مثل الزر.
على سبيل المثال، تضع أداة شريط الإعلانات (Announcement Bar) حد الشحن المجاني أو تواريخ التخفيضات في الجزء العلوي من كل صفحة، حيث يراها المتسوقون قبل إتمام الشراء. بينما ترسل أداة زر الشراء (Buy Button) المتسوقين مباشرة إلى منتج أو عربة تسوق أو رابط إتمام الشراء مع عبارة دعوة للشراء، وهو ما يناسب صفحة هبوط لحملة إعلانية أو عرض بيع إضافي بعد الشراء. وتحتوي فئة التجارة الإلكترونية على بطاقات منتجات وجداول أسعار. هناك أيضًا تكامل بين Jotform و Shopify يتيح لك جمع معلومات العملاء بالتوازي مع متجرك.
يتم تضمين كل أداة بنفس طريقة تضمين الزر، لذلك لن تضطر لدفع قيمة اشتراك تطبيق آخر في كل مرة تريد فيها إضافة ميزة بسيطة.
بصفتك علامة تجارية للتجارة الإلكترونية، يجب أن تقضي وقتك وتوجه ميزانيتك نحو أمور مثل توفير المنتجات وتحسين قنواتك الإعلانية، وليس في كتابة أكواد Custom Liquid لمجرد جعل زر واحد يبدو مختلفًا عن البقية. تمنحك أداة الأزرار من Jotform عبارة دعوة لاتخاذ إجراء يمكنك إعادة تنسيقها في دقيقة واحدة دون المساس بقالبك. جربها مجانًا اليوم.
هذا المقال مخصص لمالكي متاجر Shopify، وممارسي الدروب شيبينغ، ومديري التجارة الإلكترونية الذين يرغبون في إضافة أزرار دعوة لاتخاذ إجراء عالية التخصيص ومحسنة للتحويل دون التقيد بإعدادات القالب أو كتابة أكواد Liquid مخصصة.
كتابة تعليق: