# 8.2 Widget na página do produto

> Como a cotação entra na página do produto, pela inserção automática ou pelo bloco Frete no produto, onde posicionar e como ela usa a variante e a quantidade.

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

---

A página do produto é o ponto da loja onde a cotação tem mais efeito. O cliente ainda está decidindo se compra, e "quanto custa para chegar aqui e em quantos dias" faz parte da decisão. Quem descobre o frete só no checkout já decidiu antes, e muitas vezes desiste ali.

O cliente de Belém e o de Curitiba veem o mesmo produto pelo mesmo preço, mas pagam fretes muito diferentes. Mostrar o frete cedo não muda o valor. Muda o momento em que o cliente decide: com a informação completa, na página certa.

## Antes de começar

- Pelo menos uma transportadora ou um gateway de frete ativo no app.
- Peso cadastrado nos produtos. Veja [Peso dos produtos](https://www.cotafrete.app/manual/produtos-e-caixas/peso-dos-produtos/).
- Acesso ao editor de temas da loja.

## Caminho 1: inserção automática (recomendado)

Com a incorporação **CotaFrete (automático)** ligada no tema, o widget entra sozinho em todas as páginas de produto, no elemento indicado pelo **Seletor de página de produto**. O valor padrão (`.product-form__buttons .product-form__payment-container`) serve para o tema Dawn e boa parte dos temas derivados: o widget aparece logo depois dos botões de compra.

1. Em **Widgets da loja → Widget de cotação**, clique em **Ativar no tema** e salve o editor com **CotaFrete (automático)** ligado.
2. Abra um produto na loja e confira se o widget apareceu.
3. Se ele não apareceu, ou apareceu num lugar ruim, use **Escolher posição no tema**, no cartão **Posicionamento**. Veja [Personalizar o widget](https://www.cotafrete.app/manual/widgets-da-loja/personalizar-o-widget/#posicionamento).

A vantagem desse caminho: vale para todos os templates de produto de uma vez, inclusive os que você criar depois.

## Caminho 2: o bloco Frete no produto

Se você prefere decidir a posição arrastando no editor, use o bloco de app.

1. No admin da Shopify, abra o editor do tema ativo.
2. No seletor de páginas do topo, escolha o template de produto.
3. Na seção de informações do produto, clique em **Adicionar bloco**.
4. Na seção **Apps**, escolha **Frete no produto**.
5. Arraste o bloco para a posição desejada e clique em **Salvar**.

![Widget de cotação na página do produto de uma loja com tema Dawn, com o endereço do CEP e as opções de frete](https://www.cotafrete.app/manual/images/manual/loja-pagina-do-produto.webp)


O bloco não tem opções próprias: título, botão, cores e endereço do CEP vêm da tela Widgets da loja. Onde o bloco está, a inserção automática não coloca um segundo widget. Se a loja usa mais de um template de produto (por exemplo, um para kits), adicione o bloco em cada um.

## Onde posicionar

Logo abaixo do botão de comprar costuma funcionar bem: o cliente vê o frete no momento em que pensa em comprar, sem precisar rolar. Evite colocar o widget depois da descrição longa do produto, onde pouca gente chega.

## Variante e quantidade

O widget cota a **variante selecionada**. Quando o cliente troca o tamanho ou a cor, a consulta seguinte usa o peso e o preço da nova variante.

A **quantidade** também conta. O widget lê o campo de quantidade do tema e multiplica o peso e o valor da variante por ela. Se o cliente marcou 3 unidades, o frete mostrado é o de 3 unidades, o mesmo que ele vai ver no carrinho. Sem campo de quantidade no tema, vale uma unidade.

## De onde sai a cotação

Por padrão, a cotação parte do CEP de origem cadastrado no app. No plano Business, com a origem pelos **perfis de entrega** da Shopify, ela parte do endereço do perfil em que o produto está, e o widget mostra só os serviços do Cota Frete ligados nesse perfil, como o checkout faz. Veja [Cotação por perfis de entrega](https://www.cotafrete.app/manual/multiplas-origens/perfis-de-entrega/).

## Testar

Abra um produto na loja, digite um CEP de outra cidade e clique no botão. Confira se o endereço aparece, se as opções vêm com prazo e valor, e se mudar a quantidade muda o frete. Para testar sem abrir a loja, use o [Simular frete](https://www.cotafrete.app/manual/inicio/simular-frete/).

Se nada aparece, veja [A cotação não aparece na página do produto](https://www.cotafrete.app/manual/solucao-de-problemas/cotacao-nao-aparece-produto/).

## Próximo passo

[Coloque o widget no carrinho](https://www.cotafrete.app/manual/widgets-da-loja/carrinho/) e, se o tema usa, [na gaveta do carrinho](https://www.cotafrete.app/manual/widgets-da-loja/gaveta-do-carrinho/).