Ajouter le Try-On virtuel à Squarespace

Squarespace n'a jamais été conçue comme une plateforme e-commerce ouverte — elle sacrifie l'extensibilité au profit du raffinement, ce qui explique pourquoi ajouter le Try-On virtuel demande une approche différente de celle de Shopify. Les marchands qui se trompent finissent avec un widget qui se charge sur la page d'accueil mais n'atteint jamais la page produit où il doit réellement se trouver. Bien faire les choses suppose de comprendre le modèle d'injection de code de Squarespace avant d'écrire la moindre ligne.

Pourquoi Squarespace complique les choses

Squarespace n'expose pas d'écosystème d'applications natif comme le fait Shopify. Il n'existe pas d'équivalent du Shopify App Store où un outil de Try-On s'installerait dans le thème, se connecterait au panier et lirait automatiquement les variantes produit. À la place, Squarespace donne aux propriétaires de sites l'injection de code (Code Injection) — un panneau de réglages où vous pouvez insérer du HTML, CSS et JavaScript personnalisés dans l'en-tête, le pied de page ou des sections de page individuelles.

Cette distinction compte. Sur Squarespace, vous n'installez pas une application ; vous placez manuellement une balise script en lui indiquant, page par page, où s'afficher. Commerce (le système de boutique intégré de Squarespace) limite également la profondeur d'interaction du code tiers avec les données produit — il n'existe pas d'API produit publique exposée aux scripts côté client comme le font les templates Liquid de Shopify avec product.variants. Toute intégration doit contourner cela en lisant ce qui est visible dans le DOM ou en associant des identifiants produit que vous fournissez manuellement.

Où réside vraiment l'injection de code

L'injection de code sur Squarespace comporte trois niveaux, et choisir le bon détermine si votre bouton de Try-On apparaît partout ou nulle part.

Le schéma qui fonctionne de manière fiable : chargez le script du widget YourSizer globalement dans l'injection de pied de page du site (Settings → Advanced → Code Injection), puis placez un petit extrait d'intégration — un <div> avec un identifiant produit — dans la description du produit individuel ou dans un bloc de code sur cette page. Cela permet au script lourd de se charger une fois par visite du site plutôt qu'une fois par page produit, ce qui compte pour la vitesse de page sur les templates déjà lourds en JavaScript de Squarespace.

Travailler dans la structure de page produit de Commerce

Les pages produit Squarespace sont construites à partir de blocs de contenu fixes, et Commerce (plans Basic ou Advanced) limite la réorganisation possible. En général, vous ne pouvez pas injecter directement un script dans la zone du bouton « Ajouter au panier » sans utiliser un bloc de code, que Squarespace traite comme un élément de contenu plutôt que fonctionnel.

La solution pratique consiste à ajouter un bloc de code juste au-dessus ou en dessous du bouton Ajouter au panier dans l'éditeur de contenu de la page produit, puis à faire en sorte que ce bloc affiche un bouton « Essayer » qui ouvre le widget dans une modale ou un panneau latéral. Comme les templates de produit Squarespace varient (Standard, Modern et les anciennes versions diffèrent toutes), testez ce placement sur au moins deux types de produits avant de supposer qu'il s'affichera de façon cohérente sur tout le catalogue — un bloc bien positionné sous « Ajouter au panier » sur un template peut se retrouver sous la section avis sur un autre.

Associer les produits sans API produit

Comme Squarespace n'expose pas par défaut un flux produit accessible côté client, associer un widget de Try-On à la bonne image produit et au bon guide des tailles nécessite de transmettre explicitement des identifiants plutôt que de compter sur la détection automatique. En pratique, cela signifie utiliser le SKU du produit ou l'identifiant produit généré par Squarespace comme attribut de données sur le <div> d'intégration, afin que le widget sache quel vêtement et quelles données de taille charger sans scraper la page.

C'est une charge plus lourde qu'une intégration Shopify, où la plateforme transmet automatiquement du JSON produit structuré. Les marchands avec de grands catalogues devraient prévoir de traiter cela par lots — exporter les SKU produit depuis Commerce et les faire correspondre aux fiches produit du widget — plutôt que d'intégrer un produit à la fois manuellement.

Tester l'intégration avant sa mise en ligne

Ne considérez pas le premier affichage réussi comme une fin en soi. L'éditeur en direct de Squarespace et le site publié peuvent se comporter différemment, et le rendu mobile sur les templates Squarespace est une source fréquente de ruptures de mise en page pour le code injecté.

Une courte checklist qui détecte la plupart des problèmes avant le lancement :

• Chargez la page publiée (pas l'aperçu de l'éditeur) à la fois sur ordinateur et sur un vrai appareil mobile — les scripts injectés échouent parfois silencieusement en mode aperçu.
• Confirmez que le bouton de Try-On apparaît sur chaque template produit pertinent, pas seulement celui testé en premier.
• Vérifiez que la modale ou le panneau n'est pas rogné par l'en-tête collant ou la barre d'annonce de Squarespace.
• Vérifiez que le widget se charge toujours après un changement de template Squarespace ou de plan Commerce, car le code injecté peut être réinitialisé lors de mises à jour majeures du site.

Étant donné que l'habillement et la chaussure affichent déjà des taux de retour bien supérieurs aux autres catégories de retail — la chaussure se situant particulièrement en tête — un widget de Try-On qui échoue silencieusement sur mobile représente un coût réel, pas un simple bug cosmétique.

Où se situe YourSizer

Le widget de YourSizer est conçu pour être intégré précisément via ce type d'injection manuelle, ce qui en fait une solution adaptée aux contraintes de Squarespace. Le script principal se charge une fois pour tout le site, et les intégrations produit individuelles sont des extraits légers qui référencent un identifiant produit plutôt que de dépendre d'une API produit en direct — ce qui correspond à la manière dont Squarespace Commerce expose réellement les données.

Pour les marchands utilisant Squarespace plutôt que Shopify ou une configuration headless, cela signifie que le travail de mise en place concerne surtout le placement (positionner correctement le bloc de code selon le template) et le mapping produit (associer les SKU aux données de taille et de coupe), et non du développement sur mesure. La contrepartie est que les changements de catalogue continus nécessitent de revoir le placement après chaque mise à jour de template, une étape de maintenance spécifique à Squarespace qu'il vaut la peine de budgéter. Si vous hésitez entre le Try-On virtuel et un parcours de recommandation de taille plus simple pour votre catalogue, il vaut la peine de lire comment le Try-On virtuel se compare à la recommandation de taille avant de vous engager dans une intégration complète.

Questions Fréquentes

Puis-je ajouter le Try-On virtuel à Squarespace sans développeur ?

Pour un seul produit ou un petit catalogue, oui — l'injection de code nécessite seulement de coller un script dans le panneau Advanced Settings et d'ajouter un bloc de code à chaque page produit, ce que la plupart des propriétaires de boutique peuvent faire sans développement sur mesure. Les grands catalogues bénéficient surtout de l'aide d'un développeur pour l'étape de mapping des identifiants produit, car étiqueter manuellement des dizaines ou des centaines de SKU est fastidieux même si chaque étape individuelle est simple.

Squarespace Commerce prend-il en charge nativement les applications de Try-On tierces ?

Non. Contrairement à Shopify, Squarespace n'a pas de marketplace d'applications qui installe des outils de Try-On directement dans les pages produit. Tout passe par l'injection de code et les blocs de code, ce qui rend l'intégration plus proche d'une intégration manuelle que d'une installation d'application, et elle doit être revalidée à chaque mise à jour de template Squarespace.

Ajouter un widget de Try-On ralentira-t-il mon site Squarespace ?

Cela peut arriver si le script se charge sur chaque page au lieu d'être différé aux pages produit où il est réellement utilisé. Charger le script principal une seule fois dans l'injection de pied de page du site et garder les intégrations propres à chaque produit légères limite l'impact sur les performances, mais il vaut la peine de vérifier la vitesse de page avant et après avec un outil comme PageSpeed Insights de Google ou les analytics propres de Squarespace.

Quelle est la différence entre l'injection de code et une intégration en page produit ?

L'injection de code est le mécanisme — le panneau de réglages Squarespace où vous collez des balises script — tandis qu'une intégration en page produit est l'extrait spécifique placé sur une fiche produit individuelle qui affiche le bouton de Try-On et le connecte aux données de ce produit. Vous utilisez généralement l'injection de code une fois, pour tout le site, afin de charger le script sous-jacent, puis vous ajoutez une petite intégration sur chaque page produit où vous souhaitez que le bouton apparaisse.

Conclusion

L'absence d'écosystème d'applications natif chez Squarespace fait du Try-On virtuel une construction plutôt manuelle qu'une installation en un clic, mais les mécanismes sous-jacents — injection de code, intégrations au niveau produit et tests de template minutieux — restent tout à fait accessibles pour la plupart des propriétaires de boutique. Le temps de mise en place supplémentaire en amont tend à se rentabiliser par une baisse des retours liés aux tailles une fois le widget en ligne et vérifié sur tous les templates, ce qui justifie l'approche délibérée, page par page, exigée par Squarespace.