⚠️ 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. Consulte a demais documentação de personalização para soluções da V2.0.

Visão geral

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 para saber o que é e o que não é suportado pela nossa equipe.

Adicione conteúdo com HTML

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

Editor de Custom HTML do Upcart adicionando uma mensagem de agradecimento acima do botão de checkout

Adicione lógica com JavaScript

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:

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

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.

Editor Scripts Before Load do Custom HTML do Upcart com JavaScript ocultando o módulo de upsells

🔧 Nota para desenvolvedores:
O Upcart fornece uma documentação completa da API pública 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.

Estilize seu carrinho com CSS

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;  
}

Editor de Custom CSS do Upcart estilizando a cor do título de upsell com uma confirmação de alterações salvas

Recursos adicionais

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

Suporte para personalizações

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.

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

Primeiros passos com as personalizações do Upcart

Visão geral

Adicione conteúdo com HTML

Adicione lógica com JavaScript

Estilize seu carrinho com CSS

Recursos adicionais

Suporte para personalizações

​Visão geral

​Adicione conteúdo com HTML

​Adicione lógica com JavaScript

​Estilize seu carrinho com CSS

​Recursos adicionais

​Suporte para personalizações

Visão geral

Adicione conteúdo com HTML

Adicione lógica com JavaScript

Estilize seu carrinho com CSS

Recursos adicionais

Suporte para personalizações