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

# Sugerencias de prompts de IA para añadir código personalizado a tu configuración de Upcart

> Cómo usar herramientas de IA como ChatGPT, etc. para implementar código personalizado.

**Personaliza tu cajón del carrito en Upcart usando HTML y CSS a través de Settings > Custom HTML & CSS.**

* **Aunque Upcart ofrece ayuda de nuestro asistente de IA Fin, también puedes usar herramientas de IA de terceros para crear contenido personalizado.**

<div id="best-practices">
  # Buenas prácticas
</div>

* Usa solo **HTML en línea**: sin etiquetas `<html>`, `<head>` ni `<body>`.
* Mantén todo el **CSS** en la sección **Custom CSS**.
* Usa el **menú desplegable de ubicación HTML** para elegir exactamente dónde aparecerá tu fragmento.
* Si usas JavaScript, debería ser:

  * Un pequeño `<script>` en línea (como un temporizador de cuenta regresiva)
  * O colocarse en la sección **"Scripts (Before Load)"**
* Envía a la IA un enlace a la biblioteca de selectores CSS V2 de Upcart y a la biblioteca de ubicaciones HTML para que genere código usando los nombres de clase correctos para tu versión del carrito.

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

* No pegues páginas web completas (`<html>`, `<head>`, `<body>`) de herramientas de IA o generadores de código; romperán el diseño de Upcart.
* Evita poner estilos en etiquetas `<style>` dentro del cuadro de HTML.
* No uses fuentes externas ni bibliotecas pesadas a menos que sea absolutamente necesario.

<div id="use-chatgpt-or-similar-ai-for-extra-support">
  # Usa ChatGPT o una IA similar para soporte adicional
</div>

Usa este prompt para copiar y pegar y obtener código limpio que funcione con 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.
```
