# Ajoutez le commerce au site que vous avez déjà. > Une seule balise script asynchrone transforme n’importe quel site en boutique. Fonctionne sur WordPress, Webflow, Ghost, Carrd, Framer, HTML statique, React / Next.js / Vue. Sans refonte, sans plugin, sans changement de thème. Une seule balise script asynchrone, quelques conteneurs HTML, et votre site existant devient une boutique. Fonctionne sur WordPress, Webflow, Ghost, Carrd, Framer, HTML pur, ou tout CMS qui permet de coller des balises script. Sans refonte. Sans plugin. Sans changement de thème. [Démarrer l’essai gratuit](https://app-v3.shoprocket.io/signup?lang=fr)[Voir le code](#the-snippet) Essai gratuit de 14 jours Sans carte bancaire 0 % de frais de plateforme Fonctionne avec tous les forfaits 1 Ligne pour intégrer N’importe lequel Site web Complet Panier et paiement 0% Frais de plateforme ● Le problème ## Vous avez un site. Vous voulez y vendre. Pas le refaire. La plupart des plateformes de commerce veulent que vous remplaciez votre site actuel par le leur. WordPress demande WooCommerce. Wix veut Wix Stores. Squarespace veut Squarespace Commerce. Shopify veut tout sur sa pile. Vous vouliez une boutique, pas un projet de migration. 01 ### Votre site fonctionne déjà. Votre marque, votre contenu, votre blog, vos animations, votre SEO. Le travail que vous avez déjà fait. Rien de tout cela ne devrait changer pour ajouter un paiement. 02 ### Votre CMS n’est pas le problème. WordPress, c’est très bien. Webflow est magnifique. Ghost est parfait pour le contenu. Carrd est rapide. Aucun ne devrait vous obliger à partir parce qu’il ne gère pas nativement le commerce. 03 ### Votre boutique doit vivre dans votre site. Pas sur un sous-domaine séparé, pas en redirection vers un panier hébergé. La page produit est la vôtre, le paiement s’y déroule, et le client ne la quitte jamais. ● Comment ça marche ## Trois lignes de HTML. Quatre types de widgets. Collez le script de chargement une fois. Déposez des conteneurs HTML là où vous voulez voir apparaître le commerce. Le widget monte automatiquement chacun de ceux qu’il trouve au rendu. L’installation ### Une balise script. Asynchrone. Non bloquante. La balise script se place dans le head du site, juste avant la balise body fermante, ou dans le gabarit d’en-tête de votre CMS. Elle se charge en asynchrone, donc elle ne bloque jamais le rendu de votre page. Au chargement, elle analyse la page à la recherche de tout élément HTML portant un attribut data-shoprocket et y monte le widget correspondant. S’il n’y a aucun élément de widget sur la page, elle initialise quand même le panier flottant pour que les boutons de boutique ailleurs sur votre site continuent de fonctionner. - ✓ Chargement asynchrone, sans impact sur le LCP ni le CLS - ✓ Monte automatiquement chaque élément data-shoprocket de la page - ✓ Le panier flottant s’initialise sur tout le site, même sur les pages sans widget ● Types de widgets ## Quatre formes, toutes sur la même page. Choisissez celui dont vous avez besoin, là où vous en avez besoin. Une page d’accueil peut avoir un widget de produit mis en avant, une page boutique dédiée peut avoir un catalogue complet, et un article peut contenir une intégration d’un seul produit en ligne. Tout sur le même site, tout depuis la même boutique. 01 ### Catalogue. Une grille de produits complète avec filtres, catégories et recherche. Posez-la sur votre page /shop et les clients parcourent toute votre boutique. 02 ### Produit. Une fiche produit unique avec prix, variantes et ajout au panier. Placez-la dans un article ou sur une page d’atterrissage à côté de votre argumentaire. 03 ### Panier. Le panier lui-même, comme widget de page. Ou laissez le panier flottant s’en charger sur tout le site, le script l’initialise automatiquement. 04 ### Paiement. Panier, adresses, livraison et récapitulatif de commande, tout dans votre page. L’étape finale du paiement redirige vers le processeur pour la conformité PCI et ramène le client sur votre site. ● Fonctionne là où vous êtes ## Si la balise script est autorisée, Shoprocket s’intègre. Testé et documenté pour les outils ci-dessous. En pratique, partout où vous pouvez coller du HTML, ça fonctionne. 01 ### WordPress. Auto-hébergé ou WordPress.com. Tout thème, tout constructeur de pages (Elementor, Gutenberg, Divi, etc.). Pas besoin de WooCommerce. Aucun plugin à maintenir. 02 ### Webflow. Utilisez l’élément Embed là où vous voulez la boutique. Gardez votre forfait Webflow CMS, aucune mise à niveau Ecommerce nécessaire. 03 ### Ghost. Une carte HTML dans n’importe quel article ou page. Ghost est idéal pour les créateurs qui publient du contenu à côté de produits. 04 ### Carrd, Framer, Notion. Constructeurs d’une page et centrés sur le design. Fonctionne avec les intégrations Carrd Pro Standard, les composants de code Framer, et Notion via les habillages Super.so / HeyNotion. 05 ### HTML statique et JAMstack. Cloudflare Pages, Netlify, Vercel, HTML statique pur, tout build Jekyll / Hugo / Astro / 11ty. Collez le code et c’est parti. 06 ### React, Next.js, Vue, Svelte. Installez le paquet npm \`@shoprocket/widget\` pour une intégration étroite avec votre framework. Importez le composant, montez-le là où vous voulez la boutique. ● Performance ## Vos Core Web Vitals restent au vert. Tout l’intérêt d’un commerce intégrable partout, c’est que votre site continue de se comporter comme votre site. En chiffres ### Script asynchrone, configuration en cache, montage rapide. Le script de chargement est livré en asynchrone, donc le LCP n’est pas touché. La configuration de la boutique est récupérée depuis notre API et mise en cache en périphérie (TTL d’1 heure), donc les pages revues n’interrogent pas de nouveau. Le widget s’affiche dans le conteneur réservé, donc aucun décalage de mise en page. Les sites qui étaient au vert sur Lighthouse avant l’intégration le restent après. - ✓ Balise script asynchrone : aucun impact sur le LCP ni le CLS - ✓ Configuration de la boutique en cache en périphérie, servie par CDN aux vues suivantes - ✓ Les conteneurs de montage réservés évitent tout décalage cumulatif de mise en page ● Questions fréquentes ## Vos questions sur l’intégration, avec leurs réponses. Ce que l’on demande avant de coller le code. Où le panier et le paiement s’exécutent-ils réellement ? + Le panier, les adresses et le choix de livraison s’exécutent dans l’intégration sur votre page : personne ne quitte votre site pendant la navigation et la sélection. L’étape finale du paiement redirige vers votre processeur de paiement connecté (Stripe, PayPal) pour la conformité PCI et ramène le client sur votre site pour la confirmation de commande. C’est ainsi que fonctionne tout flux de paiement moderne ; prétendre le contraire serait malhonnête. Puis-je avoir plusieurs widgets sur la même page ? + Oui. Le script de chargement analyse la page à la recherche de chaque élément portant un attribut data-shoprocket et monte chacun d’eux. Une même page peut avoir un carrousel de produits mis en avant, une grille de catalogue en dessous et un paiement intégré ailleurs. Le tout depuis la même boutique. Ralentit-il mon site ? + Aucun impact notable. Le script de chargement est asynchrone, il ne bloque donc pas le rendu de votre page. La configuration de la boutique est mise en cache en périphérie, donc les visiteurs récurrents n’interrogent pas de nouveau. Les widgets se montent dans des conteneurs réservés, donc aucun décalage cumulatif de mise en page. Si votre site passait les Core Web Vitals avant, il les passe toujours après. Et si j’utilise React / Next.js / Vue ? + Installez directement le paquet npm \`@shoprocket/widget\`. Importez le composant, montez-le là où vous voulez la boutique, passez des props pour la configuration. Cela donne un contrôle fin que l’intégration par balise script n’offre pas. Et Wix et Squarespace ? + Squarespace fonctionne très bien. Utilisez l’élément Bloc de code à partir du forfait Core, collez le code, c’est fait. Wix isole chaque intégration tierce dans une iframe, ce qui casse le paiement, nous ne le recommandons donc pas ; la réponse honnête pour les utilisateurs de Wix est la boutique hébergée Shoprocket ou le passage à un constructeur qui autorise de vraies intégrations. Consultez notre page dédiée à Wix pour les trois voies possibles. Puis-je utiliser mon propre domaine ? + Oui. Le widget s’exécute sur le domaine de la page hôte, quel qu’il soit. Vos produits, votre panier et votre paiement vivent tous sur votre-site.com. Pas de sous-domaine Shoprocket séparé, pas de redirections. Les clients ne se rendent pas compte qu’un tiers se trouve derrière la couche commerce. Comment personnaliser l’apparence du widget ? + Le widget hérite du CSS de votre site pour le contexte de mise en page (largeurs de conteneur, base typographique). Pour l’interface commerce elle-même, choisissez parmi plus de 40 thèmes, plus un jeu de couleurs clair / sombre via des attributs de données sur l’élément de montage. Pour une personnalisation plus poussée, définissez des variables CSS dans la feuille de style de votre site et le widget les reprend. Et si j’ai plusieurs configurations d’intégration pour différentes pages ? + Créez plusieurs configurations d’intégration dans votre tableau de bord Shoprocket, chacune avec son propre ID, son thème et son jeu de fonctionnalités. Faites pointer chaque conteneur HTML vers l’ID d’intégration approprié. Une page d’accueil peut afficher une intégration compacte de produits mis en avant pendant qu’une page boutique dédiée utilise une intégration de catalogue complet, le tout sur la même boutique. Shoprocket prend-il vraiment 0 % de frais de plateforme ? + Oui. Votre processeur de paiement (Stripe, PayPal, etc.) prélève toujours ses frais de traitement habituels, c’est le coût du transfert d’argent, mais Shoprocket n’ajoute rien par-dessus. Les 0 % de frais de plateforme s’appliquent à tous les forfaits, y compris à chaque installation intégrée n’importe où. ## Votre site. Désormais avec du commerce. Essai gratuit de 14 jours. Sans carte bancaire. Collez le code, lancez une boutique, gardez votre site. [Démarrer l’essai gratuit](https://app-v3.shoprocket.io/signup?lang=fr)[Parlez-nous](https://v3.shoprocket.io/fr/contact.md) --- - HTML version: https://v3.shoprocket.io/fr/fonctionnalites/vendre-sur-nimporte-quel-site - Language: Français (fr) - Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-on-any-website.md), [English](https://v3.shoprocket.io/features/sell-on-any-website.md), [Español](https://v3.shoprocket.io/es/funciones/vender-en-cualquier-sitio-web.md), [עברית](https://v3.shoprocket.io/he/features/sell-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-on-any-website.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/fitur/jual-di-situs-web-mana-pun.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-su-qualsiasi-sito-web.md), [日本語](https://v3.shoprocket.io/ja/features/sell-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-bet-kurioje-svetaineje.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-pa-hvilken-som-helst-nettside.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-na-kazdej-stronie.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/features/sell-on-any-website.md), [ไทย](https://v3.shoprocket.io/th/features/sell-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/her-web-sitesinde-satis.md), [中文](https://v3.shoprocket.io/zh/features/sell-on-any-website.md)