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

# Primeiros passos com as personalizações do Upcart

> Aprenda a usar HTML, CSS e JavaScript para criar recursos e estilizações personalizados no seu cart drawer.

⚠️ **Aviso importante**

O exemplo de personalização neste documento funciona apenas com a V1.0 dos módulos de carrinho do Upcart. Se você atualizou recentemente seu carrinho para a Versão 2, esses códigos de personalização não funcionarão. Você precisará usar os novos seletores fornecidos para a Versão 2 no [guia de migração.](/pt/upcart/upcart_v20_migration_guide)

Consulte a demais documentação de personalização para soluções da V2.0.

<div id="overview">
  # Visão geral
</div>

O Upcart dá a você controle total para modificar a aparência e o comportamento do carrinho usando **Custom HTML**, **Custom CSS** e **JavaScript**. Essas ferramentas permitem adicionar novos recursos, estilizar seu carrinho de acordo com a sua marca ou introduzir lógica para melhorar o funcionamento do carrinho.

Este guia cobre o básico de cada uma e mostra como começar. Cada seção inclui um exemplo visual rápido para ajudar você a entender como as mudanças ficam na prática.

***

Antes de começar, revise a [política de personalização do Upcart](/pt/upcart/upcart_customization_policy) para saber o que é e o que não é suportado pela nossa equipe.

<div id="add-content-with-html">
  ## Adicione conteúdo com HTML
</div>

O HTML é usado para adicionar conteúdo estático como textos, banners ou botões ao seu carrinho. Você pode escolher entre vários locais de HTML no editor **Custom HTML** (por exemplo, acima do botão de checkout, no final do carrinho, entre os itens).

Casos de uso comuns:

* Adicionar mensagens personalizadas
* Inserir avisos legais ou links de política
* Destacar prazos de envio ou informações de entrega

**Exemplo:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Editor de Custom HTML do Upcart adicionando uma mensagem de agradecimento acima do botão de checkout" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Adicione lógica com JavaScript
</div>

O JavaScript controla o comportamento e a lógica do carrinho. Você pode usá-lo para mostrar ou ocultar elementos, aplicar estilos condicionalmente ou responder a alterações do carrinho em tempo real.

Você envolverá seu código em uma tag `<script>` e o colocará em **Custom HTML > Scripts (Before Load)** ou **Above Announcements**, dependendo de quando ele deve ser executado.

**Exemplo: [Limitar o carrinho a um upsell por vez](/pt/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **Nota sobre legado:** os callbacks `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` e `window.upcartOnCartLoaded` ainda funcionam, mas estão obsoletos e registram avisos no console. Use `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` e `upcartSubscribeCartLoaded` em todos os scripts novos.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Editor Scripts Before Load do Custom HTML do Upcart com JavaScript ocultando o módulo de upsells" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Nota para desenvolvedores:**\
O Upcart fornece uma [documentação completa da API pública](https://rokt.notion.site/upcart-public-api) que lista todas as funções, variáveis e padrões de práticas recomendadas disponíveis para personalizações avançadas. Recomendamos revisá-la ao criar scripts ou integrações mais complexos.

***

<div id="style-your-cart-with-css">
  ## Estilize seu carrinho com CSS
</div>

O CSS controla a aparência dos elementos do seu carrinho. Use-o para ajustar espaçamento, cores, tamanhos de fonte ou ocultar elementos indesejados. **Custom CSS** é uma das abas em **Settings** (atrás de **More settings**, se a linha de abas transbordar).

Casos de uso comuns:

* Alterar as cores do título do produto ou dos botões
* Ajustar o tamanho ou o alinhamento da fonte
* Adicionar espaçamento entre as seções

**Exemplo: alterar a cor do título de upsell na V1.0:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Editor de Custom CSS do Upcart estilizando a cor do título de upsell com uma confirmação de alterações salvas" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Recursos adicionais
</div>

Quer melhorar suas habilidades em HTML, CSS ou JavaScript? Confira estas ferramentas gratuitas:

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Suporte para personalizações
</div>

A equipe de suporte do Upcart não pode ajudar com a implementação de código personalizado. Para mudanças mais avançadas, recomendamos contratar um [Shopify Expert](https://www.shopify.com/ca/partners/directory).