通过 Settings > Custom HTML & CSS，使用 HTML 和 CSS 定制你在 Upcart 中的购物车抽屉。

虽然 Upcart 提供 AI 助手 Fin 的帮助，但你也可以使用第三方 AI 工具来创建自定义内容。

最佳实践

只使用内联 HTML — 不要使用 <html>、<head> 或 <body> 标签。
将所有 CSS 放在 Custom CSS 部分。
使用 HTML location 下拉菜单精确选择代码片段的显示位置。
如果使用 JavaScript，它应该是：
- 一小段内联 <script>（例如倒计时器）
- 或放在 “Scripts (Before Load)” 部分
向 AI 发送 Upcart V2 CSS 选择器库和 HTML 位置库的链接，让它使用与你的购物车版本对应的正确类名生成代码。

需要避免的事项

不要粘贴来自 AI 工具或代码生成器的完整网页（<html>、<head>、<body>），它们会破坏 Upcart 的布局。
避免在 HTML 输入框中使用 <style> 标签放置样式。
除非绝对必要，否则不要使用外部字体或较重的库。

使用 ChatGPT 或类似的 AI 获取额外支持

使用这个可直接复制粘贴的提示词，获取适用于 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.

⌘I