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

# Biblioteca de seletores CSS do Upcart (V2)

> Este artigo apresenta os seletores CSS disponíveis no Upcart Versão 2, projetados para dar suporte à estilização personalizada do cart drawer atualizado e da nova estrutura de módulos.

⚠️ **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](/pt/upcart/upcart_css_selector_library_v1)**, 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](/pt/upcart/upcart_v20_migration_guide).

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

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.

<div id="note">
  ## NOTA
</div>

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](/pt/upcart/upcart_customization_policy).

Recomendamos consultar um Shopify Expert para soluções de código personalizado.

[Veja os Shopify Experts](https://www.shopify.com/ca/partners/directory)

##

<div id="how-to-use-upcart-css-selectors">
  # Como usar os seletores CSS do Upcart
</div>

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.

<div id="what-to-know-before-adding-css">
  # O que saber antes de adicionar CSS
</div>

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.

<div id="css-customization-checklist">
  ## Checklist de personalização de CSS:
</div>

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

<div id="important-guidelines-for-v2-selectors">
  ## **Diretrizes importantes para os seletores V2**
</div>

⚠️ **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;   
}
```

#

<div id="css-selectors">
  # Seletores CSS
</div>

<div id="general-components">
  ### **Componentes gerais**
</div>

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

#

<div id="header-module">
  ### **Módulo de cabeçalho**
</div>

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

<div id="announcements-module">
  ### **Módulo de anúncios**
</div>

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

<div id="recommendation-and-upsell-modules">
  ### **Módulos de recomendação e upsell**
</div>

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

<div id="notes-module">
  ### **Módulo de notas**
</div>

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

<div id="discount-code-module">
  ### **Módulo de código de desconto**
</div>

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

<div id="trust-badges-module">
  ### **Módulo de selos de confiança**
</div>

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

<div id="tiered-rewards-module">
  ### **Módulo de recompensas por níveis**
</div>

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

<div id="cart-items-module">
  ### **Módulo de itens do carrinho**
</div>

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

<div id="add-ons-module">
  ### **Módulo de add-ons**
</div>

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

<div id="express-payments-module">
  ### **Módulo de pagamentos expressos**
</div>

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

<div id="cart-summary-module">
  ### **Módulo de resumo do carrinho**
</div>

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

<div id="helpful-resources-to-get-started">
  ## **Recursos úteis para começar:**
</div>

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

##

##