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

> كيفية استخدام أدوات الذكاء الاصطناعي مثل ChatGPT وغيرها لتنفيذ كود مخصص.

**خصّص الدرج الجانبي لسلة التسوق في Upcart باستخدام HTML وCSS عبر Settings > Custom HTML & CSS.**

* **بينما يوفر Upcart المساعدة من مساعدنا الذكي Fin، يمكنك أيضًا استخدام أدوات ذكاء اصطناعي خارجية لإنشاء محتوى مخصص.**

<div id="best-practices">
  # أفضل الممارسات
</div>

* استخدم **HTML مضمّنًا (inline)** فقط — بدون وسوم `<html>` أو `<head>` أو `<body>`.
* احتفظ بكل **CSS** في قسم **Custom CSS**.
* استخدم **القائمة المنسدلة HTML location** لاختيار المكان الدقيق الذي سيظهر فيه المقطع الخاص بك.
* إذا كنت تستخدم JavaScript، فيجب أن يكون إما:

  * وسم `<script>` صغيرًا مضمّنًا (مثل مؤقت العد التنازلي)
  * أو موضوعًا في قسم **"Scripts (Before Load)"**
* أرسل للذكاء الاصطناعي رابطًا إلى مكتبة محددات CSS للإصدار V2 من Upcart ومكتبة مواقع HTML حتى يولّد كودًا يستخدم أسماء الفئات الصحيحة لإصدار السلة لديك.

<div id="things-to-avoid">
  # أمور يجب تجنبها
</div>

* لا تلصق صفحات ويب كاملة (`<html>` و`<head>` و`<body>`) من أدوات الذكاء الاصطناعي أو مولّدات الكود، فستؤدي إلى تعطيل تخطيط Upcart.
* تجنّب وضع الأنماط في وسوم `<style>` داخل مربع HTML.
* لا تستخدم خطوطًا خارجية أو مكتبات ثقيلة إلا عند الضرورة القصوى.

<div id="use-chatgpt-or-similar-ai-for-extra-support">
  # استخدم ChatGPT أو ذكاءً اصطناعيًا مشابهًا للحصول على دعم إضافي
</div>

استخدم هذا الموجّه الجاهز للنسخ واللصق للحصول على كود نظيف يعمل مع Upcart:

```
I'm using a cart drawer app, Upcart, on my Shopify storefront. Please help me make design changes to the cart. Ensure to provide only the HTML to embed within the existing cart, rather than full HTML documents.   
  
**Do not include:**  
- `<html>`, `<head>`, or `<body>` tags  
- `<style>` tags (I will place CSS in a separate field)  
- Scripts unless they are very small and inline (or intended for the "Scripts (Before Load)" section)  
  
Here's a documentation page that lists all of Upcart's current CSS selectors: https://docs.aftersell.com/upcart/upcart_css_selector_library_v2
(If your cart is still on V1, use the V1 library instead: https://docs.aftersell.com/upcart/upcart_css_selector_library_v1)
  
Here's a documentation page that lists all of Upcart's current HTML locations: https://docs.aftersell.com/upcart/upcart_html_location_library  
  
Here’s what I want to build:  
[Insert what you want. e.g. A free shipping progress bar, a trust badge row, a message for international customers, etc.]  
  
Please return only the HTML snippet for the Custom HTML box and the corresponding CSS (if any) that I can paste into the Custom CSS box.
```
