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

# Sugestões de prompts de IA para adicionar código personalizado às configurações do Upcart

> Como usar ferramentas de IA como ChatGPT etc. para implementar código personalizado.

**Personalize seu cart drawer no Upcart usando HTML e CSS em Settings > Custom HTML & CSS.**

* **Embora o Upcart ofereça ajuda do nosso assistente de IA Fin, você também pode usar ferramentas de IA de terceiros para criar conteúdo personalizado.**

<div id="best-practices">
  # Boas práticas
</div>

* Use apenas **HTML inline** — sem tags `<html>`, `<head>` ou `<body>`.
* Mantenha todo o **CSS** na seção **Custom CSS**.
* Use o **menu suspenso de localização do HTML** para escolher exatamente onde seu snippet vai aparecer.
* Se você estiver usando JavaScript, ele deve ser:

  * Um pequeno `<script>` inline (como um cronômetro de contagem regressiva)
  * Ou colocado na seção **"Scripts (Before Load)"**
* Envie para a IA um link para a Biblioteca de Seletores CSS V2 e para a Biblioteca de Localizações HTML do Upcart, para que ela gere código usando os nomes de classe corretos para a versão do seu carrinho.

<div id="things-to-avoid">
  # O que evitar
</div>

* Não cole páginas web completas (`<html>`, `<head>`, `<body>`) de ferramentas de IA ou geradores de código — elas vão quebrar o layout do Upcart.
* Evite colocar estilos em tags `<style>` dentro da caixa de HTML.
* Não use fontes externas ou bibliotecas pesadas, a menos que seja absolutamente necessário.

<div id="use-chatgpt-or-similar-ai-for-extra-support">
  # Use o ChatGPT ou uma IA semelhante para suporte extra
</div>

Use este prompt pronto para copiar e colar e obter um código limpo que funciona com o 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.
```
