Instalar a Provedly numa loja Shopify leva quatro passos: instalar pela App Store, aprovar a cobrança, ativar o embed de app do tema e publicar um widget. Nenhum código é colado no seu tema e nada muda até você ativar o embed. Este guia percorre cada passo e as poucas decisões que você toma pelo caminho.
Antes de começar. Você precisa de uma loja Shopify da qual seja o dono ou um membro da equipe com permissão para instalar apps e editar temas. Não precisa de uma conta na Provedly com antecedência; instalar o app cria uma ligada à sua loja.
Também ajuda decidir qual plano você quer antes de a cobrança aparecer. O plano Free custa $0 e inclui 2.000 impressões por mês, um site, um widget e uma barra CTA, com compras verificadas incluídas e um pequeno selo "by Provedly". Uma impressão é uma notificação exibida para um visitante, e uma visita típica gera cerca de três, então 2.000 impressões dão cerca de 700 visitas. Se a sua loja passa disso, o Starter, a $9 por mês, cobre 25.000 impressões e permite remover o selo. Todos os detalhes estão em /pt/pricing.
Passo 1: instale pela Shopify App Store
Procure Provedly na App Store ou siga o link em /pt/features. Clique em Install. A Shopify mostra as permissões que o app pede, que são as necessárias para receber webhooks de pedidos e ler detalhes suficientes do pedido para montar uma notificação. Aprove-as.
A Shopify então redireciona você para o painel da Provedly incorporado dentro do seu admin da Shopify. A partir daí, você também pode abrir o painel em provedly.app se preferir uma aba inteira do navegador.
Passo 2: aprove a cobrança
A Provedly cobra as lojas Shopify pelo Shopify Billing, então a mensalidade do plano aparece na sua fatura normal da Shopify, e não num cartão separado. Na primeira abertura, o painel pede que você escolha um plano e confirme a cobrança na tela de aprovação da Shopify. Escolher o Free também passa por essa tela, porque a Shopify exige que o app registre uma assinatura, mas o valor é $0.
Se mais tarde você fizer upgrade ou downgrade, o mesmo fluxo de aprovação roda de novo. A diferença entre isso e a cobrança pelo Stripe usada por sites fora da Shopify está explicada em /pt/blog/shopify-billing-vs-stripe.
Passo 3: ative o embed de app do tema
Este é o passo que as pessoas mais esquecem. Instalar o app conecta os dados, mas nada aparece na sua loja até o embed de app do tema ser ativado.
- No admin da Shopify, vá em Online Store e depois em Themes.
- Clique em Customize no seu tema publicado.
- Abra App embeds na barra lateral esquerda (o ícone de peça de quebra-cabeça na maioria das versões da Shopify).
- Encontre a Provedly e ative-a.
- Clique em Save.
O embed carrega um único script de cerca de 6 KB com gzip. Ele renderiza dentro de um Shadow DOM, então o CSS do seu tema não vaza para o widget e os estilos do widget não vazam para fora. Se você já usou tags de script com outros apps, a comparação em /pt/blog/theme-app-embed-vs-script-tag explica por que o embed é o melhor caminho.
Passo 4: publique o seu primeiro widget
De volta ao painel da Provedly, crie um widget de notificações de compra. Os padrões são conservadores e vale mantê-los no início: 3 segundos de atraso antes da primeira notificação, 6 segundos na tela, 30 segundos de intervalo entre notificações e um limite de 5 por sessão. Você pode apertar ou afrouxar esses valores depois, quando vir como os compradores reagem; /pt/blog/notifications-per-visit-frequency discute os prós e contras.
Três configurações merecem uma decisão agora.
- Segmentação por URL. Escolha todas as páginas, só estas páginas ou todas exceto. A maioria das lojas começa com as páginas de produto e de coleção e exclui o checkout. O raciocínio está em /pt/blog/social-proof-on-checkout-page.
- Segmentação por dispositivo. Decida se o widget aparece no desktop, no mobile ou nos dois. Layouts mobile precisam de notificações menores e fáceis de fechar, como mostra /pt/blog/mobile-social-proof-design.
- Ainda sem pedidos. Numa loja Shopify, o widget mostra apenas pedidos verificados da loja, nunca linhas de amostra ou importadas, então ele fica quieto até o primeiro pedido chegar. A aba Design mostra uma pré-visualização ao vivo da notificação enquanto você a ajusta.
Clique em Publish. Abra a sua loja numa janela anônima e espere três segundos.
O que acontece depois do seu primeiro pedido real
Quando um cliente faz um pedido, a Shopify envia um webhook orders/create assinado para a Provedly. Verificamos a assinatura, armazenamos o pedido e o disponibilizamos para o widget com a marca de "Compra verificada". A marca leva à sua página de verificação pública, que lista a Shopify como fonte conectada e mostra a contagem e o horário da última compra verificada.
Talvez você perceba que o comprador aparece como "Someone" em vez de um primeiro nome. O programa Protected Customer Data da Shopify restringe o acesso a campos pessoais até que o uso do app seja aprovado para a sua loja. Os nomes aparecem quando essa aprovação estiver em vigor; veja /pt/blog/shopify-someone-protected-customer-data para saber o que fazer enquanto isso.
Opcional: adicione uma barra CTA. O plano Free inclui uma barra. Uma contagem regressiva até a data real de término de uma promoção, um timer evergreen por visitante ou um contador programado podem ser criados na seção Bars e segmentados do mesmo jeito que os widgets. As barras aparecem no topo ou no rodapé da página e respeitam as mesmas regras de dispositivo e URL. Para planejar a temporada de promoções, leia /pt/blog/black-friday-countdown-bars.
Um checklist para confirmar que tudo funciona
| Verificação | Onde olhar | Resultado esperado |
|---|---|---|
| App instalado | Admin da Shopify, Apps | Provedly na lista |
| Cobrança ativa | Painel da Provedly, Plan | Nome do plano e data de renovação |
| Embed ativado | Editor de temas, App embeds | Botão ligado e salvo |
| Widget publicado | Painel da Provedly, Widgets | Status "Live" |
| Notificação aparece | Loja, janela anônima | Notificação depois de cerca de 3 segundos |
| Webhook recebido | Painel da Provedly, Sources | A Shopify mostra o horário do último recebimento após um pedido de teste |
Se a notificação não aparecer, o botão do embed é a primeira coisa a conferir de novo, seguido das regras de segmentação por URL que podem estar excluindo a página que você está vendo.
Perguntas frequentes
Preciso editar o theme.liquid ou colar um script?
Não. O embed de app do tema cuida do carregamento. Editar os arquivos do tema é desnecessário, e não recomendamos, porque atualizações do tema podem sobrescrever mudanças manuais.
Instalar o app vai deixar a minha loja mais lenta?
O script tem cerca de 6 KB com gzip e carrega de forma assíncrona depois do conteúdo da página. Ele não bloqueia a renderização.
Posso usar a mesma conta da Provedly para um site fora da Shopify também?
Sim. Sites em outras plataformas usam a tag de script e webhooks do Stripe para a verificação. O Starter e os planos acima incluem mais de um site; o plano Free inclui um.
Instale pela App Store e tenha uma notificação verificada no ar hoje; os planos estão em /pt/pricing.