Avant de commencer
DecorViz Storefront détecte les pages produits compatibles, lit l'image du produit et ajoute un bouton d'aperçu dans la pièce. Vos clients ouvrent le widget, envoient une photo de leur pièce et génèrent un aperçu sans créer de compte DecorViz.
- Une boutique WooCommerce en ligne avec des photos produits nettes.
- Un compte DecorViz avec accès à Storefront et des crédits d'aperçu disponibles. Vérifiez votre statut dans le tableau de bord Storefront.
- Un accès administrateur à WordPress, ou l'aide de la personne qui gère les scripts de votre site.
L'intégration WooCommerce utilise un script fourni dans le tableau de bord DecorViz. Vous pouvez l'installer avec votre outil actuel de code de pied de page pour tout le site, ou avec une extension WordPress qui accepte les scripts HTML.
Créez d'abord votre storefront dans DecorViz. Copiez ensuite son script dans WordPress. Testez enfin le bouton sur une page produit en ligne. Les exemples ci-dessous montrent ce qu'il faut vérifier à chaque étape.
1. Connecter votre boutique WooCommerce
Créer votre storefront
Connectez-vous et ouvrez le tableau de bord DecorViz Storefront. Lors de votre première visite, vous verrez Créer votre storefront.
Saisissez le domaine de votre boutique
Saisissez uniquement le domaine du site, par exemple votreboutique.com. N'ajoutez pas https:// ni le chemin d'une page produit comme /shop/tapis-bleu/.
Choisissez la plateforme
Pour une boutique WooCommerce, sélectionnez WooCommerce : DecorViz cherchera d'abord le titre du produit, l'image de la galerie et les détails du produit propres à WooCommerce. Détection automatique prend aussi en charge WooCommerce, vous pouvez donc la garder si la détection fonctionne déjà correctement. Laissez Correspondance de domaine sur Domaine exact pour une boutique qui utilise un seul nom d'hôte.
Cliquez sur Créer le storefront
Votre storefront est maintenant relié à ce domaine. Si vous avez déjà un storefront, ouvrez Paramètres pour vérifier ces valeurs.
Créer votre storefront
Écran d'exemple. Saisissez le domaine de votre propre boutique dans le tableau de bord.
Si votre boutique se trouve sur shop.votreboutique.com, saisissez ce nom d'hôte. Vérifiez les réglages de correspondance de domaine si vos pages produits sont aussi servies sur d'autres sous-domaines.
Activer Storefront et copier votre script
Ouvrez l'onglet Paramètres. Vérifiez que Activer le storefront est activé, puis cliquez sur Enregistrer les modifications. Descendez jusqu'à la carte Extrait d'installation et cliquez sur Copier.
Extrait d'installation
<script src="...auto-inject.js" data-key="..." async></script>CopierÉcran d'exemple. La carte Extrait d'installation se trouve sous les paramètres et le bouton Enregistrer les modifications.
Copiez le script depuis votre tableau de bord, pas depuis ce guide. Votre tableau de bord inclut automatiquement la bonne clé d'installation. L'exemple ci-dessous montre seulement le format.
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>Vous n'avez besoin que de Copier. Le bouton Régénérer la clé remplace la clé et l'ancien script cesse de fonctionner.
2. Installer le script dans WordPress
Utilisez un champ de code de pied de page qui s'applique à tout le site, afin que le script se charge sur vos pages produits. Si votre site dispose déjà d'un outil pour cela, collez-y le script complet et enregistrez.
Ajouter une extension de code de pied de page
Installez et activez WPCode
Dans l'administration WordPress, ouvrez le menu Extensions et ajoutez une nouvelle extension. Recherchez WPCode - Insert Headers and Footers, cliquez sur Installer maintenant, puis sur Activer. Si WPCode est déjà actif, passez à l'étape suivante.
Coller le script dans Footer
Ouvrez Header & Footer
Allez dans Code Snippets → Header & Footer. Descendez jusqu'au champ Footer. Selon la langue de votre WordPress, ces menus peuvent apparaître traduits.
Collez et enregistrez
Collez dans Footer le script complet copié depuis DecorViz, de <script à </script>. Conservez le code déjà présent dans le champ et ajoutez DecorViz sur une nouvelle ligne. Cliquez sur Save Changes.
Code Snippets → Header & Footer
Header & Footer
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>Collez ici votre propre script copié. Conservez les scripts de pied de page existants.
Écran d'exemple. Les libellés et la mise en page peuvent varier selon la version et la langue de WPCode.
Vider le cache de votre site
Si vous utilisez une extension de cache WordPress, videz ou purgez son cache. Si votre hébergeur ou votre CDN met aussi les pages en cache, videz également ce cache. Ouvrez ensuite une page produit en ligne dans une fenêtre de navigation privée pour vérifier la page mise à jour.
WPCode propose des champs de script globaux prévus pour cela. Consultez ses instructions officielles Header & Footer (en anglais) pour l'interface actuelle.
Utilisez une seule méthode d'installation. Le champ de pied de page accepte le script HTML complet, avec les balises d'ouverture et de fermeture. Les descriptions de produits et les blocs d'une page isolée ne s'appliquent pas à tout le site.
Si votre développeur gère l'installation
Demandez-lui d'ajouter le script du tableau de bord dans le pied de page commun du site ou via le hook de pied de page WordPress, afin qu'il se charge sur les pages produits. Une insertion par extension résiste aux changements de thème ; si le script se trouve dans un thème, vérifiez de nouveau l'installation lorsque vous changez de thème.
3. Personnaliser votre bouton d'aperçu
Revenez dans Paramètres dans le tableau de bord DecorViz. Choisissez le texte, la couleur, la forme et l'emplacement du bouton, puis enregistrez. Utilisez une formulation comme « Voir dans votre pièce » pour que vos clients sachent à quoi s'attendre.
Emplacement et apparence du bouton
Réglages d'exemple. Choisissez le texte et l'apparence qui conviennent à votre boutique.
Pour un premier test : commencez avec Automatique (près du bouton Ajouter au panier). Si votre thème rend cet emplacement peu pratique, essayez Sous l'image du produit. Enregistrez et actualisez votre page produit pour voir le changement.
Vérifiez les catégories exclues et l'onglet Produits. Si un produit compatible ne doit pas proposer d'aperçu, désactivez-le à cet endroit. Commencez avec les réglages de détection par défaut et testez avant d'ajuster le seuil de confiance.
Vérifiez que Rugs & Carpets n'est pas coché dans Catégories exclues. Les noms de catégories s'affichent en anglais dans le tableau de bord. Les catégories cochées sont exclues, leurs produits n'affichent donc pas le bouton.
Les galeries WooCommerce personnalisées et les constructeurs de pages peuvent modifier l'emplacement du bouton ou l'image détectée. Vérifiez l'emplacement sur votre propre thème, y compris sur mobile.
4. Tester une page produit en ligne
Choisissez un produit avec une photo principale nette, comme un tapis, un canapé ou une chaise. Ouvrez l'URL publique du produit que visitent vos clients, et non un lien d'éditeur ou d'aperçu WordPress.
- Ouvrez une page produit en ligne dans une fenêtre de navigation privée, avec le nom d'hôte enregistré dans DecorViz.
- Vérifiez que le bouton d'aperçu apparaît à l'emplacement choisi. Contrôlez sur ordinateur et sur mobile.
- Ouvrez le widget et vérifiez qu'il utilise la bonne photo du produit. Pour les produits avec variations, changez la sélection et vérifiez l'image avant de générer.
- Envoyez une photo de pièce et générez un aperçu. Cela utilise un crédit d'aperçu.
- Vérifiez que la galerie, le choix des variations et le bouton Ajouter au panier fonctionnent toujours.
- Ouvrez l'onglet Produits dans DecorViz et vérifiez que la page visitée y figure. Contrôlez aussi la page d'accueil ou une page de blog, où le bouton d'aperçu ne doit pas apparaître.
Le bouton apparaît sur la page produit, le widget affiche la bonne image du produit et un aperçu se génère correctement. Refaites la vérification sur mobile avant de le proposer à vos clients.
Un aperçu dans la pièce aide vos clients à juger l'apparence. Les dimensions du produit et les informations d'encombrement restent la référence pour vérifier qu'il convient à l'espace.
Dépannage
Le bouton n'apparaît pas
- Vérifiez que le script est enregistré dans le pied de page global et qu'il contient votre vraie clé d'installation.
- Dans Paramètres de DecorViz, vérifiez que Activer le storefront est activé et cliquez sur Enregistrer les modifications.
- Vérifiez que le nom d'hôte du site en ligne correspond à vos paramètres Storefront.
- Videz les caches de pages et du CDN, puis rechargez dans une fenêtre privée.
- Vérifiez si le produit ou sa catégorie est exclu dans DecorViz.
- Vérifiez que le nom du produit, sa description courte ou sa catégorie produit nomme l'article, par exemple tapis, canapé ou lampe. DecorViz utilise ces mots pour reconnaître le produit. Si aucun n'apparaît sur la page, ajoutez le mot à la description courte ou à la catégorie.
- Si une extension de performance retarde le JavaScript jusqu'à une interaction, excluez le script DecorViz de ce délai et testez de nouveau.
La mauvaise image est sélectionnée, ou le bouton est mal placé
Vérifiez que la plateforme est réglée sur WooCommerce et essayez une autre page produit. Revoyez le réglage d'emplacement du bouton. Si une galerie personnalisée ou un constructeur de pages pose encore problème, contactez DecorViz avec l'URL du produit en ligne, le nom de votre thème et la galerie ou le constructeur que vous utilisez.
Le widget s'ouvre, mais l'aperçu échoue
Vérifiez votre accès Storefront et vos crédits restants. Essayez une photo de pièce nette et vérifiez que l'image du produit se charge. Si le problème persiste, envoyez l'URL du produit et le message d'erreur au support.
Le bouton apparaît deux fois
Vérifiez si le script a été ajouté à deux endroits, par exemple dans WPCode et dans le pied de page de votre thème. Gardez une seule installation, supprimez le doublon, videz vos caches et rechargez.
Vous avez besoin d'aide avec votre thème
Contactez-nous avec l'URL de votre page produit en ligne, le nom de votre thème WordPress et une capture d'écran du problème. Indiquez aussi le constructeur de pages ou l'extension de galerie produit que vous utilisez, pour que nous puissions vérifier la bonne mise en page.
Questions fréquentes
Dois-je configurer chaque produit ?
Non. Le script installé sur tout le site détecte automatiquement les pages produits compatibles. Vous pouvez revoir les produits détectés et les exclusions dans le tableau de bord.
Ai-je besoin de modèles 3D ?
Non. DecorViz utilise les photos produits déjà présentes sur vos pages produits et une photo de pièce envoyée par le client.
Puis-je utiliser une autre extension de scripts WordPress ?
Oui. Utilisez un outil qui accepte le script HTML complet et l'insère sur tout le site public de la boutique. Vérifiez que le script se charge bien sur vos pages produits.
Comment retirer Storefront ?
Retirez uniquement le script DecorViz du champ de pied de page ou de l'endroit où il est installé, enregistrez et videz vos caches. Le bouton disparaît dès que les pages mises à jour sont servies.
Que se passe-t-il si je régénère ma clé d'installation ?
L'ancienne clé cesse de fonctionner. Remplacez immédiatement le script installé par le nouveau script du tableau de bord, puis videz les caches et testez de nouveau.
Pour les autres réglages du tableau de bord, consultez le guide d'installation Storefront général. Pour Shopify, utilisez le guide de l'application Shopify.
Connectez votre boutique WooCommerce
Récupérez votre script d'installation et proposez un aperçu dans la pièce sur vos pages produits.