Étape 1 : Obtenez votre clé de widget Photta
Connectez-vous au tableau de bord Photta Business à l'adresse business.photta.app. Accédez à Paramètres → Clés API et localisez votre clé publiable — elle commence par pk_live_ et ressemble à pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Cliquez sur l'icône de copie à côté de la clé. C'est le seul identifiant dont vous avez besoin pour l'intégration Shopify ; ne collez jamais votre clé secrète sk_live_ dans un code frontend.
Si vous n'avez pas encore de compte, cliquez sur « Commencer l'essai gratuit » sur la page Photta Business. L'essai vous offre 50 essais gratuits sans carte de crédit requise. Votre clé pk_live_ est disponible immédiatement après avoir vérifié votre adresse e-mail et enregistré le domaine de votre boutique dans Paramètres → Domaines autorisés.
Étape 2 : Ouvrez le code de votre thème Shopify
Dans votre panneau d'administration Shopify, allez dans Boutique en ligne → Thèmes. À côté de votre thème actif, cliquez sur le menu à trois points et sélectionnez Modifier le code. L'éditeur de code ouvre une arborescence de fichiers sur la gauche. Développez le dossier Layout et cliquez sur theme.liquid — c'est le modèle maître qui englobe chaque page de votre boutique.
Utilisez la recherche intégrée de votre navigateur (Cmd+F ou Ctrl+F) à l'intérieur de l'éditeur de code et recherchez </body>. Vous devriez trouver exactement une correspondance tout en bas du fichier, juste au-dessus de </html>. Positionnez votre curseur sur la ligne immédiatement avant </body>. Tout ce que vous collerez ici se chargera sur chaque page de votre boutique, ce qui est exactement ce dont vous avez besoin.
Étape 3 : Collez l'extrait de script Photta
Collez l'extrait suivant sur la ligne immédiatement avant </body>, en remplaçant pk_live_... par votre clé réelle copiée à l'étape 1 : <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. L'attribut defer est important — il empêche le script de bloquer le rendu de votre page tout en garantissant que le widget s'initialise une fois que le DOM est prêt.
Cliquez sur Enregistrer dans le coin supérieur droit de l'éditeur de code. Shopify enregistrera le fichier et affichera une notification de confirmation verte. Ne publiez pas de nouvelle version de thème et ne faites rien d'autre — la modification est en direct sur votre thème actif dès que vous cliquez sur Enregistrer.
Étape 4 : Vérifiez que le widget s'est chargé correctement
Ouvrez n'importe quelle page produit de votre boutique dans un nouvel onglet de navigateur (utilisez une fenêtre de navigation privée pour contourner la mise en cache de session). Faites défiler jusqu'à la section produit — vous devriez voir un bouton « Essayer » près du bouton Ajouter au panier. Cliquez dessus, téléchargez une photo de test et confirmez que le résultat de l'essai apparaît. Si vous voyez le bouton, l'installation est terminée.
Si le bouton n'apparaît pas, ouvrez la console de développement du navigateur (F12 → onglet Console) et recherchez d'éventuels messages d'erreur de photta ou sdk.js. Le problème le plus courant est une non-correspondance de domaine : le domaine de votre boutique doit être répertorié sous Paramètres → Domaines autorisés dans le tableau de bord Business. Ajoutez-le là, attendez 30 secondes et rechargez la page produit.
Étape 5 : Personnalisez les couleurs du widget pour les adapter à votre marque
Par défaut, le widget utilise la palette sombre neutre de Photta. Pour l'adapter à votre marque, ajoutez des attributs de données à la même balise script : data-color-primary pour la couleur de votre bouton d'appel à l'action (valeur hexadécimale, ex: #D4AF37), et data-color-surface pour l'arrière-plan de la fenêtre modale. Exemple : <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Enregistrez à nouveau theme.liquid après avoir ajouté ces attributs.
Pour des surcharges complètes au niveau CSS, le widget Photta expose des propriétés CSS personnalisées sur l'espace de noms --photta-* que vous pouvez cibler depuis le CSS de base de votre thème. Le forfait Growth et les forfaits supérieurs vous permettent également de masquer le badge « Propulsé par Photta » via le tableau de bord Business sous Personnaliser → Branding. Les modifications s'appliquent en temps réel après l'enregistrement — aucun redéploiement ni mise à jour du widget n'est nécessaire.