📝 Nota Os seletores V1 se aplicam aos módulos do cart drawer legado. Se você atualizou para a V2, os seletores de módulo desta página não correspondem mais — veja a Biblioteca de seletores CSS V2 para os seletores atuais. Vale conhecer duas exceções: .upcart-cart e .upcart-cart-body estão na casca do drawer e não em um módulo, então continuam funcionando na V2. Correções de layout que atingem o drawer como um todo (restringir a largura, impedir overflow horizontal) continuam funcionando após uma atualização.

Visão geral

Se você quer mudar a aparência do seu carrinho, como ocultar um preço, ajustar o tamanho do texto ou reposicionar um botão, este é o lugar para começar. Esta biblioteca de seletores CSS fornece as ferramentas necessárias para fazer essas mudanças com seu próprio código personalizado. Todos os seletores CSS disponíveis estão agrupados neste artigo, junto com links para recursos úteis para escrever e testar seus estilos.

Nota

Embora forneçamos esta biblioteca para sua conveniência, a equipe de suporte do Upcart não pode ajudar a criar ou corrigir código personalizado. Isso faz parte da nossa Política de personalização. Recomendamos consultar um Shopify Expert para soluções de código personalizado. Veja os Shopify Experts

Como usar os seletores CSS do Upcart

Este artigo é uma biblioteca de seletores CSS que você pode usar para estilizar e personalizar seu cart drawer do Upcart. Cada seletor atinge uma parte específica do carrinho — como o cabeçalho, as linhas de produto, os upsells, o módulo de recompensas e muito mais. Você pode usar esses seletores para:

Ocultar ou reestilizar elementos
Mudar espaçamentos, fontes ou cores
Ajustar o layout de acordo com a identidade da sua loja

Para aplicar seu CSS, abra o Cart Editor, acesse Settings, selecione a aba Custom CSS e cole seus estilos no editor.

O que saber antes de adicionar CSS

Antes de mergulhar nos seus estilos personalizados, aqui vão algumas dicas para tudo correr bem. Elas facilitam testar mudanças, evitar surpresas e alcançar o visual desejado sem quebrar nada no seu carrinho.

Checklist de personalização de CSS:

Teste em um ambiente seguro: use uma pré-visualização ou um tema não publicado sempre que possível antes de colocar no ar.
Comece pequeno: faça uma mudança de cada vez para ser mais fácil rastrear o que funcionou ou não.
Cole os estilos no lugar certo: use o campo Upcart Editor > Settings > Custom CSS para adicionar seu código.
Use a ferramenta de inspeção: clique com o botão direito nos elementos do navegador e selecione Inspecionar para encontrar e testar seletores ao vivo.
Evite suposições: nem todo elemento aparece em todos os carrinhos — teste com carrinhos diferentes (com/sem recompensas, upsells etc.).

Biblioteca de seletores CSS

Abaixo está a lista de todos os seletores CSS disponíveis no Upcart. Eles estão agrupados por módulo (como cabeçalho, produtos, upsells etc.) para facilitar a busca do que você quer personalizar. Use isto como referência ao escrever seus próprios estilos.

Configurações gerais

Módulo de design


Seletor CSS	Descrição
`.upcart-cart`	Contêiner principal do cart drawer.
`.upcart-cart-body`	Contém o conteúdo principal do carrinho.
`.upcart-backdrop`	A sobreposição escura que aparece atrás do carrinho.

Módulo de cabeçalho


Seletor CSS	Descrição
`.upcart-header`	Contêiner do cabeçalho do carrinho, incluindo o logotipo e o botão de fechar.
`.upcart-header-close-button`	Botão usado para fechar o cart drawer.
`.upcart-header-close-button-icon`	O ícone exibido dentro do botão de fechar.
`.upcart-header-logo`	Exibe a imagem do logotipo no cabeçalho do carrinho.
`.upcart-header-text`	O texto de título exibido no cabeçalho do carrinho.

Configurações do corpo

Módulo de anúncios


Seletor CSS	Descrição
`.upcart-announcement`	Banner ou seção de anúncio dentro do carrinho.
`.upcart-announcement-skeleton`	Placeholder de esqueleto para a seção de anúncio.

Módulo de recompensas


Seletor CSS	Descrição
`.upcart-rewards`	Contêiner principal da seção de recompensas.
`.upcart-rewards-message`	Exibe mensagens de progresso relacionadas às recompensas.
`.upcart-rewards-bar-background`	Camada de fundo da barra de progresso de recompensas.
`.upcart-rewards-bar-foreground`	Preenchimento de progresso da barra de recompensas.
`.upcart-rewards-tier`	Representa um nível específico no sistema de recompensas.
`.upcart-rewards-tier-circle`	Indicador circular visual de um nível de recompensa.
`.upcart-rewards-tier-icon`	Ícone dentro do círculo de um nível de recompensa.
`.upcart-rewards-tier-description`	Texto de descrição sob cada nível de recompensa.
`.upcart-rewards-skeleton`	Contêiner de esqueleto da seção de recompensas.
`.upcart-rewards-message-skeleton`	Esqueleto da mensagem de progresso das recompensas.
`.upcart-rewards-bar-skeleton`	Esqueleto da barra de progresso das recompensas.

Módulo de recomendações


Seletor CSS	Descrição
`.upcart-recommendation-module`	Invólucro de todo o módulo de recomendação de produtos.
`.upcart-recommendations-title`	Texto do título da seção de recomendações.
`.upcart-recommendations-shop-now-button`	Botão para comprar um produto recomendado direto do carrinho.

Módulo de upgrades de assinatura


Seletor CSS	Descrição
`.upcart-subscription-upgrade-section`	Seção para promover upgrades de assinatura no carrinho.
`.upcart-subscription-upgrade-button`	Botão usado para acionar um upgrade de assinatura.
`.upcart-subscription-upgrade-dropdown`	Menu suspenso para selecionar as opções de upgrade de assinatura disponíveis.

Módulo de upsells


Seletor CSS	Descrição
`.upcart-upsells`	Contêiner principal da seção de upsells.
`.upcart-upsells-module`	Invólucro do módulo de upsells.
`.upcart-upsells-title`	Título da seção de upsells.
`.upcart-upsells-button`	Botão para adicionar itens de upsell ao carrinho.
`.upcart-upsell-item-card`	Layout de cartão de cada produto de upsell.
`.upcart-upsell-item-title`	Título do produto de upsell.
`.upcart-upsell-item-image-wrapper`	Invólucro da imagem do produto de upsell.
`.upcart-upsell-item-image`	Imagem do produto de upsell.
`.upcart-upsell-item-price`	Preço do item de upsell.
`.upcart-upsell-item-price-row`	Linha que contém o preço e o preço comparativo.
`.upcart-upsell-item-compare-price`	Preço original (riscado) do upsell.
`.upcart-upsell-item-variant-selector`	Menu suspenso de variantes para produtos de upsell.

Configurações de produto


Seletor CSS	Descrição
`.upcart-products-section`	Contêiner de todos os produtos no carrinho.
`.upcart-product-item`	Invólucro de um item de produto individual.
`.upcart-product-title`	Nome do produto no carrinho.
`.upcart-product-title-link`	Link que envolve o título do produto.
`.upcart-item-prices-row`	Linha que contém as informações de preço.
`.upcart-item-price`	Preço final exibido ao cliente.
`.upcart-item-compare-price`	Preço original (riscado).
`.upcart-product-savings`	Economia específica de um item do carrinho.
`.upcart-item-option`	Contêiner das opções de produto, como tamanho ou cor.
`.upcart-item-option-category`	Rótulo da categoria da opção de produto.
`.upcart-item-option-value`	Valor da opção de produto selecionada.
`.upcart-item-properties`	Invólucro de metadados adicionais do produto.
`.upcart-item-property`	Propriedade individual do produto.
`.upcart-item-property-subscription`	Exibe os detalhes de assinatura do item.
`.upcart-product-quantity-input`	Campo de entrada de quantidade do produto.
`.upcart-product-quantity-minus`	Botão para diminuir a quantidade.
`.upcart-product-quantity-plus`	Botão para aumentar a quantidade.
`.upcart-product-image-wrapper`	Invólucro da imagem do produto.
`.upcart-quantity-warning`	Contêiner de qualquer mensagem de limite de quantidade.
`.upcart-quantity-warning-text`	Texto do aviso de quantidade exibido ao usuário.

Módulo de add-ons


Seletor CSS	Descrição
`.upcart-addons`	Contêiner principal da seção de add-ons.
`.upcart-addons-title`	Título da seção de add-ons.
`.upcart-addons-product-description`	Descrição do produto de add-on.
`.upcart-addons-price`	Preço do produto de add-on.
`.upcart-addons-compare-price`	Preço original (riscado) do add-on.
`.upcart-addons-toggle`	Botão de alternância para adicionar/remover um add-on.
`.upcart-addons-image-wrapper`	Invólucro da imagem do add-on.

Módulo de códigos de desconto

Linha de economia


Seletor CSS	Descrição
`.upcart-savings-row`	Invólucro de toda a seção de descontos/economia no carrinho.
`.styles_Footer__savingsCodes__`	Contêiner do rótulo (“Discounts”) e dos códigos de desconto associados.
`.upcart-discount-code-badge`	Invólucro de cada selo de código de desconto exibido na interface.
`.upcart-discount-code-icon`	Contêiner do ícone de desconto (por exemplo, símbolo SVG de cupom).
`.upcart-discount-code-text`	Representação textual do código de desconto (por exemplo, “AUTO 5”).
`.upcart-savings-amount`	Exibe o valor real economizado com descontos.

Módulo de pagamentos expressos

Nota

Os botões de pagamentos expressos no Upcart servem como contêineres visuais, enquanto o conteúdo e a funcionalidade dentro deles são totalmente controlados pela Shopify. Por isso, não conseguimos modificar seu comportamento ou aparência. Consulte o guia do Módulo de pagamentos expressos para mais informações.


Seletor CSS	Descrição
`.upcart-express-pay-buttons-container`	Contêiner de todos os botões de pagamento expresso.
`.upcart-express-pay-buttons-row`	Layout em linha dos botões de pagamento expresso.
`.upcart-express-pay-button`	Seletor geral de um botão de pagamento expresso.
`.upcart-express-pay-button-shop-pay`	Botão específico do Shop Pay.
`.upcart-express-pay-button-google-pay`	Botão específico do Google Pay.
`.upcart-express-pay-button-paypal`	Botão específico do PayPal.
`.upcart-express-pay-button-apple-pay`	Botão específico do Apple Pay.
`.upcart-express-pay-button-amazon-pay`	Botão específico do Amazon Pay.
`.upcart-express-pay-button-meta-pay`	Botão específico do Meta Pay.

Módulo de selos de confiança


Seletor CSS	Descrição
`.upcart-trust-badge`	Contêiner dos selos de confiança.
`.upcart-trust-badge-image`	Elemento de imagem usado em um selo de confiança.

Módulo de notas adicionais


Seletor CSS	Descrição
`.NotesModule_NotesModule__`	Contêiner das notas adicionais.
`.NotesModule_NotesModule__titleContainer__`	Contêiner do título da seção de notas
`.NotesModule_NotesModule__dropdownContainer__`	Título do menu suspenso da seção de notas
`.NotesModule_NotesModule__textModule__ textarea`	Área de entrada para adicionar uma nota personalizada ao carrinho.

Módulo de configurações do Upcart

Seletores de esqueleto


Seletor CSS	Descrição
`.upcart-skeleton`	Invólucro geral do carregador de esqueleto do carrinho.
`.upcart-product-item-skeleton`	Placeholder enquanto um produto carrega.
`.upcart-product-image-skeleton`	Placeholder da imagem de um produto.
`.upcart-product-title-skeleton`	Placeholder do texto do título do produto.
`.upcart-product-price-container-skeleton`	Placeholder da área de preços.
`.upcart-product-quantity-skeleton`	Placeholder dos controles de quantidade.
`.upcart-item-option-skeleton`	Placeholder das opções do item.
`.upcart-upsells-module-skeleton`	Esqueleto do módulo de upsells.
`.upcart-upsells-title-skeleton`	Esqueleto do título da seção de upsells.
`.upcart-upsell-item-image-skeleton`	Esqueleto da imagem do produto de upsell.
`.upcart-upsell-item-title-skeleton`	Esqueleto do título do produto de upsell.
`.upcart-upsell-item-price-skeleton`	Esqueleto do preço do produto de upsell.
`.upcart-upsells-button-skeleton`	Esqueleto do botão de ação do upsell.
`.upcart-trust-badge-skeleton`	Esqueleto do contêiner do selo de confiança.
`.upcart-trust-badge-image-skeleton`	Esqueleto da imagem do selo de confiança.
`.upcart-announcement-skeleton`	Placeholder de esqueleto dos anúncios.
`.upcart-rewards-skeleton`	Esqueleto da seção de recompensas.
`.upcart-rewards-message-skeleton`	Esqueleto das mensagens de recompensa.
`.upcart-rewards-bar-skeleton`	Esqueleto da barra de progresso das recompensas.
`.upcart-addons-skeleton`	Esqueleto da seção de add-ons.
`.upcart-addons-image-wrapper-skeleton`	Esqueleto da imagem do produto de add-on.
`.upcart-addons-skeleton-text-container`	Esqueleto do conteúdo de texto dos add-ons.
`.upcart-discount-code-module-skeleton`	Esqueleto do módulo de código de desconto.
`.upcart-discount-code-input-skeleton`	Esqueleto do campo de código de desconto.
`.upcart-discount-code-button-skeleton`	Esqueleto do botão de aplicar código de desconto.
`.upcart-checkout-button-container-skeleton`	Esqueleto do invólucro do botão de checkout.
`.upcart-checkout-button-skeleton`	Esqueleto do botão de checkout.
`.upcart-express-pay-buttons-container-skeleton`	Esqueleto do contêiner de pagamento expresso.
`.upcart-express-pay-button-skeleton`	Esqueleto de um botão individual de pagamento expresso.

Recursos úteis para começar:

Introdução ao CSS personalizado: aprenda a adicionar CSS personalizado no Upcart com segurança.
Introdução às personalizações no Upcart: entenda como a personalização funciona e por onde começar.
Use IA para escrever código personalizado para o Upcart: receba ajuda para escrever CSS ou JavaScript usando prompts simples.
Melhores práticas para aumentar as conversões do carrinho: otimize o design do seu carrinho com dicas comprovadas.

Referência de recursos do carrinho

Referência de CSS

Receitas de estilo

Receitas de funcionalidade

Modelos personalizados

API pública do Upcart

Biblioteca de seletores CSS do Upcart (V1)

Visão geral

Nota

Como usar os seletores CSS do Upcart

O que saber antes de adicionar CSS

Checklist de personalização de CSS:

Biblioteca de seletores CSS

Configurações gerais

Módulo de design

Módulo de cabeçalho

Configurações do corpo

Módulo de anúncios

Módulo de recompensas

Módulo de recomendações

Módulo de upgrades de assinatura

Módulo de upsells

Configurações de produto

Configurações do rodapé

Módulo de add-ons

Módulo de códigos de desconto

Linha de economia

Módulo de pagamentos expressos

Nota

Módulo de selos de confiança

Módulo de notas adicionais

Módulo de configurações do Upcart

Seletores de esqueleto

Recursos úteis para começar:

​Visão geral

​Nota

​Como usar os seletores CSS do Upcart

​O que saber antes de adicionar CSS

​Checklist de personalização de CSS:

​Biblioteca de seletores CSS

​Configurações gerais

​Módulo de design

​Módulo de cabeçalho

​Configurações do corpo

​Módulo de anúncios

​Módulo de recompensas

​Módulo de recomendações

​Módulo de upgrades de assinatura

​Módulo de upsells

​Configurações de produto

​Configurações do rodapé

​Módulo de add-ons

​Módulo de códigos de desconto

​Linha de economia

​Módulo de pagamentos expressos

​Nota

​Módulo de selos de confiança

​Módulo de notas adicionais

​Módulo de configurações do Upcart

​Seletores de esqueleto

​Recursos úteis para começar:

Visão geral

Nota

Como usar os seletores CSS do Upcart

O que saber antes de adicionar CSS

Checklist de personalização de CSS:

Biblioteca de seletores CSS

Configurações gerais

Módulo de design

Módulo de cabeçalho

Configurações do corpo

Módulo de anúncios

Módulo de recompensas

Módulo de recomendações

Módulo de upgrades de assinatura

Módulo de upsells

Configurações de produto

Configurações do rodapé

Módulo de add-ons

Módulo de códigos de desconto

Linha de economia

Módulo de pagamentos expressos

Nota

Módulo de selos de confiança

Módulo de notas adicionais

Módulo de configurações do Upcart

Seletores de esqueleto

Recursos úteis para começar: