Explorer l'expérience ↗
Retour au centre d'aide
🧩Croissance

Intégrer votre catalogue

Afficher votre catalogue sur votre propre site

Vous avez déjà un site — WordPress, Wix, Shopify, Squarespace, Webflow ou du HTML sur mesure. Votre catalogue Vitrin peut y vivre à l'intérieur, sur vos propres pages, à votre propre adresse. Vos visiteurs ne quittent jamais votre site, et vous continuez à recevoir vos demandes de devis dans Vitrin.

→ Ouvrir la Diffusion


🔗 Une ligne de code, rien d'autre

Dans Réglages → Catalogue → Diffusion, la carte « Intégrez votre catalogue » contient un code déjà rempli avec l'adresse de votre boutique. Cliquez sur Copier le code, collez-le sur votre site à l'endroit exact où le catalogue doit apparaître.

<script src="https://vitrin-catalog.com/widget.js" data-shop="votre-boutique"></script>

C'est tout. Pas de plugin à installer, pas de compte à connecter, pas de mise à jour à faire ensuite : quand vous modifiez votre catalogue dans Vitrin et que vous publiez, votre site affiche la nouvelle version automatiquement.

ASTUCE

Le code fonctionne sur tous les plans, y compris le plan gratuit. Copiez-le tel quel — la partie data-shop contient déjà l'adresse de votre catalogue, ne la modifiez pas.


🌍 Où coller le code, selon votre site

WordPress

Ajoutez un bloc HTML personnalisé dans l'éditeur de page, puis collez le code dedans.

ATTENTION

Sur WordPress.com, les balises de script sont bloquées sur l'offre gratuite. Il vous faut une offre payante, ou un site WordPress.org auto-hébergé. C'est une limite de WordPress, pas de Vitrin.

Wix

Ajouter → Intégrer → Intégrer un site, puis collez le code dans le champ prévu.

Shopify

Boutique en ligne → Thèmes → Modifier le code, puis collez le code dans le fichier de la page où vous voulez voir le catalogue.

Squarespace

Ajouter un bloc → Code, puis collez le code.

ATTENTION

Squarespace n'autorise les blocs de code qu'à partir de l'offre Business. En dessous, le code ne s'exécutera pas.

Webflow

Ajoutez un élément Embed, puis collez le code à l'intérieur.

Un autre site

Le code marche dans n'importe quelle zone HTML : collez-le là où vous voulez que le catalogue apparaisse. Si votre éditeur ne propose aucun champ « HTML » ou « code », c'est que la plateforme les bloque — vérifiez son offre.


👀 Ce que voient vos visiteurs

Le catalogue s'affiche dans votre page et se cale en haut de l'écran dès que le visiteur descend : il reste visible pendant toute la navigation, et c'est le catalogue qui défile à l'intérieur.

ÉlémentComportement dans votre site
Votre logoMasqué — l'en-tête de votre site le porte déjà, l'afficher deux fois brouille la lecture
Panier et sélecteur de langueConservés
Parcours de demande de devisComplet — le visiteur va jusqu'au bout sans quitter votre page
LangueDétectée automatiquement sur la langue de votre site

Autrement dit : ce n'est pas une vignette ni un aperçu. C'est votre catalogue entier, avec ses filtres, sa recherche, ses favoris et son formulaire de commande.


⚠️ Trois choses à savoir avant de vous lancer

Google ne vous pénalisera pas. La version affichée dans votre site est explicitement marquée comme non indexable : Google référence votre page à vous, jamais un doublon. Vous ne perdez rien de votre référencement, et vous n'en créez pas de concurrent.

La sélection de vos visiteurs tient pendant la visite, pas d'une visite à l'autre. Les navigateurs récents (Safari en tête) isolent les données d'un site affiché à l'intérieur d'un autre. Un visiteur qui remplit son panier, ferme l'onglet et revient le lendemain repart d'une page vide. Pendant sa visite, en revanche, tout fonctionne normalement.

Si vous renommez l'adresse de votre catalogue, pensez à recopier le code. Le catalogue intégré ne casse pas — il se masque proprement, avec un message neutre — mais il ne s'affichera plus tant que le code n'aura pas été mis à jour.


Le catalogue ne s'affiche pas ?

Dans l'ordre, vérifiez :

  • Votre offre autorise-t-elle les scripts ? C'est de loin la cause la plus fréquente (WordPress.com gratuit, Squarespace hors Business).
  • Le code a-t-il été collé dans un bloc HTML — et pas dans un bloc de texte, qui l'afficherait comme du texte brut ?
  • La page a-t-elle été publiée ? Beaucoup d'éditeurs n'exécutent pas les scripts dans le mode aperçu.
  • L'adresse dans data-shop correspond-elle à celle affichée dans votre Diffusion ?

Si les quatre sont bons et que rien ne s'affiche, écrivez-nous depuis le lien « Contactez-nous » de la carte Diffusion : on regarde votre page avec vous.


Pour aller plus loin