Passo 1: Obtenha sua chave do widget Photta
Faça login no Painel Photta Business em business.photta.app. Navegue até Configurações → Chaves de API e localize sua chave pública — ela começa com pk_live_ e se parece com 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 sua chave secreta sk_live_ em nenhum código de front-end.
Se você ainda não possui uma conta, clique em 'Iniciar teste gratuito' na página Photta Business. O teste oferece 50 experimentações gratuitas sem necessidade de cartão de crédito. Sua chave pk_live_ fica disponível imediatamente após você verificar seu e-mail e registrar o domínio da sua loja em Configurações → Domínios Permitidos.
Passo 2: Abra o código do seu tema Shopify
No seu painel de administração Shopify, vá em Loja Virtual → 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 arquivos à esquerda. Expanda a pasta Layout e clique em theme.liquid — este é o modelo mestre que envolve todas as páginas da sua loja.
Use a busca integrada do seu navegador (Cmd+F ou Ctrl+F) dentro do editor de código e procure por </body>. Você deve encontrar exatamente uma correspondência perto do final do arquivo, logo acima de </html>. Posicione o cursor na linha imediatamente antes de </body>. Tudo o que você colar aqui será carregado em todas as páginas da sua loja, que é exatamente o que você precisa.
Passo 3: Cole o snippet de script 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/sdk.js" data-pk="pk_live_..." defer></script>. O atributo defer é importante — ele evita que o script bloqueie a renderização da página, garantindo que o widget inicialize após o DOM estar pronto.
Clique em Salvar no canto superior direito do editor de código. O Shopify salvará o arquivo e exibirá uma notificação verde de confirmação. Não é necessário publicar uma nova versão do tema ou fazer qualquer outra coisa — a alteração entra em vigor no seu tema ativo no momento em que você clica em Salvar.
Passo 4: Verifique se o widget carregou corretamente
Abra qualquer página de produto em sua vitrine em uma nova aba do navegador (use uma janela anônima para ignorar caches de login). Role até a seção do produto — você deve ver um botão 'Experimentar' próximo ao botão Adicionar ao Carrinho. Clique nele, envie uma foto de teste e confirme se o resultado da experimentação aparece. Se você vir o botão, a instalação está concluída.
Se o botão não aparecer, abra o console do desenvolvedor do navegador (F12 → guia Console) e procure por mensagens de erro do photta ou sdk.js. O problema mais comum é uma divergência de domínio: o domínio da sua loja deve estar listado em Configuraçõ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 sua marca
Por padrão, o widget usa a paleta escura neutra da Photta. Para combinar com sua marca, adicione atributos de dados à mesma tag de script: data-color-primary para a cor do botão de CTA (valor hex, ex: #D4AF37) e data-color-surface para o fundo do modal. Exemplo: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Salve o theme.liquid novamente após adicionar esses atributos.
Para personalizações completas via CSS, o widget Photta expõe propriedades personalizadas CSS no namespace --photta-* que você 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 são aplicadas em tempo real após salvar — sem necessidade de republicação ou atualização do widget.