# 8.4 Widget na gaveta do carrinho

> Como a inserção automática coloca a cotação na gaveta lateral do carrinho e como escolher o ponto certo no seu tema.

Fonte: https://www.cotafrete.app/manual/widgets-da-loja/gaveta-do-carrinho/
Planos: Widget, Basic, Business
No app: Widgets da loja → Widget de cotação
Atualizado em 25/10/2026

---

A gaveta do carrinho (em inglês, *cart drawer*) é o painel que abre na lateral quando o cliente adiciona um produto. Em muitos temas, o cliente vai dali direto para o checkout, sem passar pela página do carrinho. Se a cotação não está na gaveta, esse cliente não vê o frete.

A gaveta pede atenção porque cada tema a monta de um jeito, e na maioria deles ela não aceita bloco de app pelo editor. Por isso o caminho é a inserção automática: a incorporação **CotaFrete (automático)** procura, na página, o elemento indicado por um **seletor CSS** e insere o widget ali.

## O que é um seletor

Seletor CSS é o nome que o tema dá a uma parte da página. A classe `drawer__footer`, por exemplo, marca o rodapé da gaveta em alguns temas. No campo do app, o seletor vai com o ponto na frente: `.drawer__footer`.

O campo **Seletor de carrinho / drawer** aceita vários seletores, separados por espaço, vírgula ou quebra de linha. O widget tenta um por um, na ordem, e entra no **primeiro elemento encontrado**. Só um widget de carrinho aparece por página.

Como o espaço separa seletores, não dá para escrever um seletor com espaço interno (do tipo `.drawer .totals`). Para apontar um elemento dentro de outro, use `>` sem espaços: `.drawer>.totals`.

## Configurar

1. Em **Widgets da loja → Widget de cotação**, confirme que a incorporação está ligada: clique em **Ativar no tema** e salve o editor com **CotaFrete (automático)** ligado.
2. No cartão **Posicionamento**, clique em **Escolher posição no tema**.
3. No editor que abre, adicione um produto ao carrinho para abrir a gaveta. O app desenha linhas sobre os elementos possíveis.
4. Clique em **Adicionar CotaFrete aqui** na linha do ponto desejado (por exemplo, logo acima do botão de finalizar a compra).
5. Clique em **Concluir** na barra do seletor e volte para a aba do app. O campo **Seletor de carrinho / drawer** já mostra o novo valor.

![Gaveta do carrinho de uma loja com tema Dawn, com o widget de cotação depois do botão de finalizar a compra](https://www.cotafrete.app/manual/images/manual/loja-gaveta-do-carrinho.webp)


O seletor de posição é a forma mais segura: ele só oferece elementos que têm um seletor único na página. Se você já sabe a classe, também pode digitá-la no campo e clicar em **Salvar**.

## Posição e margens

No mesmo cartão **Posicionamento**:

- **Posição de inserção**: antes do elemento, depois do elemento (padrão), dentro no início ou dentro no final. Vale para a página do produto e para o carrinho.
- **Margem superior** (padrão 20 px), **Margem inferior** (padrão 0 px) e **Espaçamento interno** (padrão 0 px).

Se o widget aparece colado no total ou longe demais do botão, ajuste a posição e as margens antes de trocar de seletor.

## Testar

Abra a loja numa aba nova, adicione um produto e abra a gaveta. O campo de CEP e as opções de frete devem aparecer no lugar escolhido. Adicione outro produto e consulte de novo para ver o frete do carrinho inteiro.

## Se não apareceu

Temas muito customizados usam outros nomes de classe. Para achar o seletor à mão:

1. Abra a gaveta na loja.
2. Clique com o botão direito no bloco de totais e escolha **Inspecionar**.
3. Procure a classe do elemento que envolve os totais ou o botão de finalizar.
4. Use essa classe no **Seletor de carrinho / drawer**, com o ponto na frente, e salve.

Outros motivos comuns estão em [A cotação não aparece na gaveta do carrinho](https://www.cotafrete.app/manual/solucao-de-problemas/cotacao-nao-aparece-gaveta/).

> **Dica:** A mesma incorporação também insere a [barra de frete grátis](https://www.cotafrete.app/manual/widgets-da-loja/barra-de-frete-gratis/) na gaveta, com seletores próprios, configurados na aba **Barra de frete grátis**.