Passo 1: Obtenha a sua chave de widget Photta
Inicie sessão no Painel da Photta Business em business.photta.app. Navegue até Definições → Chaves API e localize a sua chave publicável — começa com pk_live_ e assemelha-se a pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Clique no ícone de copiar ao lado da chave. Esta é a única credencial necessária para a integração Shopify; nunca cole a sua chave secreta sk_live_ em qualquer código de frontend.
Se ainda não tiver uma conta, clique em 'Iniciar teste gratuito' na página da Photta Business. O teste não necessita de cartão de crédito. A sua chave pk_live_ fica disponível imediatamente após verificar o seu endereço de e-mail e registar o domínio da sua loja em Definições → Domínios Permitidos.
Passo 2: Abra o código do seu tema Shopify
No seu painel de administração Shopify, vá a Loja Online → Temas. Ao lado do seu tema ativo, clique no menu de três pontos e selecione Editar código. O editor de código abre uma árvore de ficheiros à esquerda. Expanda a pasta Layout e clique em theme.liquid — este é o modelo principal que envolve todas as páginas da sua loja.
Utilize a pesquisa integrada do seu navegador (Cmd+F ou Ctrl+F) dentro do editor de código e pesquise por </body>. Deverá encontrar exatamente uma correspondência perto do final do ficheiro, logo acima de </html>. Posicione o cursor na linha imediatamente antes de </body>. Tudo o que colar aqui será carregado em todas as páginas da sua loja, que é exatamente o que precisa.
Passo 3: Cole o snippet de script da Photta
Cole o seguinte snippet na linha imediatamente antes de </body>, substituindo pk_live_... pela sua chave real copiada no Passo 1: <script src="https://widget.photta.app/v1/embed.js" data-api-key="pk_live_..." defer></script>. O atributo defer é importante — impede que o script bloqueie a renderização da página, garantindo que o widget inicializa após o DOM estar pronto.
Clique em Guardar no canto superior direito do editor de código. A Shopify guardará o ficheiro e apresentará uma notificação verde de confirmação. Não publique uma nova versão do tema nem faça mais nada — a alteração está ativa no seu tema atual no momento em que clica em Guardar.
Passo 4: Verifique se o widget carregou corretamente
Abra qualquer página de produto na sua loja num novo separador do navegador (utilize uma janela privada/anónima para contornar qualquer cache de sessão iniciada). Desça até à secção do produto — deverá ver um botão 'Experimentar' perto do botão Adicionar ao Carrinho. Clique nele, carregue uma foto de teste e confirme se o resultado do provador aparece. Se vir o botão, a instalação está concluída.
Se o botão não aparecer, abra a consola de programador do navegador (F12 → separador Consola) e procure por mensagens de erro da photta ou sdk.js. O problema mais comum é uma divergência de domínio: o domínio da sua loja deve estar listado em Definições → Domínios Permitidos no Painel de Negócios. Adicione-o lá, aguarde 30 segundos e recarregue a página do produto.
Passo 5: Personalize as cores do widget para combinar com a sua marca
Por predefinição, o widget utiliza a paleta escura neutra da Photta. Para combinar com a sua marca, adicione atributos de dados à mesma etiqueta de script: data-color-primary para a cor do seu botão CTA (valor hex, ex: #D4AF37) e data-color-surface para o fundo do modal. Exemplo: <script src="https://widget.photta.app/v1/embed.js" data-api-key="pk_live_..." data-color-primary="#D4AF37" defer></script>. Guarde o theme.liquid novamente após adicionar estes atributos.
Para substituições completas ao nível de CSS, o widget Photta expõe propriedades CSS personalizadas no namespace --photta-* que pode segmentar a partir do CSS base do seu tema. O plano Growth e superiores também permitem ocultar o selo 'Powered by Photta' através do Painel de Negócios em Personalizar → Branding. As alterações aplicam-se em tempo real após guardar — não é necessário republicar ou atualizar o widget.