# Intégrer Shoprocket à n’importe quel site
> Vendez depuis le site web que vous avez déjà. Créez une intégration dans Intégrations, cliquez sur Obtenir le code et collez-le dans votre page WordPress, Squarespace, Wix, Webflow ou HTML simple. Les modifications que vous enregistrez ensuite atteignent chaque page sans recoller.
Centre d’aide / Intégration - Mis à jour le 28 octobre 2026
Une intégration met une partie de votre boutique sur n’importe quel site web : un produit avec un bouton d’achat, un catalogue de produits complet, vos catégories ou un champ de recherche. Vous la créez dans **Intégrations**, cliquez sur **Obtenir le code** et collez le code dans votre page. Le panier et le paiement s’ouvrent directement sur votre page, si bien que les clients ne quittent jamais votre site.
Vous ne collez le code qu’une seule fois. Quand vous modifiez une intégration plus tard, même pour la passer sur une autre disposition, chaque page où elle se trouve est mise à jour à l’enregistrement.
## Avant de commencer
- Ajoutez au moins un produit actif. Une intégration pour un produit a besoin d’un produit à vendre.
- Vous devez pouvoir modifier votre site web et ajouter un bloc de code ou de HTML à une page. Les notes pour chaque outil de création de site sont plus bas.
## Étape 1 (facultative, recommandée) : Ajoutez Shoprocket à toutes les pages de votre site
En haut de **Intégrations** se trouve une carte intitulée **Ajoutez Shoprocket à toutes les pages de votre site**. Elle contient une ligne de code pour l’en-tête de votre site. Avec elle en place, votre panier flottant et le chat en direct fonctionnent sur toutes les pages de votre site, pas seulement celles qui ont une intégration, et toute intégration que vous ajouterez ensuite fonctionne simplement.
1. Dans votre tableau de bord, allez dans **Intégrations**.
2. Sur la carte **Ajoutez Shoprocket à toutes les pages de votre site**, cliquez sur **Copier**.
3. Choisissez votre outil de création de site dans les onglets sous le code (**HTML**, **WordPress**, **Squarespace**, **Wix** ou **Webflow**) et suivez ses deux étapes pour coller la ligne dans l’en-tête de votre site.
4. Ouvrez n’importe quelle page de votre site. L’état de la carte passe de **Pas encore détecté** à **Connecté**.
Vous pouvez passer cette étape. Le code de chaque intégration comprend la même ligne, donc une intégration fonctionne seule sur n’importe quelle page.
## Étape 2 : Créez une intégration
1. Dans **Intégrations**, cliquez sur **Nouvelle intégration**.
2. Sous **Ce qu’elle affiche**, choisissez-en une : **Un produit**, **Catalogue de produits**, **Catégories** ou **Recherche**.
3. Choisissez une disposition :
- **Un produit** : **Bouton**, **Compact**, **Fiche**, **Mise en avant** ou **Détail complet**. Choisissez ensuite le produit sous **Quel produit ?**
- **Catalogue de produits** : **Grille**, **Carrousel** ou **Liste**. Sous **Quels produits ?**, choisissez **Tous les produits**, **Une catégorie** ou **Sélection manuelle**.
- **Catégories** : **Vignettes**.
- **Recherche** : **Champ de recherche** ou **Icône de recherche**.
4. Cliquez sur **Continuer**.
Chaque disposition est la même intégration avec des réglages différents, vous pouvez donc changer de disposition plus tard dans l’éditeur et le code que vous avez collé reste le même.
## Étape 3 : Personnalisez-la
L’éditeur affiche un aperçu en direct dans lequel vous pouvez naviguer comme un acheteur : ajouter au panier, ouvrir des produits et payer. Modifiez ce que l’intégration affiche dans l’onglet **Cette intégration**. L’onglet **Boutique** règle vos couleurs et vos polices pour toute votre boutique, si bien que toutes vos intégrations et votre panier flottant s’accordent.
L’intégration reçoit d’abord un nom, par exemple « Products · Grid ». Vous pouvez la renommer à tout moment.
Quand elle vous convient, cliquez sur **Enregistrer et obtenir le code**.
## Étape 4 : Copiez le code et collez-le dans votre site
Après l’enregistrement, le panneau **Obtenir le code** s’ouvre. Il ressemble à ceci :
```html
```
Copiez toujours votre propre code avec le bouton, ne le retapez jamais. La première ligne nomme l’intégration, le script charge Shoprocket pour votre boutique, et la dernière ligne est l’endroit où l’intégration apparaît.
1. Cliquez sur **Copier le code**.
2. Choisissez votre outil de création de site dans les onglets du panneau et collez le code à l’endroit où l’intégration doit apparaître :
- **HTML** : collez le code là où l’intégration doit apparaître. La ligne de script ne doit figurer qu’une fois sur une page, quel que soit le nombre d’intégrations qu’elle contient.
- **WordPress** : dans l’éditeur de blocs, ajoutez un bloc **HTML personnalisé** là où l’intégration doit aller. Collez le code et mettez la page à jour. Sur WordPress.com, les scripts nécessitent une offre qui autorise les extensions.
- **Squarespace** : modifiez la page et ajoutez un bloc **Code** là où l’intégration doit aller. Collez le code, gardez l’affichage sur HTML et enregistrez.
- **Wix** : dans l’éditeur, choisissez **Ajouter**, puis **Intégrer du code**, puis **Intégrer du HTML**. Collez le code dans la zone et redimensionnez-la. Wix l’affiche dans un cadre, laissez-lui donc de la place pour le panier.
- **Webflow** : faites glisser un élément **Code Embed** là où l’intégration doit aller. Collez le code, enregistrez et publiez le site.
Si vous avez déjà ajouté Shoprocket à l’en-tête de votre site à l’étape 1, la page n’a besoin que de la dernière ligne du code, celle qui commence par `