> ## 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.

# إنشاء أول عنصر واجهة للدفع

> دليل لإعداد عنصر واجهة الدفع في Aftersell، بدءًا من اختيار عنصر الواجهة وإنشائه وحتى تخصيص مظهره وسلوكه.

في هذا المقال، سنرشدك خلال عملية إعداد عنصر واجهة للدفع في Aftersell. للتعرف على أنواع عناصر الواجهة المختلفة المتاحة، [انقر هنا](/ar/aftersell/checkout_widget_types).

لنبدأ.

***

<div id="step-1-selecting-your-widget">
  ## الخطوة 1: اختيار عنصر الواجهة الخاص بك
</div>

أولاً وقبل كل شيء، اختر عنصر الواجهة الذي يتوافق مع احتياجاتك. سواء كان عنصر واجهة للبيع الإضافي أو للشهادات، يقدّم Aftersell مجموعة من الخيارات لتلبية تفضيلاتك.

في هذا الدرس، سنختار عنصر واجهة البيع الإضافي.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3302868c50e12461761e6a1300820bd7" alt="صفحة Checkout في Aftersell تعرض بطاقات عناصر الواجهة لكل من Upsells وCart Controls وRewards وTestimonials" width="1988" height="1566" data-path="images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png" />

***

<div id="step-2-creating-your-widget">
  ## الخطوة 2: إنشاء عنصر الواجهة الخاص بك
</div>

انقر على "Create Upsell" لبدء إنشاء عنصر واجهة البيع الإضافي الخاص بك.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e89c35b59c09c6fd858e910f46d9fcc0" alt="لوحة Upsells في محرر الدفع مع سهم يشير إلى زر Create upsell" width="2884" height="1234" data-path="images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png" />

***

<div id="step-3-selecting-a-preset">
  ## الخطوة 3: اختيار قالب جاهز
</div>

اختر من قائمة قوالب عناصر الواجهة الجاهزة والمحسّنة أو ابدأ من الصفر.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-new-campaign-preset-options.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=d64607da81a3a4b43e9d5c7c9a7420c2" alt="شاشة إنشاء حملة جديدة مع خيارات قوالب جاهزة مثل عروض البيع الإضافي لمنتج واحد ولعدة منتجات" width="1646" height="1674" data-path="images/aftersell/checkout-widget-create-new-campaign-preset-options.png" />

***

<div id="step-4-edit-styling-and-behaviour">
  ## الخطوة 4: تعديل التنسيق والسلوك
</div>

حان وقت ضبط التفاصيل. اضبط تنسيق عنصر الواجهة وسلوكه إلى الكمال. عدّل منطق التشغيل، أو حسّن اختيار المنتجات، أو أضف اللمسة الأخيرة من الإتقان على التصميم.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-single-product-upsell-editor.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e9560a037ceb877ea2d47d261278934b" alt="محرر البيع الإضافي لمنتج واحد يعرض إعدادات المشغّل والمنتج والتنسيق مع معاينة مباشرة" width="2968" height="1619" data-path="images/aftersell/checkout-widget-create-single-product-upsell-editor.png" />

***

<div id="step-5-enable-widget-status">
  ## الخطوة 5: تفعيل حالة عنصر الواجهة
</div>

تأكد من أن حالة عنصر الواجهة الخاص بك مضبوطة على نشط.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=7f9cedd5ace808ad47a077090be3e29d" alt="محرر الدفع مع مفتاح حالة البيع الإضافي مفعّل لتنشيط عنصر الواجهة" width="2892" height="1386" data-path="images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png" />

بعد أن أصبح عنصر واجهة الدفع الخاص بك نشطًا الآن في Aftersell، تنتظرك الخطوة الأخيرة، وهي وضع عنصر الواجهة في صفحة الدفع الخاصة بك في Shopify. هل تريد معرفة الطريقة؟ انقر أدناه للتعمق أكثر في العملية.

[اعرف المزيد](/ar/aftersell/adding_a_checkout_widget_to_your_shopify_checkout)