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.

Boas práticas

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.

O que evitar

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.

Use o ChatGPT ou uma IA semelhante para suporte extra

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.

Primeiros passos

Módulos do carrinho

Configurações do carrinho

Botão de carrinho fixo

Multicart

Personalizações

Análises

Integrações e compatibilidade

Faturamento e conta

Solução de problemas

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

Boas práticas

O que evitar

Use o ChatGPT ou uma IA semelhante para suporte extra

​Boas práticas

​O que evitar

​Use o ChatGPT ou uma IA semelhante para suporte extra

Boas práticas

O que evitar

Use o ChatGPT ou uma IA semelhante para suporte extra