⚠️ AVISO IMPORTANTE Estes seletores se aplicam somente à Versão 2 (V2) dos módulos de carrinho do Upcart. Se você usa a Versão 1 (V1), estes seletores não funcionarão. Para carrinhos V1, consulte a documentação de seletores CSS da Versão 1, que cobre a estrutura de módulos e os seletores legados. Para verificar qual versão você está usando, abra o Cart Editor e olhe o topo do menu à esquerda. Um menu suspenso Cart version aparece ali quando todos os módulos do carrinho estão na V2; se você não o vê, seu carrinho ainda tem módulos V1. Para mais informações sobre a migração da V1 para a V2, consulte o guia de migração para a V2.0.

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

Os seletores a seguir funcionam com a Versão 2 dos módulos de carrinho do Upcart. A V2 introduz um sistema de nomenclatura estruturado com prefixos de classe públicos e internos.

Diretrizes importantes para os seletores V2

⚠️ Use apenas seletores públicos para personalização

Seletores públicos (com prefixo upcart-public-) fazem parte da API estável e são seguros para estilização personalizada
Seletores internos (com prefixo upcart-internal-) são reservados para uso interno e podem mudar sem aviso

✅ FAÇA: use nomes de classe públicos para estilizar

/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}

❌ NÃO FAÇA: sobrescrever nomes de classe internos ou usar seletores profundos

/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}

Seletores CSS

Componentes gerais


Seletor CSS	Descrição
`.upcart-public-skeleton`	Invólucro geral do carregador de esqueleto do carrinho.
`.upcart-public-component__button`	Componente geral de botão usado em vários módulos.
`.upcart-public-component-loader`	Componente de indicador de carregamento.
`.upcart-public-component-tag`	Invólucro do componente de tag.
`.upcart-public-component-tag__icon`	Ícone dentro de uma tag.
`.upcart-public-component-tag__text`	Conteúdo de texto de uma tag.
`.upcart-public-component-tag__remove-button`	Botão de remover (“x”) dentro de uma tag removível.
`.upcart-public-component-collapse__dropdown-container`	Contêiner das seções recolhíveis.
`.upcart-public-component-collapse__expand-icon`	Ícone que indica o estado de expandir/recolher.
`.upcart-public-component-carousel__container`	Invólucro externo de um carrossel.
`.upcart-public-component-carousel__window`	Janela de recorte dentro da qual os slides rolam.
`.upcart-public-component-carousel__track`	A trilha móvel que contém os slides.
`.upcart-public-component-carousel__slide`	Um único slide do carrossel.
`.upcart-public-component-carousel__button`	Botão de seta anterior/próximo.
`.upcart-public-component-progress-bar`	Componente de barra de progresso simples (sem segmentos).
`.upcart-public-component-progress-bar__track`	Trilha da barra de progresso simples.
`.upcart-public-component-progress-bar__fill`	Parte preenchida da barra de progresso simples.
`.upcart-public-component-progress-bar__milestone`	Marcador de marco na barra de progresso simples.
`.upcart-public-component-progress-bar__milestone-icon`	Ícone em um marco da barra de progresso simples.
`.upcart-public-component-progress-bar__milestone-label`	Rótulo em um marco da barra de progresso simples.

Módulo de cabeçalho


Seletor CSS	Descrição
`.upcart-public-header`	Contêiner principal do cabeçalho do carrinho.
`.upcart-public-header__logo`	Imagem do logotipo no cabeçalho do carrinho.
`.upcart-public-header__close-button`	Botão usado para fechar o cart drawer.
`.upcart-public-header__close-button-icon`	Ícone exibido dentro do botão de fechar.

Módulo de anúncios


Seletor CSS	Descrição
`.upcart-public-announcement`	Banner ou seção de anúncio dentro do carrinho.
`.upcart-public-announcement-skeleton`	Carregador de esqueleto da barra de anúncios.

Módulos de recomendação e upsell


Seletor CSS	Descrição
`.upcart-public-upsell`	Invólucro principal do módulo de upsell.
`.upcart-public-upsell__header`	Cabeçalho da seção de upsell.
`.upcart-public-upsell__title`	Texto do título da seção de upsell.
`.upcart-public-upsell__shop-now-button`	Botão Shop Now dos itens de upsell.
`.upcart-public-upsell__vertical-layout-wrapper`	Invólucro do layout vertical de upsell.
`.upcart-public-component-upsell-tile`	Layout de cartão de cada produto de upsell/recomendação.
`.upcart-public-component-upsell-tile__image-container`	Contêiner da imagem do produto de upsell.
`.upcart-public-component-upsell-tile__image`	Imagem do produto de upsell.
`.upcart-public-component-upsell-tile__info`	Seção de informações do cartão de upsell.
`.upcart-public-component-upsell-tile__title-link`	Invólucro de link do título do produto.
`.upcart-public-component-upsell-tile__title`	Título do produto de upsell.
`.upcart-public-component-upsell-tile__rating-row`	Linha que contém as avaliações do produto.
`.upcart-public-component-upsell-tile__stars`	Exibição da avaliação em estrelas.
`.upcart-public-component-upsell-tile__star--partial`	Estrela parcial para avaliações fracionadas.
`.upcart-public-component-upsell-tile__reviews`	Exibição da contagem de avaliações.
`.upcart-public-component-upsell-tile__price-row`	Linha que contém as informações de preço.
`.upcart-public-component-upsell-tile__price-compare-at`	Preço original (riscado) do upsell.
`.upcart-public-component-upsell-tile__price`	Preço atual do item de upsell.
`.upcart-public-component-upsell-tile__variant-row`	Linha que contém a seleção de variantes.
`.upcart-public-upsell__skeleton`	Placeholder de esqueleto do módulo de upsell.
`.upcart-public-upsell__skeleton-title`	Esqueleto do título da seção de upsell.
`.upcart-public-upsell__skeleton-image`	Esqueleto da imagem do produto de upsell.
`.upcart-public-upsell__skeleton-product-title`	Esqueleto do título do produto de upsell.
`.upcart-public-upsell__skeleton-product-price`	Esqueleto do preço do produto de upsell.

Módulo de notas


Seletor CSS	Descrição
`.upcart-public-notes`	Contêiner principal da seção de notas.
`.upcart-public-notes__text-container`	Contêiner da área de texto das notas.
`.upcart-public-notes__textarea`	Área de entrada de texto para adicionar uma nota personalizada ao carrinho.

Módulo de código de desconto


Seletor CSS	Descrição
`.upcart-public-discount-code`	Contêiner principal da seção de código de desconto.
`.upcart-public-discount-code__form`	Invólucro do formulário de entrada do código de desconto.
`.upcart-public-discount-code__input-wrapper`	Invólucro do campo de código de desconto.
`.upcart-public-discount-code__input`	Campo de entrada dos códigos de desconto.
`.upcart-public-discount-code__suffix`	Elemento de sufixo do campo de entrada.
`.upcart-public-discount-code__error`	Exibição da mensagem de erro para códigos inválidos.
`.upcart-public-discount-code__button`	Botão para aplicar o código de desconto.
`.upcart-public-discount-code__skeleton`	Placeholder de esqueleto do módulo de código de desconto.
`.upcart-public-discount-code__skeleton-input`	Esqueleto do campo de código de desconto.
`.upcart-public-discount-code__skeleton-button`	Esqueleto do botão de aplicar código de desconto.

Módulo de selos de confiança


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

Módulo de recompensas por níveis


Seletor CSS	Descrição
`.upcart-public-rewards`	Contêiner principal da seção de recompensas.
`.upcart-public-rewards__message`	Exibe mensagens de progresso relacionadas às recompensas.
`.upcart-public-rewards__bar`	Contêiner da barra de progresso das recompensas.
`.upcart-public-component-segmented-progress-bar`	Componente de barra de progresso segmentada.
`.upcart-public-component-segmented-progress-bar__segments-container`	Contêiner de todos os segmentos da barra de progresso.
`.upcart-public-component-segmented-progress-bar__segment`	Segmento individual da barra de progresso.
`.upcart-public-component-segmented-progress-bar__segment-fill`	Parte preenchida de um segmento da barra de progresso.
`.upcart-public-component-segmented-progress-bar__milestone`	Marcador de marco na barra de progresso.
`.upcart-public-component-segmented-progress-bar__milestone--bottom`	Marco posicionado na parte inferior.
`.upcart-public-component-segmented-progress-bar__milestone--top`	Marco posicionado na parte superior.
`.upcart-public-component-segmented-progress-bar__milestone--middle`	Marco posicionado no meio.
`.upcart-public-component-segmented-progress-bar__milestone-icon`	Ícone exibido em um marco.
`.upcart-public-component-segmented-progress-bar__milestone-label`	Texto do rótulo de um marco.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-right`	Rótulo de marco alinhado à direita.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-center`	Rótulo de marco centralizado.
`.upcart-public-rewards__skeleton`	Contêiner de esqueleto da seção de recompensas.
`.upcart-public-rewards__skeleton-message`	Esqueleto da mensagem de progresso das recompensas.
`.upcart-public-rewards__skeleton-bar`	Esqueleto da barra de progresso das recompensas.

Módulo de itens do carrinho


Seletor CSS	Descrição
`.upcart-public-cart-items`	Invólucro principal da lista de itens do carrinho.
`.upcart-public-cart-item`	Invólucro de um item individual do carrinho.
`.upcart-public-cart-items-skeleton__content`	Carregador de esqueleto dos itens do carrinho.
`.upcart-public-component-product-tile`	Invólucro de um item de produto individual no carrinho.
`.upcart-public-component-product-tile__content`	Área de conteúdo do cartão do produto.
`.upcart-public-component-product-tile__image-wrapper`	Invólucro da imagem do produto.
`.upcart-public-component-product-tile__image`	Imagem do produto no carrinho.
`.upcart-public-component-product-tile__info`	Seção de informações do cartão do produto.
`.upcart-public-component-product-tile__header`	Seção de cabeçalho do cartão do produto.
`.upcart-public-component-product-tile__product-title`	Nome do produto no carrinho.
`.upcart-public-component-product-tile__title-link`	Link que envolve o título do produto.
`.upcart-public-component-product-tile__remove-button`	Botão para remover o produto do carrinho.
`.upcart-public-component-product-tile__variant`	Exibição das informações de variante.
`.upcart-public-component-product-tile__properties`	Invólucro de metadados adicionais do produto.
`.upcart-public-component-product-tile__bundle`	Seção de informações de bundle.
`.upcart-public-component-product-tile__product-pricing`	Seção de preços do cartão do produto.
`.upcart-public-component-product-tile__price-compare-at`	Preço original (riscado).
`.upcart-public-component-product-tile__price`	Preço final exibido ao cliente.
`.upcart-public-component-product-tile__price-group`	Invólucro do preço e do preço comparativo.
`.upcart-public-component-product-tile__savings`	Economia específica de um item do carrinho.
`.upcart-public-component-product-tile__controls`	Seção de controles (quantidade etc.).
`.upcart-public-component-product-tile__quantity-selector`	Invólucro do seletor de quantidade.
`.upcart-public-component-product-tile__quantity-minus`	Botão para diminuir a quantidade.
`.upcart-public-component-product-tile__quantity-plus`	Botão para aumentar a quantidade.
`.upcart-public-component-product-tile__discount-codes`	Códigos de desconto aplicados ao item.
`.upcart-public-component-product-tile__subscription-upgrade`	Seção de upgrade de assinatura.
`.upcart-public-component-product-tile__subscription-upgrade-btn`	Botão que aplica o upgrade de assinatura.
`.upcart-public-component-product-tile__select-wrapper`	Invólucro do menu suspenso de seleção.
`.upcart-public-component-product-tile__select`	Elemento do menu suspenso de seleção.
`.upcart-public-product-properties__subscription`	Exibe os detalhes de assinatura do item.
`.upcart-public-product-properties__item`	Propriedade individual do produto.
`.upcart-public-product-properties__link`	Link dentro das propriedades do produto.
`.upcart-public-cart-items__key-value-pair`	Exibição de par chave-valor das propriedades do item.
`.upcart-public-bundle-properties`	Contêiner das propriedades de bundle.
`.upcart-public-bundle-properties__variant-title`	Título da variante dos itens de bundle.
`.upcart-public-bundle-properties__header`	Cabeçalho da seção de propriedades de bundle.
`.upcart-public-bundle-properties__item-components`	Contêiner dos componentes de item do bundle.
`.upcart-public-bundle-properties__item-component-row`	Linha de cada componente de item do bundle.
`.upcart-public-bundle-properties__image-wrapper`	Invólucro da imagem do item de bundle.
`.upcart-public-bundle-properties__content`	Área de conteúdo do item de bundle.
`.upcart-public-bundle-properties__product-title`	Título do produto do item de bundle.

Módulo de add-ons


Seletor CSS	Descrição
`.upcart-public-addons`	Contêiner principal da seção de add-ons.
`.upcart-public-addons__image-wrapper`	Invólucro da imagem do add-on.
`.upcart-public-addons__content-wrapper`	Invólucro do conteúdo das informações do add-on.
`.upcart-public-addons__content-title-wrapper`	Invólucro do título do add-on.
`.upcart-public-addons__content-title`	Título do produto de add-on.
`.upcart-public-addons__content-price`	Seção de preço do add-on.
`.upcart-public-addons__compare-at-price`	Preço original (riscado) do add-on.
`.upcart-public-addons__price`	Preço atual do produto de add-on.
`.upcart-public-addons__content-description`	Descrição do produto de add-on.
`.upcart-public-addons__toggle-wrapper`	Invólucro do botão de alternância do add-on.
`.upcart-public-addons__toggle`	Botão de alternância para adicionar/remover um add-on.
`.upcart-public-addons__toggle-switch`	Elemento de interruptor da alternância.
`.upcart-public-addons__toggle-slider`	Elemento deslizante da alternância.
`.upcart-public-addons__skeleton`	Placeholder de esqueleto da seção de add-ons.
`.upcart-public-addons__skeleton-image`	Esqueleto da imagem do produto de add-on.
`.upcart-public-addons__skeleton-text`	Esqueleto do conteúdo de texto dos add-ons.

Módulo de pagamentos expressos


Seletor CSS	Descrição
`.upcart-public-express-payments__container`	Contêiner dos botões de pagamento expresso.

Módulo de resumo do carrinho


Seletor CSS	Descrição
`.upcart-public-cart-summary`	Contêiner principal do resumo do carrinho.
`.upcart-public-cart-summary__discount-codes`	Contêiner dos códigos de desconto no resumo.
`.upcart-public-cart-summary__discount-label`	Rótulo da seção de descontos.
`.upcart-public-cart-summary__slide-codes`	Contêiner deslizante dos códigos de desconto.
`.upcart-public-cart-summary__total-discount`	Exibição do valor total de desconto.

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 (V2)

Visão geral

NOTA

Como usar os seletores CSS do Upcart

O que saber antes de adicionar CSS

Checklist de personalização de CSS:

Diretrizes importantes para os seletores V2

Seletores CSS

Componentes gerais

Módulo de cabeçalho

Módulo de anúncios

Módulos de recomendação e upsell

Módulo de notas

Módulo de código de desconto

Módulo de selos de confiança

Módulo de recompensas por níveis

Módulo de itens do carrinho

Módulo de add-ons

Módulo de pagamentos expressos

Módulo de resumo do carrinho

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:

​Diretrizes importantes para os seletores V2

​

​Seletores CSS

​Componentes gerais

​

​Módulo de cabeçalho

​Módulo de anúncios

​Módulos de recomendação e upsell

​Módulo de notas

​Módulo de código de desconto

​Módulo de selos de confiança

​Módulo de recompensas por níveis

​Módulo de itens do carrinho

​Módulo de add-ons

​Módulo de pagamentos expressos

​Módulo de resumo do carrinho

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

Diretrizes importantes para os seletores V2

Seletores CSS

Componentes gerais

Módulo de cabeçalho

Módulo de anúncios

Módulos de recomendação e upsell

Módulo de notas

Módulo de código de desconto

Módulo de selos de confiança

Módulo de recompensas por níveis

Módulo de itens do carrinho

Módulo de add-ons

Módulo de pagamentos expressos

Módulo de resumo do carrinho

Recursos úteis para começar: