Aprenda a usar HTML, CSS e JavaScript para criar recursos e estilizações personalizados no seu cart drawer.
⚠️ Aviso importanteO 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.
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.
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
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.
🔧 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.
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:
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.
Esta página foi útil?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
