> ## 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 설정에 커스텀 코드를 추가하기 위한 AI 프롬프트 제안

> ChatGPT 등 AI 도구를 사용해 커스텀 코드를 구현하는 방법이에요.

**Settings > Custom HTML & CSS를 통해 HTML과 CSS로 Upcart의 카트 드로어를 커스터마이징하세요.**

* **Upcart는 AI 어시스턴트 Fin의 도움을 제공하지만, 서드파티 AI 도구를 사용해 커스텀 콘텐츠를 만들 수도 있어요.**

<div id="best-practices">
  # 모범 사례
</div>

* **인라인 HTML**만 사용하세요 — `<html>`, `<head>`, `<body>` 태그는 사용하지 마세요.
* 모든 **CSS**는 **Custom CSS** 섹션에 두세요.
* **HTML location 드롭다운**을 사용해 스니펫이 표시될 위치를 정확히 선택하세요.
* JavaScript를 사용한다면 다음 중 하나여야 해요:

  * 작은 인라인 `<script>` (카운트다운 타이머 같은 것)
  * 또는 **“Scripts (Before Load)”** 섹션에 배치
* AI에 Upcart의 V2 CSS Selector Library와 HTML Location Library 링크를 보내서 사용 중인 카트 버전에 맞는 올바른 클래스 이름으로 코드를 생성하게 하세요.

<div id="things-to-avoid">
  # 피해야 할 것들
</div>

* AI 도구나 코드 생성기에서 나온 전체 웹페이지(`<html>`, `<head>`, `<body>`)를 붙여넣지 마세요. Upcart 레이아웃이 깨져요.
* HTML 상자 안에 `<style>` 태그로 스타일을 넣지 마세요.
* 꼭 필요한 경우가 아니라면 외부 폰트나 무거운 라이브러리를 사용하지 마세요.

<div id="use-chatgpt-or-similar-ai-for-extra-support">
  # ChatGPT 또는 유사한 AI를 추가 지원에 활용하기
</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.
```
