# Installer FlowConsent sur Shopify

Installer FlowConsent sur Shopify : coller l'extrait de code dans theme.liquid, juste après <head>, puis neutraliser la bannière et les pixels natifs.

> Canonical: https://www.flowconsent.com/fr/doc/install-shopify
> Last updated: 2026-10-01
Sur Shopify, l'extrait de code FlowConsent se colle dans le fichier **`theme.liquid`** de votre thème, **juste après la balise `<head>`** et donc avant `{{ content_for_header }}` : on y accède par **Boutique en ligne → Thèmes → … → Modifier le code**. L'installation tient en trois étapes. Le piège principal : Shopify a sa propre bannière de cookies et ses canaux de vente (Google & YouTube, Facebook & Instagram) injectent leurs pixels hors du thème, là où votre extrait de code ne peut pas les retenir.

## Avant de commencer

- Un compte sur [app.flowconsent.com](https://app.flowconsent.com) (offre Free gratuite, sans carte bancaire, jusqu'à 25 000 sessions par mois).
- Une bannière créée puis déployée. Sur l'offre Free, le déploiement passe par votre compte Cloudflare ([guide Cloudflare](/fr/doc/cloudflare-deployment)) ; sur Pro et Enterprise, il se fait en un clic.
- Un accès à l'administration Shopify avec le droit de modifier les thèmes.

## Étape 1 : copier l'extrait de code

Ouvrez **Builder → Déploiement → Intégration** et copiez l'extrait de code de l'onglet **HTML / No-code**. Il comporte deux parties, dans cet ordre : le stub Google Consent Mode v2 (valeurs `denied` par défaut), puis le chargeur de la bannière.

## Étape 2 : le coller dans theme.liquid

1. Dans l'administration Shopify, allez dans **Boutique en ligne → Thèmes** (*Online Store → Themes*).
2. Par précaution, dupliquez d'abord le thème : Shopify le recommande pour garder une copie de sauvegarde.
3. Sur le thème publié, cliquez sur l'icône **…** puis sur **Modifier le code** (*Edit code*).
4. Dans le dossier **Layout**, ouvrez **`theme.liquid`**.
5. Collez l'extrait de code **juste après la balise d'ouverture `<head>`**, au-dessus de `{{ content_for_header }}` et de tout autre script, puis cliquez sur **Enregistrer**.

```html title="Layout → theme.liquid"
<head>
  <script>
  // FlowConsent Loader - PLACER AVANT tout autre script dans le <head>
  window.dataLayer=window.dataLayer||[];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent','default',{
    'ad_storage':'denied',
    'analytics_storage':'denied',
    'ad_user_data':'denied',
    'ad_personalization':'denied',
    'wait_for_update':500
  });
  gtag('set','url_passthrough',true);
  gtag('set','ads_data_redaction',true);
  </script>
  <!-- FlowConsent CMP -->
  <script src="https://VOTRE-CODE-LICENCE.consent.flowconsent.com/cookie-manager.js?code=VOTRE_CODE_LICENCE"></script>

  <meta charset="utf-8">
  <!-- … le reste du <head> de votre thème, dont {{ content_for_header }} -->
</head>
```

L'objet `{{ content_for_header }}` charge les scripts que Shopify et les applications ajoutent à la boutique : l'extrait de code doit donc passer **avant** lui. Tout ce qui est placé au-dessus de l'extrait échappe au blocage préalable.

> [!NOTE]
> Une mise à jour du thème depuis la boutique de thèmes peut ne pas reprendre vos modifications de code. Après chaque mise à jour, vérifiez que l'extrait de code est toujours en haut de `theme.liquid`.

## Étape 3 : neutraliser la bannière et les pixels natifs de Shopify

Les traceurs ne doivent plus être injectés par Shopify lui-même, sinon ils partent sans tenir compte de FlowConsent.

**Les canaux Google & YouTube et Facebook & Instagram.** Ces applications installent des *pixels d'application* gérés dans **Paramètres → Événements clients** (*Settings → Customer events*). Ils s'exécutent dans un environnement isolé de Shopify, en dehors de votre thème : votre extrait de code ne peut pas les retenir. Ils obéissent au consentement enregistré par la **Customer Privacy API** de Shopify, pas à la bannière FlowConsent. Pour que tout passe par FlowConsent, désactivez le partage de données de ces canaux (ou retirez les identifiants de mesure que vous y avez saisis), puis déclarez Google Analytics, Google Ads ou Meta Pixel dans **Builder → Services** : la bannière ne les charge qu'après consentement.

**La bannière native de Shopify.** Deux bannières sur la même boutique, c'est deux consentements contradictoires. Une fois vos traceurs déclarés dans FlowConsent, retirez celle de Shopify : **Paramètres → Confidentialité des clients → Bannière de cookies** (*Settings → Customer privacy → Cookie banner*), puis **Plus d'actions → Supprimer la bannière de cookies** (*More actions → Remove cookie banner*).

> [!WARNING]
> Le checkout n'exécute pas le code de votre thème : `theme.liquid` ne s'applique ni au paiement, ni aux pages de remerciement et de statut de commande, et les anciens « scripts supplémentaires » sont abandonnés par Shopify. La bannière FlowConsent ne s'affiche donc pas pendant le paiement. Ne collez pas de traceurs à ces endroits : le suivi des conversions passe par les **Événements clients** de Shopify, qui dépendent eux aussi de la Customer Privacy API.

Si vous utilisez Google Tag Manager dans le thème, ne chargez pas FlowConsent depuis GTM (il arriverait trop tard) : gardez l'extrait de code **au-dessus** du conteneur GTM dans `theme.liquid`. Détails dans le [guide Google Consent Mode](/fr/doc/google-consent-mode).

## Vérifier l'installation

1. Ouvrez la boutique en navigation privée : la bannière s'affiche.
2. Dans l'onglet **Réseau** des outils de développement, aucune requête vers Google, Meta ou un autre service tiers ne part avant le clic sur **Accepter**.
3. Lancez l'[assistant d'installation](/fr/doc/setup-wizard) (Builder → Intégration) : il contrôle la page en ligne (chargeur présent avec le bon code de licence, stub Consent Mode présent et placé avant chaque tag Google).
4. Terminez par un scan de refus depuis l'onglet **Conformité** ([vérification de conformité](/fr/doc/compliance-verification)).

## Le faire depuis votre agent IA (MCP)

FlowConsent dispose d'un serveur MCP officiel, `https://mcp.flowconsent.com`, utilisable depuis Claude, ChatGPT ou tout client MCP. La connexion se fait en OAuth 2.0 avec votre compte FlowConsent, sans clé d'API. Votre agent récupère l'extrait de code et les consignes de placement (`get_banner_snippet`, `get_setup_instructions`), vérifie l'installation par un vrai scan (`verify_consent_compliance`) et peut poser une surveillance récurrente (`monitor_compliance`). C'est vous qui collez l'extrait dans `theme.liquid` : le serveur MCP fournit l'extrait, les instructions et la vérification.

Exemple de demande :

> Donne-moi l'extrait de code de ma bannière pour ma boutique Shopify et vérifie qu'il est bien installé sur https://maboutique.fr

En savoir plus : [serveur MCP](/fr/doc/mcp-server) et [FlowConsent pour les agents IA](/fr/mcp).

## Questions fréquentes

### Puis-je installer FlowConsent sans modifier le code du thème ?

Le code du thème est la méthode fiable, car elle seule garantit que l'extrait de code passe avant `{{ content_for_header }}`. Les blocs de code ajoutés via l'éditeur de thème s'insèrent dans le corps de la page, trop tard pour le blocage préalable.

### Pourquoi Google Analytics envoie-t-il encore des données après un refus ?

Presque toujours parce que le canal Google & YouTube (ou un autre pixel d'application) est encore actif dans **Événements clients**. Ce pixel ne passe pas par votre thème : désactivez son partage de données et déclarez Google Analytics dans **Builder → Services**.

### La bannière s'affiche-t-elle au moment du paiement ?

Non. Le checkout Shopify n'exécute pas le code du thème. Le visiteur fait son choix sur la boutique, avant d'arriver au paiement.

### Dois-je supprimer la bannière de cookies de Shopify ?

Oui, une fois vos traceurs déclarés dans FlowConsent : deux bannières donneraient deux choix contradictoires. Shopify prévient qu'après son retrait, les données non essentielles de ses propres pixels risquent de ne plus être collectées : c'est attendu, puisque le suivi passe désormais par FlowConsent.