Aperçu
DecorViz Storefront ajoute automatiquement un bouton « Voir dans votre pièce » à vos pages produits. Vous installez une seule balise script, sur tout le site, et le moteur détecte les pages produits par lui-même, récupère la photo du produit directement sur la page, et place le bouton près de votre bouton Ajouter au panier.
Cela fonctionne avec Shopify, WooCommerce, Wix, Squarespace ou un site codé sur mesure. Il n'y a aucune étape à répéter dans le tableau de bord pour chaque produit : une fois le script en ligne, toutes les pages produits de votre boutique sont couvertes.
Storefront est inclus avec le forfait Storefront. Accédez à Storefront pour commencer.
Prérequis
Avant de commencer, assurez-vous d'avoir :
- Abonnement Storefront : Storefront est uniquement disponible avec un forfait Storefront actif. Vérifiez votre forfait ou passez à la version supérieure si nécessaire.
- Une boutique en ligne : N'importe quelle plateforme e-commerce ou site web avec des pages produits.
- Accès au code de votre thème ou de votre site : Vous devrez coller une balise script dans un modèle global (fichier de thème, pied de page ou panneau d'injection de code), pas seulement sur une seule page.
Storefront récupère l'image du produit directement sur la page consultée par l'acheteur. Tant que vos pages produits affichent déjà une photo claire de l'article, il n'y a rien de plus à téléverser.
Partie 1 : Configuration de DecorViz Storefront
Rendez-vous sur votre tableau de bord DecorViz Storefront. Vous verrez trois onglets dans la barre latérale : Storefront, Produits et Paramètres. Commencez par l'onglet Storefront.
Étape 1 : Créez votre Storefront
Chaque compte DecorViz peut gérer un seul storefront à la fois, lié à un seul domaine de site web. Lors de votre première visite, il vous sera demandé de le créer.
Saisissez votre domaine
Saisissez le domaine de votre boutique sans « https:// » ni barre oblique finale, par exemple votreboutique.com.
Choisissez une plateforme
Sélectionnez Détection automatique, Shopify, WooCommerce, ou Générique / personnalisé. La détection automatique fonctionne pour la plupart des boutiques et constitue le point de départ recommandé ; vous pourrez la modifier plus tard dans les Paramètres si la détection nécessite des ajustements.
Définissez la correspondance de domaine
Choisissez Domaine exact si le bouton ne doit fonctionner que sur ce domaine, ou Inclure les sous-domaines si vous servez aussi des pages produits depuis des sous-domaines (par exemple un shop.votreboutique.com séparé).
Créez votre storefront
Saisissez le domaine de votre boutique, choisissez la plateforme, et obtenez votre script d'installation en un clic.
Chaque compte DecorViz prend en charge un seul storefront et un seul domaine. Si vous devez activer la visualisation sur un second site web, vous aurez besoin d'un compte séparé.
Étape 2 : Configurez la détection et le bouton
Rendez-vous dans l'onglet Paramètres pour ajuster la façon dont DecorViz détecte les produits et l'apparence du bouton. Les réglages par défaut conviennent à la plupart des boutiques, mais il est utile de les vérifier avant la mise en ligne.
Paramètres de détection
Vérifiez que le Mode plateforme correspond à votre boutique (ou laissez-le sur Détection automatique). Ajustez la Confiance min. si besoin : des valeurs plus basses détectent plus de pages produits mais risquent d'afficher le bouton sur des pages non-produits ; des valeurs plus hautes sont plus strictes. 0,50 est la valeur par défaut recommandée.
Détection
Placement et apparence du bouton
Placement
- Mode : Automatique (ancré près d'Ajouter au panier), Sous l'image du produit, Flottant dans un coin inférieur, ou un sélecteur CSS personnalisé pour un point d'ancrage précis.
- Position d'insertion (modes basés sur un ancrage uniquement) : avant, après, ou ajouté à l'intérieur de cet élément.
Apparence
- Texte du bouton
- Forme : Arrondie ou Carrée
- Style : Plein ou Contour
- Ombre : activée ou désactivée
- Couleur : nuancier ou votre propre couleur personnalisée
La forme et le style s'aperçoivent en direct : les cases d'option elles-mêmes montrent l'arrondi et le remplissage que vous choisissez.
Placement et apparence du bouton
Catégories exclues
Sous les paramètres du bouton, cochez toute catégorie de produits pour laquelle le bouton « Voir dans votre pièce » n'a pas de sens dans votre catalogue, par exemple les cartes-cadeaux, accessoires ou pièces détachées. Le bouton ne s'affichera pas sur les produits correspondant à une catégorie exclue.
Catégories exclues
Les catégories cochées sont exclues, le bouton ne s'affichera pas pour les produits correspondants.
Étape 3 : Copiez le script d'installation
Une fois les paramètres de détection et de bouton configurés et enregistrés, DecorViz génère un script d'installation unique lié à la clé d'installation de votre compte et à votre configuration actuelle. C'est le seul code à ajouter à votre boutique.
Copiez votre script
Toujours dans l'onglet Paramètres, faites défiler après « Enregistrer les modifications » jusqu'à la carte Script d'installation et cliquez sur « Copier ». Vous êtes maintenant prêt pour la Partie 2.
Script d'installation
Collez ceci une seule fois dans la balise </body> de votre thème. Un seul script couvre automatiquement toutes les pages produits.
L'onglet Paramètres comporte aussi un bouton « Régénérer la clé » à des fins de sécurité. La régénération invalide immédiatement l'ancienne clé, le bouton cessera donc d'apparaître sur votre boutique jusqu'à ce que vous mettiez à jour le script avec la nouvelle clé. Ne régénérez que lorsque vous êtes prêt à redéployer immédiatement.
Partie 2 : Configuration du site de votre boutique
Collez le script de l'Étape 3 dans votre boutique une seule fois, à un endroit chargé sur toutes les pages (un fichier de thème global, un pied de page, ou un panneau d'injection de code). Ne le placez pas uniquement sur une seule page produit : le moteur doit s'exécuter sur tout le site pour détecter et couvrir chaque produit.
Shopify
Ouvrez l'éditeur de code du thème
Dans votre administration Shopify, allez dans Boutique en ligne → Thèmes, puis cliquez sur le menu « ⋯ » à côté de votre thème actif et choisissez « Modifier le code ».
Ouvrez theme.liquid
Dans la liste des fichiers sous Layout, ouvrez theme.liquid. Ce fichier englobe toutes les pages de votre boutique, c'est pourquoi c'est le bon endroit pour un script à l'échelle du site.
Collez et enregistrez
Collez votre script d'installation DecorViz juste avant la balise de fermeture </body>, puis cliquez sur « Enregistrer ». Comme le script s'exécute sur chaque page via ce seul fichier, vous n'aurez plus jamais besoin de retoucher theme.liquid pour de nouveaux produits.
Le bouton « Voir dans votre pièce » apparaît désormais automatiquement sur chaque page produit de votre boutique Shopify.
WooCommerce
WooCommerce fonctionne sur WordPress, le script se place donc dans le pied de page global de votre thème, pas sur un seul produit.
Utilisez une extension d'en-tête/pied de page (recommandé)
Installez une extension légère comme « Insert Headers and Footers » ou « WPCode ». Collez le script DecorViz dans le champ des scripts du pied de page et enregistrez. Cela protège le script des mises à jour de thème.
Ou modifiez footer.php directement
Si vous préférez modifier les fichiers du thème, allez dans Apparence → Éditeur de fichiers de thème, ouvrez footer.php, et collez le script juste avant la balise de fermeture </body>. Utilisez un thème enfant si vous voulez que la modification survive aux mises à jour de thème.
Le code ajouté ici sera chargé juste avant la balise de fermeture </body>, sur chaque page de votre site.
Le bouton apparaît désormais sur chaque page produit WooCommerce, détecté automatiquement à partir de l'image de la galerie produit et du bouton Ajouter au panier.
Wix, Squarespace et autres plateformes
Le script est du HTML standard. Il fonctionne partout où vous pouvez ajouter du code personnalisé chargé sur chaque page.
| Plateforme | Comment ajouter le script |
|---|---|
| Wix | Dans l'éditeur Wix, allez dans Paramètres → Code personnalisé, ajoutez un nouveau code, configurez-le pour se charger sur toutes les pages en position Body - fin, et collez le script. |
| Squarespace | Allez dans Paramètres → Avancé → Injection de code, collez le script dans le champ Pied de page, et enregistrez. |
| Webflow | Allez dans Paramètres du projet → Code personnalisé → Code du pied de page, collez le script pour qu'il s'applique à tout le site, et publiez. |
| Site HTML personnalisé | Ajoutez le script au modèle ou layout partagé inclus par chaque page, juste avant la balise de fermeture </body>. |
| Autres plateformes | Cherchez une option « code personnalisé », « scripts de suivi » ou « code du pied de page » qui s'applique globalement, et collez-y le script. |
Contrairement à un pixel de suivi que vous ajouteriez à une seule landing page, ce script doit se charger sur chaque page produit. Utilisez un modèle global, un pied de page, ou un réglage d'injection de code « toutes les pages », pas une intégration sur une seule page.
Gestion des produits détectés
L'onglet Produits liste chaque page où le bouton est apparu, avec la catégorie, le nombre de vues, la date de dernière détection, l'image détectée, et un interrupteur pour désactiver le bouton sur cette page spécifique.
- Désactiver une page : utilisez cette option pour les produits que vous ne voulez pas visualiser, par exemple des articles discontinués ou en rupture de stock. Le changement s'applique immédiatement au prochain chargement de la page.
- Ajouter une URL manuellement : si vous voulez gérer une page avant qu'un acheteur n'ait déclenché sa détection, collez directement l'URL du produit via « Ajouter une URL produit » en haut de l'onglet.
- Actualiser : utilisez le bouton d'actualisation pour récupérer les dernières pages détectées et statistiques sans recharger le tableau de bord.
Ajouter une URL produit manuellement
Collez l'URL de n'importe quelle page produit pour gérer son bouton sans attendre la détection automatique.
Une page n'apparaît dans la liste Produits qu'une fois que le bouton y a réellement été affiché. Si un produit attendu n'apparaît pas, visitez vous-même cette page pour déclencher la détection, ou ajoutez l'URL manuellement.
Tester votre installation
Après avoir enregistré le script, vérifiez que tout fonctionne avant d'en informer vos clients :
- Visitez quelques pages produits en ligne, sur différents modèles (un article simple, un article avec de nombreuses variantes, et tout élément personnalisé).
- Vérifiez que le bouton apparaît à l'endroit attendu avec le texte, la couleur et le style choisis.
- Consultez l'onglet Produits pour confirmer que ces pages ont été détectées et enregistrées.
- Effectuez une génération de test complète : cliquez sur le bouton, téléversez une photo de pièce, et vérifiez que le résultat s'affiche correctement.
- Visitez une page qui n'est pas une page produit (votre page d'accueil ou un article de blog) et vérifiez que le bouton n'apparaît pas.
- Testez sur mobile. De nombreux acheteurs naviguent depuis leur téléphone.
Assurez-vous de consulter l'URL réelle de la boutique, pas l'éditeur de thème ni un aperçu brouillon. Vérifiez aussi que le domaine dans vos paramètres Storefront correspond exactement au domaine de votre boutique (sans https://, sans barre oblique finale, et vérifiez le réglage de correspondance des sous-domaines).
Dépannage
Le bouton n'apparaît nulle part
- Vérifiez que le script est dans un modèle global (theme.liquid, footer.php, injection de code à l'échelle du site), pas sur une seule page
- Vérifiez que « Activer le storefront » est activé dans l'onglet Paramètres
- Vérifiez que le domaine dans les Paramètres correspond exactement au domaine de votre boutique en ligne
- Si vous avez récemment régénéré votre clé d'installation, assurez-vous que le script en ligne utilise la nouvelle clé
- Videz le cache de votre navigateur et rechargez la page
Le bouton n'apparaît pas sur une page produit spécifique
- Réduisez légèrement le réglage Confiance min., ou définissez explicitement le Mode plateforme au lieu d'Auto
- Vérifiez que le produit n'est pas dans une Catégorie exclue
- Vérifiez que la page n'a pas été désactivée dans l'onglet Produits
- Si votre thème est fortement personnalisé, passez le Placement du bouton à un sélecteur CSS personnalisé
Le bouton apparaît sur des pages non-produits
- Augmentez le réglage Confiance min.
- Définissez explicitement le Mode plateforme plutôt que Détection automatique
Image produit incorrecte ou manquante
- Le moteur récupère l'image produit principale directement sur la page ; vérifiez que cette image se charge normalement pour les acheteurs (pas en chargement différé derrière un clic)
- Si votre thème utilise une structure d'image inhabituelle, contactez le support afin que nous puissions examiner le balisage de votre galerie
Le bouton apparaît mais la génération ne fonctionne pas
- Vérifiez que votre abonnement Storefront est actif
- Vérifiez qu'il vous reste des crédits de visualisation
Contactez notre équipe support à [email protected] ou utilisez le chat dans votre tableau de bord DecorViz.
Questions fréquentes
Dois-je configurer un widget pour chaque produit ?
Non. Storefront utilise un seul script à l'échelle du site. Le moteur détecte automatiquement les pages produits et l'image du produit, y compris les nouveaux produits ajoutés après l'installation.
Combien de storefronts puis-je créer ?
Un seul par compte DecorViz, lié à un domaine. Si vous gérez plusieurs boutiques, chacune a besoin de son propre compte.
Puis-je masquer le bouton sur certains produits ?
Oui. Désactivez des pages individuelles dans l'onglet Produits, ou excluez des catégories entières (comme les tapis, l'éclairage ou l'art mural) dans les Paramètres.
Que se passe-t-il si je régénère ma clé d'installation ?
L'ancienne clé cesse de fonctionner immédiatement. Le bouton disparaîtra de votre boutique jusqu'à ce que vous mettiez à jour le script en ligne avec la nouvelle clé, ne régénérez donc que lorsque vous êtes prêt à redéployer immédiatement.
Est-ce que ça fonctionne sur d'autres plateformes que Shopify et WooCommerce ?
Oui. La détection générique couvre la plupart des thèmes e-commerce, et vous pouvez définir un sélecteur CSS personnalisé dans les Paramètres si votre thème nécessite un placement précis.
Les marchands peuvent-ils voir les photos de pièce des acheteurs ?
Non. Les photos de pièce des acheteurs servent uniquement à générer l'aperçu. Les marchands ne peuvent ni voir, ni parcourir, ni télécharger ces photos depuis le tableau de bord Storefront.
Est-ce que ça utilise mes crédits de visualisation ?
Oui, chaque visualisation effectuée par un acheteur utilise des crédits de votre forfait Storefront.
Est-ce que ça va ralentir ma boutique ?
Non. Le script se charge de façon asynchrone et ne bloque pas l'affichage de votre page.
Prêt à commencer ?
Installez Storefront une seule fois et laissez DecorViz gérer la détection des produits sur toute votre boutique.