# Capítulo 8: Widgets da loja

> Como colocar a cotação na página do produto, no carrinho e na gaveta, ajustar o visual e usar a barra de frete grátis.

Fonte: https://www.cotafrete.app/manual/widgets-da-loja/

Na Shopify, o frete aparece por padrão só no checkout. Até lá, o cliente navega, escolhe e adiciona ao carrinho sem saber quanto vai pagar de entrega. Os **widgets** do Cota Frete trazem essa informação para antes do checkout: o campo de CEP com as opções de frete e a barra de frete grátis.

Eles funcionam em qualquer plano da Shopify, porque não dependem do checkout: entram no tema por uma extensão do app. Toda a configuração fica na tela **Widgets da loja** do app; o editor de temas só serve para ligar a extensão e, se você quiser, posicionar os blocos à mão.

## Neste capítulo

- [8.1 A tela Widgets da loja](https://www.cotafrete.app/manual/widgets-da-loja/tela-widgets-da-loja/index.md): O que a tela Widgets da loja configura, como o widget entra no tema (inserção automática ou bloco) e por que tudo se ajusta no app.
- [8.2 Widget na página do produto](https://www.cotafrete.app/manual/widgets-da-loja/pagina-do-produto/index.md): 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.
- [8.3 Widget no carrinho](https://www.cotafrete.app/manual/widgets-da-loja/carrinho/index.md): Como a cotação entra na página do carrinho, o que muda em relação à página do produto e quando o carrinho não basta.
- [8.4 Widget na gaveta do carrinho](https://www.cotafrete.app/manual/widgets-da-loja/gaveta-do-carrinho/index.md): Como a inserção automática coloca a cotação na gaveta lateral do carrinho e como escolher o ponto certo no seu tema.
- [8.5 Personalizar o widget](https://www.cotafrete.app/manual/widgets-da-loja/personalizar-o-widget/index.md): Textos, aparência, endereço do CEP, posição no tema e CSS próprio: tudo o que a aba Widget de cotação ajusta, com a pré-visualização ao vivo.
- [8.6 Barra de frete grátis](https://www.cotafrete.app/manual/widgets-da-loja/barra-de-frete-gratis/index.md): Como funciona a barra "faltam R$ X para frete grátis": o desconto de 100% que define a meta e o período, a aparência em Widgets da loja e as duas formas de colocá-la no tema.
- [8.7 Mensagens do widget](https://www.cotafrete.app/manual/widgets-da-loja/mensagens-personalizadas/index.md): As mensagens que o widget mostra quando o CEP é inválido, quando não há frete para ele ou quando a consulta falha, e o que fazer para o cliente não ficar sem saída.