Avant de commencer
DecorViz Storefront ajoute un bouton d’aperçu aux pages produits compatibles. Vos clients utilisent vos photos produits et une photo de leur pièce, sans créer de compte DecorViz.
- Une boutique Squarespace publiée avec des photos produits nettes.
- Un compte DecorViz avec accès à Storefront et des crédits disponibles.
- Un accès au panneau Injection de code de votre site Squarespace.
L’injection de code est disponible avec Core, Plus et Advanced, ainsi qu’avec les anciens forfaits Business, Commerce Basic et Commerce Advanced compatibles. Basic et l’ancien forfait Personal ne proposent pas cette méthode.
1. Sélectionner Squarespace dans DecorViz
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/.
Choisir Squarespace dans Plateforme
Dans Créer votre storefront, ouvrez la liste Plateforme et sélectionnez Squarespace. Indiquez le domaine public de votre boutique, conservez la correspondance exacte si vous utilisez un seul nom d’hôte, puis cliquez sur Créer le storefront.
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.
Votre storefront est déjà créé ?
Ouvrez Storefront → Paramètres → Détection. Réglez Mode de plateforme sur Squarespace, puis cliquez sur Enregistrer les modifications. Il n’est pas nécessaire de créer un autre storefront ni de remplacer le script installé.
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 la page Paramètres. Vérifiez que Activer le Storefront est activé, puis cliquez sur Enregistrer les modifications. Descendez jusqu'à la carte Code d’installation et cliquez sur Copier.
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 Renouveler la clé remplace la clé et l'ancien script cesse de fonctionner.
2. Installer avec l’injection de code Squarespace
Ouvrir Injection de code
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.
Coller le script dans Pied de page
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.
Code Injection
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>Illustration des champs à utiliser. La présentation peut varier.
N’ajoutez pas le script dans chaque fiche produit ou bloc Code. La page de paiement n’accepte pas l’injection de code. Le bouton d’aperçu s’utilise sur la page produit.
Ouvrez ensuite une page produit publiée dans une fenêtre privée, sans être connecté à l’éditeur Squarespace.
3. Personnaliser votre bouton d'aperçu
Ouvrez la page Apparence du tableau de bord DecorViz. Choisissez le texte, le style, les coins, la couleur et la position du bouton, puis cliquez sur Enregistrer les modifications. Utilisez une formulation comme « Voir dans votre pièce » pour que vos clients sachent à quoi s'attendre.
Pour un premier test : commencez avec Au-dessus du 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.
Sur la page Produits, vérifiez les interrupteurs des catégories et la liste des produits. Si un produit compatible ne doit pas proposer d'aperçu, désactivez son bouton à cet endroit. Commencez avec les réglages de détection par défaut et testez avant d'ajuster la Confiance minimale sur la page Paramètres.
Sur la page Produits, vérifiez que l'interrupteur de la catégorie des tapis est activé. Les produits d'une catégorie désactivée n'affichent pas le bouton.
Si un produit existe en plusieurs teintes, couleurs ou tissus, cliquez sur Ajouter des options sous sa photo sur la page Produits et ajoutez une photo pour chacune. Les clients passent de l’une à l’autre dans la fenêtre d’aperçu. Voir Options de produit dans le guide Storefront.
Les galeries Squarespace 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 le site publié
Vérifiez les différentes gammes de produits, sur ordinateur et mobile. Utilisez les adresses publiques que vos clients visitent.
- Vérifiez la position du bouton et ouvrez l’aperçu.
- Contrôlez la photo du produit et les options ajoutées dans DecorViz. Le sélecteur de variantes Squarespace ne configure pas automatiquement ces photos.
- Envoyez une photo de pièce et générez un aperçu. Cette action utilise un crédit.
- Vérifiez que la galerie, les variantes et le bouton Ajouter au panier fonctionnent toujours.
- Dans Produits, vérifiez la catégorie et l’emplacement du produit : mur, sol ou surface. Le bouton ne doit pas apparaître sur l’accueil ou les pages de collection.
Dépannage
Injection de code est introuvable
Vérifiez votre forfait et vos droits d’accès au site. Demandez au propriétaire du site de vous aider si ce panneau n’est pas accessible.
Le bouton ne s’affiche pas
Vérifiez le script dans Pied de page, la clé d’installation, le domaine public et l’activation de Storefront. Sélectionnez Squarespace dans Paramètres, enregistrez et testez hors de l’éditeur. Vérifiez les interrupteurs du produit et de sa catégorie dans Produits.
La photo, la catégorie ou la position est incorrecte
Dans Produits, choisissez la catégorie et la photo adaptées. Ajoutez des options pour les différentes finitions. Dans Apparence, ajustez la position du bouton, enregistrez et vérifiez sur mobile.
La génération échoue
Vérifiez votre accès Storefront et vos crédits. Si le problème persiste, envoyez au support l’URL du produit et le message affiché.
Questions fréquentes
Faut-il installer le script sur chaque produit ?
Non. Une seule installation dans le champ Pied de page du site suffit. Vérifiez ensuite les produits détectés dans DecorViz.
Faut-il une extension Squarespace ou des modèles 3D ?
Non. DecorViz utilise son script d’installation et vos photos produits existantes.
Peut-on proposer plusieurs finitions ?
Oui. Dans Produits, utilisez Ajouter des options pour fournir une photo par finition. Les clients choisissent ces photos dans la fenêtre d’aperçu.
Faut-il tester dans l’éditeur ?
Utilisez les pages produits publiées, dans une fenêtre privée. L’éditeur peut traiter les scripts personnalisés différemment.
Comment retirer Storefront ?
Supprimez uniquement le script DecorViz du champ Pied de page et enregistrez. Conservez les autres scripts. Si vous renouvelez votre clé, remplacez immédiatement l’ancien script par le nouveau.
Connectez votre boutique Squarespace
Récupérez votre script d'installation et proposez un aperçu dans la pièce sur vos pages produits.