> ## 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 (V1)

> Este artigo apresenta os seletores CSS disponíveis no Upcart Versão 1, permitindo aplicar estilos personalizados ao cart drawer legado.

📝 **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](/pt/upcart/upcart_css_selector_library_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.

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

<div id="css-selectors-library">
  # Biblioteca de seletores CSS
</div>

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.

<div id="general-settings">
  ## Configurações gerais
</div>

<div id="design-module">
  ### Módulo de design
</div>

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

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

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

<div id="body-settings">
  ## Configurações do corpo
</div>

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

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

<div id="rewards-module">
  ### Módulo de recompensas
</div>

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

<div id="recommendations-module">
  ### Módulo de recomendações
</div>

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

<div id="subscription-upgrades-module">
  ### Módulo de upgrades de assinatura
</div>

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

<div id="upsells-module">
  ### Módulo de upsells
</div>

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

<div id="product-settings">
  ### Configurações de produto
</div>

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

<div id="footer-settings">
  ## Configurações do rodapé
</div>

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

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

<div id="discount-codes-module">
  ### Módulo de códigos de desconto
</div>

<div id="savings-row">
  ### Linha de economia
</div>

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

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

<div id="note-2">
  ## Nota
</div>

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

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

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

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

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

<div id="upcart-settings-module">
  ## Módulo de configurações do Upcart
</div>

<div id="skeleton-selectors">
  ### Seletores de esqueleto
</div>

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

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