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.
Ce guide couvre WooCommerce, Wix, Squarespace et les sites codés sur mesure : vous configurez Storefront dans le tableau de bord web DecorViz et collez une balise script dans un modèle global. Il n'y a aucune étape à répéter pour chaque produit. Une fois le script en ligne, toutes les pages produits de votre boutique sont couvertes.
Pour un pas-à-pas WordPress détaillé, suivez le guide d'installation Storefront pour WooCommerce.
Les boutiques Shopify n'utilisent pas le script. Installez l'application DecorViz: Furniture Visualizer depuis le Shopify App Store et suivez plutôt le guide de l'application Shopify.
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. Dans l’application, il se trouve aussi dans le menu du compte, en haut à droite. Le menu de gauche comporte quatre pages : Synthèse, Produits, Apparence et Paramètres.
É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, Squarespace, 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é).
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
La détection des produits se règle sur la page Paramètres, et l’apparence et la position du bouton sur la page Apparence. Les réglages par défaut conviennent à la plupart des boutiques, mais vérifiez-les avant la mise en ligne.
Paramètres de détection
Sur la page Paramètres, vérifiez que le Mode de plateforme correspond à votre boutique (ou laissez Détection automatique). Ajustez la Confiance minimale si nécessaire : une valeur basse détecte plus de pages produits mais risque d’afficher le bouton sur d’autres pages ; une valeur haute est plus stricte. 0,50 est la valeur recommandée.
Apparence et position du bouton
Sur la page Apparence, l’Aperçu montre le bouton à mesure que vous le modifiez :
- Texte du bouton : le texte affiché aux clients
- Style : Plein ou Contour
- Coins : Arrondis ou Carrés
- Couleur, et une Ombre portée activée ou non
- Position : Au-dessus du panier (recommandé), Sous le panier, Sous l’image du produit, sur l’image (au centre, en bas à gauche ou en bas à droite), flottant (en bas à droite ou en bas à gauche), ou Position personnalisée (avancé)
- Avec une position personnalisée, saisissez un Sélecteur CSS et choisissez Placer le bouton : avant, après ou dans cet élément
Cliquez sur Enregistrer les modifications une fois terminé.
É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
Sur la page Paramètres, descendez sous Enregistrer les modifications jusqu’à la carte Code d’installation et cliquez sur Copier. Vous êtes prêt pour la partie 2.
La carte Code d’installation comporte aussi un bouton Renouveler la clé pour des raisons de sécurité. Le renouvellement invalide immédiatement l’ancienne clé : le bouton disparaît de votre boutique jusqu’à ce que vous mettiez à jour le script avec la nouvelle clé. Ne renouvelez la clé que si vous êtes prêt à redéployer tout de suite.
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.
Les boutiques Shopify installent l'application DecorViz: Furniture Visualizer depuis le Shopify App Store au lieu de coller un script, et configurent tout dans l'admin Shopify. Suivez le guide de l'application 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 | Dans le tableau de bord Squarespace, ouvrez Pages → Code personnalisé → Injection de code. Sur la version 7.0, cherchez dans Outils du site web. Les libellés peuvent varier selon la version du site. Utilisez le champ Pied de page (Footer) qui s’applique à tout le site. Collez le script complet copié depuis DecorViz, y compris les balises <script>. Conservez le code déjà présent, ajoutez votre script sur une nouvelle ligne, puis cliquez sur Enregistrer. Guide Squarespace détaillé |
| 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.
Partie 3 : Gérer vos produits
Une fois le script en ligne, ouvrez la page Produits. Elle liste chaque page produit où le bouton est apparu, regroupée par catégorie, avec le nombre de vues, la date de dernière détection, la photo du produit et un interrupteur Bouton. Les changements s’appliquent au prochain chargement de la page.
Désactiver le bouton pour une page ou une catégorie
- Une seule page : désactivez son Bouton, par exemple pour des articles discontinués ou en rupture de stock.
- Une catégorie entière : désactivez la catégorie pour retirer le bouton de tous ses produits, y compris ceux qui apparaîtront plus tard. Pratique pour les cartes cadeaux, les accessoires ou les pièces détachées.
Ajouter vous-même une page produit
Pour gérer une page avant qu’un client ne l’ait visitée, ou une page que DecorViz ne reconnaît pas comme produit, collez son URL dans Ajouter une URL produit en haut de la page et cliquez sur Ajouter l’URL. Actualiser récupère les dernières pages détectées sans recharger le tableau de bord.
Corriger la photo du produit
Le bouton utilise la photo principale de la page produit. Si DecorViz a choisi la mauvaise photo, ou n’en a trouvé aucune, cliquez sur Remplacer (ou Définir l’image) sous la photo du produit et importez la bonne. Utiliser l’image de la page revient à la photo de la page produit.
Options de produit : teintes, couleurs et tissus
Si un produit existe en plusieurs teintes de bois, couleurs ou tissus, ajoutez chacune comme option pour que vos clients puissent la voir dans leur pièce. Cliquez sur Ajouter des options sous la photo du produit.
- La photo de la page vient toujours en premier. Ajoutez jusqu’à 10 autres photos, une par option (JPG, PNG ou WebP).
- Donnez un nom à chaque photo, par exemple Noyer ou Velours émeraude. Les noms sont facultatifs ; une photo sans nom n’en affiche aucun.
- Réglez l’ordre avec les flèches, puis cliquez sur Enregistrer.
Dans la fenêtre d’aperçu, les clients passent d’une photo à l’autre avec les flèches, voient le nom de chaque option et génèrent l’aperçu avec celle qu’ils choisissent. Quand un produit a des options, le lien indique leur nombre, par exemple Options (2).
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 la page Produits pour vérifier 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 (footer.php, injection de code à l'échelle du site), pas sur une seule page
- Vérifiez que Activer le Storefront est activé sur la page Paramètres
- Vérifiez que le domaine sur la page 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 la Confiance minimale, ou définissez explicitement le Mode de plateforme au lieu de Détection automatique
- Vérifiez que la catégorie du produit n'est pas désactivée sur la page Produits
- Vérifiez que la page n'a pas été désactivée sur la page Produits
- Si votre thème est fortement personnalisé, choisissez Position personnalisée (avancé) sur la page Apparence et saisissez un sélecteur CSS
Le bouton apparaît sur des pages non-produits
- Augmentez la Confiance minimale
- Définissez explicitement le Mode de 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.
Je gère une boutique Shopify. Puis-je utiliser ce guide ?
Non, et ce n'est pas nécessaire. Les boutiques Shopify installent l'application DecorViz depuis le Shopify App Store au lieu de coller un extrait de code, et configurent le bouton dans l'admin Shopify. Suivez le guide de l'application Shopify.
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 une par une sur la page Produits, ou désactivez une catégorie entière (tapis, luminaires ou décoration murale, par exemple) sur la même page.
Les clients peuvent-ils essayer différentes teintes, couleurs ou tissus ?
Oui. Sur la page Produits, cliquez sur Ajouter des options sous la photo d’un produit et ajoutez une photo pour chaque teinte, couleur ou tissu. Les clients passent de l’une à l’autre dans la fenêtre d’aperçu et voient celle qu’ils choisissent dans leur pièce.
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 ?
Squarespace dispose de son propre réglage de détection. Oui. La détection générique couvre la plupart des thèmes e-commerce, dont Wix, Webflow et les sites codés sur mesure, et vous pouvez définir un sélecteur CSS personnalisé sur la page Apparence si votre thème demande 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.