> ## 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 の cart drawer をカスタマイズできます。**

* **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 セレクターライブラリと HTML ロケーションライブラリへのリンクを送り、お使いのカートバージョンに適したクラス名でコードを生成させてください。

<div id="things-to-avoid">
  # 避けるべきこと
</div>

* AI ツールやコードジェネレーターからの完全な Web ページ(`<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.
```
