Skip to main content

​
مقدمة

تُعد إضافة أيقونة قفل إلى زر الدفع طريقة بسيطة وفعالة لتعزيز ثقة العملاء من خلال إظهار أن معلومات الدفع الخاصة بهم آمنة. هذا الرمز المألوف يطمئن العملاء بشأن حماية بياناتهم، مما يجعلهم أكثر ارتياحًا أثناء عملية الدفع. في هذا الدليل التعليمي، سأرشدك إلى كيفية إضافة أيقونة قفل إلى زر الدفع باستخدام CSS، مما يعزز الأمان ويحسّن تجربة المستخدم بشكل عام. هذه الخطوات مثالية لأصحاب المتاجر أو المطورين الذين لديهم فهم أساسي لـ CSS. من خلال إضافة هذا العنصر البصري الصغير ولكن المؤثر، يمكنك مواءمة زر الدفع في Upcart مع تصميم موقعك، مما يساعد على بناء الثقة وتشجيع العملاء على إتمام مشترياتهم. هيا نبدأ!

​
البدء: اختر أيقونة قفل

أولًا، ستحتاج إلى اختيار أيقونة قفل لإضافتها إلى متجرك. لدينا بعض الأيقونات المتاحة أدناه لتستخدمها، ولكن يمكنك استخدام أيقونتك الخاصة. لاستخدام أيقونتك الخاصة، قم برفعها إلى قسم الملفات في متجر Shopify الخاص بك ضمن Settings > Files وانسخ رابط URL الخاص بها. لا يوجد حقل أيقونة في Upcart لزر الدفع. بدلًا من ذلك، تلصق وسم صورة HTML في حقل Checkout button text، الذي يعرض HTML — خذ أحد المقاطع أدناه واستبدل قيمة src فيه برابط URL الخاص بك.

​
إليك أيقونات القفل المتاحة لدينا لتختار منها:

كود HTML المطلوب إضافته: أيقونة قفل أبيض مصمت بجانب نص Checkout على زر داكن
كود HTML المطلوب إضافته: أيقونة قفل أبيض بخطوط خارجية بجانب نص Checkout على زر داكن
كود HTML المطلوب إضافته: قفل أبيض بخطوط خارجية مع ثقب مفتاح بجانب Checkout على زر داكن
كود HTML المطلوب إضافته: أيقونة قفل أسود مصمت بجانب نص Checkout على زر أزرق فاتح
كود HTML المطلوب إضافته: قفل أسود مع ثقب مفتاح بجانب Checkout على زر أزرق فاتح

​
وضع أيقونة القفل:

بعد اختيار أيقونة القفل، انتقل إلى Manage All Carts > Edit > Settings > Edit copy وابحث عن حقل Checkout button text. يمكنك لصقها إما قبل كلمة “Checkout” أو بعدها. بالإضافة إلى ذلك، هذا هو المكان الذي يمكنك فيه تغيير كلمة “Checkout” إلى شيء آخر، مثل “Secure Checkout” أو ما شابه. تعديل نص زر الدفع في Upcart لوضع أيقونة القفل

​
الوصول إلى إعدادات CSS المخصص

لبدء تخصيص CSS الخاص بـ Upcart لديك، اتبع هذه الخطوات:
  1. افتح Upcart App من لوحة التحكم الخاصة بك.
  2. انتقل إلى Cart Editor.
  3. افتح Settings واختر تبويب Custom CSS. الإعدادات عبارة عن صف من التبويبات وليست صفحة واحدة طويلة — إذا لم ترَ Custom CSS، فستجده خلف More settings.

​
تطبيق CSS مخصص لإظهار أيقونة القفل:

بمجرد دخولك إلى قسم Custom CSS، انسخ والصق الكود أدناه لإظهار أيقونة القفل وتحديد موضعها. يُرجى ملاحظة أنه كلما زاد رقم الحشو (padding)، أصبحت الأيقونة أصغر.
  1. حدد مكان منطقة إدخال CSS.
  2. انسخ والصق الكود التالي في منطقة إدخال CSS:
  3. عدّل قيمة height ضمن .upcart-custom-lock-icon للحصول على حجم مختلف للأيقونة. نوصي بـ 16px أو 20px للحصول على أيقونة قفل أكبر

​
الخلاصة

باتباع هذه الخطوات، تكون قد أضفت بنجاح أيقونة قفل إلى زر الدفع، مما يجعل عملاءك يشعرون بمزيد من الأمان والثقة أثناء عملية الشراء. هذا التغيير الصغير يمكن أن يُحدث فرقًا كبيرًا في الطريقة التي يُنظر بها إلى متجرك، مما يساعد على بناء الثقة وتحسين تجربة التسوق بشكل عام.

​
هل ما زلت بحاجة إلى مساعدة؟

إذا كنت بحاجة إلى أي مساعدة في التخصيصات، نوصي بالتشاور مع أحد خبراء Shopify حول إضافة HTML وCSS وحتى JavaScript إلى الدرج الجانبي لسلة التسوق (cart drawer) الخاص بك. اطّلع على خبراء Shopify