> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# إضافة أو تحديث أيقونة قفل لزر الدفع في Upcart
# مقدمة
تُعد إضافة أيقونة قفل إلى زر الدفع طريقة بسيطة وفعالة لتعزيز ثقة العملاء من خلال إظهار أن معلومات الدفع الخاصة بهم آمنة. هذا الرمز المألوف يطمئن العملاء بشأن حماية بياناتهم، مما يجعلهم أكثر ارتياحًا أثناء عملية الدفع. في هذا الدليل التعليمي، سأرشدك إلى كيفية إضافة أيقونة قفل إلى زر الدفع باستخدام CSS، مما يعزز الأمان ويحسّن تجربة المستخدم بشكل عام.
هذه الخطوات مثالية لأصحاب المتاجر أو المطورين الذين لديهم فهم أساسي لـ CSS. من خلال إضافة هذا العنصر البصري الصغير ولكن المؤثر، يمكنك مواءمة زر الدفع في Upcart مع تصميم موقعك، مما يساعد على بناء الثقة وتشجيع العملاء على إتمام مشترياتهم.
هيا نبدأ!
## البدء: اختر أيقونة قفل
أولًا، ستحتاج إلى اختيار أيقونة قفل لإضافتها إلى متجرك. لدينا بعض الأيقونات المتاحة أدناه لتستخدمها، ولكن يمكنك استخدام أيقونتك الخاصة. لاستخدام أيقونتك الخاصة، قم برفعها إلى قسم الملفات في متجر Shopify الخاص بك ضمن **Settings > Files** وانسخ رابط URL الخاص بها.
لا يوجد حقل أيقونة في Upcart لزر الدفع. بدلًا من ذلك، تلصق وسم صورة HTML في حقل **Checkout button text**، الذي يعرض HTML — خذ أحد المقاطع أدناه واستبدل قيمة `src` فيه برابط URL الخاص بك.
### إليك أيقونات القفل المتاحة لدينا لتختار منها:
كود HTML المطلوب إضافته:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
كود HTML المطلوب إضافته:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
كود HTML المطلوب إضافته:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
كود HTML المطلوب إضافته:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
كود HTML المطلوب إضافته:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
## وضع أيقونة القفل:
بعد اختيار أيقونة القفل، انتقل إلى Manage All Carts > Edit > Settings > Edit copy وابحث عن حقل **Checkout button text**. يمكنك لصقها إما قبل كلمة "Checkout" أو بعدها. بالإضافة إلى ذلك، هذا هو المكان الذي يمكنك فيه تغيير كلمة "Checkout" إلى شيء آخر، مثل "Secure Checkout" أو ما شابه.
## **الوصول إلى إعدادات 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` للحصول على أيقونة قفل أكبر
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.upcart-custom-lock-icon {
height: 12px;
margin-right: 6px;
}
.upcart-checkout-button {
display: flex !important;
align-items: center;
justify-content: center;
}
```
## **الخلاصة**
باتباع هذه الخطوات، تكون قد أضفت بنجاح أيقونة قفل إلى زر الدفع، مما يجعل عملاءك يشعرون بمزيد من الأمان والثقة أثناء عملية الشراء. هذا التغيير الصغير يمكن أن يُحدث فرقًا كبيرًا في الطريقة التي يُنظر بها إلى متجرك، مما يساعد على بناء الثقة وتحسين تجربة التسوق بشكل عام.
## هل ما زلت بحاجة إلى مساعدة؟
إذا كنت بحاجة إلى أي مساعدة في التخصيصات، نوصي بالتشاور مع أحد خبراء Shopify حول إضافة HTML وCSS وحتى JavaScript إلى الدرج الجانبي لسلة التسوق (cart drawer) الخاص بك.
[اطّلع على خبراء Shopify](https://www.shopify.com/partners/directory)