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

# إعدادات العلامة التجارية لصفحة الدفع

> يرشدك هذا المقال عبر إعدادات العلامة التجارية لصفحة الدفع وكيفية استخدام كل قسم لتخصيص صفحة الدفع الخاصة بك.

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

<div id="how-to-access-it">
  # كيفية الوصول إليها
</div>

افتح لوحة تحكم **Checkout** في Aftersell وانقر على **Edit branding** أعلى الصفحة.

<Note>
  يتطلب تحرير العلامة التجارية هنا خطة **Shopify Plus**. يسمح Shopify للتطبيقات بقراءة العلامة التجارية لصفحة الدفع وتعديلها على Plus فقط، لذا لا يمكن حفظ هذه الإعدادات على الخطط الأخرى. إذا لم يكن متجرك على Plus، فأجرِ التغييرات نفسها في محرر صفحة الدفع في Shopify بدلاً من ذلك: **Settings → Checkout → Customize** في لوحة إدارة Shopify.
</Note>

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif?s=a24b8a487de57cad22f82a84d193eebd" alt="لوحة تحكم Checkout في Aftersell مع سهم يشير إلى زر Edit branding" width="1432" height="1080" data-path="images/aftersell/checkout-branding-dashboard-arrow-edit-button.gif" />

المحرر منظم في ثلاث مجموعات: **نظام التصميم** و**التخصيصات** و**متقدم**.

***

<div id="design-system">
  # نظام التصميم
</div>

إعدادات نظام التصميم هي الأساس. ترث المكونات عبر صفحة الدفع منها ما لم يتجاوزها إعداد أكثر تحديدًا.

<div id="global-colors">
  ## الألوان العامة
</div>

ألوان علامتك التجارية وألوان النظام، المستخدمة عبر متجرك وتجارب ما بعد الشراء. تستخدم المكونات هذه الألوان عندما لا يتم تعيين نظام ألوان.

**ألوان العلامة التجارية**

* **Brand** – لون علامتك التجارية الأساسي.
* **Accent** – يُستخدم للعناصر التفاعلية والمميزة.
* **Decorative** – يُستخدم للعناصر الزخرفية الداعمة.

**ألوان الحالة والنظام**

* **Success** – حالات التأكيد.
* **Warning** – الرسائل التحذيرية.
* **Critical** – الأخطاء والتنبيهات.
* **Info** – الرسائل المعلوماتية.

<Note>
  ألوان الأسطح والأزرار لا تُعيّن هنا. توجد ضمن **Advanced > Color schemes**.
</Note>

<div id="typography">
  ## الخطوط
</div>

* **حجم الخط** – عيّن **الحجم الأساسي (Base size)** و**نسبة التدرج (Scale ratio)** التي يُشتق منها باقي مقياس الخطوط.
* **الخط الأساسي** – يُستخدم لمعظم المكونات مثل النص العادي والأزرار وعناصر التحكم في النماذج. اختر **عائلة الخط** و**الوزن الأساسي** و**الوزن الغامق**.
* **الخط الثانوي** – يُستخدم لمكونات العناوين، بنفس عناصر التحكم الثلاثة.

<div id="corner-radius">
  ## نصف قطر الزوايا
</div>

يحدد قيم نصف قطر الزوايا المشتركة التي تشير إليها الأزرار وحقول النماذج والحاويات والمكونات الأخرى. تحدد ثلاثة أحجام: **صغير** و**متوسط** و**كبير**.

***

<div id="customizations">
  # التخصيصات
</div>

<div id="buttons">
  ## الأزرار
</div>

تُكوّن بشكل منفصل لكل من **الأزرار الأساسية** (الإجراء الرئيسي في الصفحة) و**الأزرار الثانوية** (الإجراءات الداعمة). لكل منها:

* **نصف قطر الزوايا** – صغير أو متوسط أو كبير أو بدون (مربع).
* **الخلفية** – صلبة أو بدون.
* **الحشو العمودي** و**الحشو الأفقي**.
* **إظهار الحد**.

<Note>
  تُورث ألوان الأزرار من أنظمة الألوان. إذا لم يتم تعيين قيمة نظام، فستُستخدم الألوان العامة.
</Note>

<div id="form-fields">
  ## حقول النماذج
</div>

ينطبق على جميع أنواع الحقول المدعومة:

* **نصف قطر الزوايا**
* **موضع التسمية** – داخل أو خارج.
* **إظهار الحد**

تتيح لك **التجاوزات الخاصة بالحقول** الخروج عن تلك الأنماط المشتركة لأنواع حقول معينة: **حدود حقول النص** و**حدود القوائم المنسدلة** و**تباعد مجموعة قوائم الاختيار** و**نصف قطر زوايا مربعات الاختيار**.

<div id="product-thumbnails">
  ## الصور المصغرة للمنتجات
</div>

يتحكم في كيفية ظهور صور المنتجات في الصفحة:

* **إظهار الحد**
* **نصف قطر الحد**
* **الملاءمة (Fit)**
* **لون خلفية الشارة** – Accent (لون التمييز في النظام) أو Base (اللون الأساسي في النظام).

<div id="header">
  ## الترويسة
</div>

* **التخطيط** – **الموضع** (الشريط العلوي أو القسم الأيسر أو القسم الأيمن) و**المحاذاة** (يسار أو وسط أو يمين).
* **الحاوية** – **الحشو** و**نظام الألوان** و**إظهار الفاصل**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-store-name-header.gif?s=b55fc223b38987bab5e5db18e2bf54ad" alt="صفحة دفع مع تمييز ترويسة اسم المتجر في أعلى اليسار" width="1872" height="1080" data-path="images/aftersell/checkout-branding-store-name-header.gif" />

<div id="content-area">
  ## منطقة المحتوى
</div>

يتحكم في **الفاصل** بين المنطقة الرئيسية ومنطقة ملخص الطلب: **إظهار الفاصل** و**نمط الحد** و**سماكة الحد**.

<div id="main-area">
  ## المنطقة الرئيسية
</div>

* **حاويات الأقسام** – الخلفية وغلاف الحد حول كل قسم: **الخلفية** و**إظهار الحد** و**نمط الحد** و**سماكة الحد**.
* **فواصل الأقسام** – الخطوط المعروضة بين الأقسام.

<div id="order-summary">
  ## ملخص الطلب
</div>

* **الحاوية** – **نظام الألوان** المطبق على حاوية ملخص الطلب بأكملها.
* **فواصل الأقسام** – **إظهار الفاصل** و**نمط الحد** و**سماكة الحد**.
* **حاويات الأقسام** – الخلفية والحد حول كل قسم: **إظهار الحد** و**الخلفية** و**نمط الحد** و**سماكة الحد** و**نظام الألوان** و**نصف قطر الزوايا** و**الحشو** و**الظل**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-branding-order-summary-product-thumbnail.gif?s=76af2d4e5b5f6e740da03a01a9b79124" alt="صورة مصغرة لمنتج في ملخص الطلب مع تمييز حد الصورة" width="1264" height="1080" data-path="images/aftersell/checkout-branding-order-summary-product-thumbnail.gif" />

<div id="footer">
  ## التذييل
</div>

* **التخطيط** – **الموضع** و**المحاذاة**.
* **الحاوية** – **إظهار محتوى التذييل** و**الحشو** و**نظام الألوان** و**إظهار الفاصل**.

***

<div id="advanced">
  # متقدم
</div>

<div id="color-schemes">
  ## أنظمة الألوان
</div>

أنظمة الألوان هي مجموعات قابلة لإعادة الاستخدام من ألوان الأسطح والنصوص والأزرار تشير إليها الأقسام الأخرى. يتوفر نظامان:

* **Scheme 1 - المنطقة الرئيسية**
* **Scheme 2 - المناطق الداعمة**

ينقسم كل نظام إلى ثلاث مجموعات:

* **الأزرار** – تُستخدم لزر الدفع الرئيسي والإجراءات الثانوية. يُكوّن **الزر الأساسي** و**الزر الثانوي** بشكل منفصل، ولكل منهما حالته الافتراضية وحالة التمرير الخاصة به.
* **عناصر التحكم في النماذج** – تُستخدم لحقول النص والقوائم المنسدلة وقوائم الاختيار.
* **الأسطح الأساسية** – خلفية السطح ونص المتن والأدوار الداعمة: الحد، والتمييز (الروابط والتركيز)، والزخرفة (الإبرازات الخفيفة)، ولون الأيقونات.

حيثما يقدم قسم عنصر تحكم **نظام الألوان**، يمكنك توجيهه إلى **Scheme 1** أو **Scheme 2** أو **Transparent**.