Comment ajouter un bandeau cookies à une boutique Shopify

Où coller la balise dans Shopify

Les thèmes Shopify ont un seul fichier de mise en page qui enveloppe chaque page de la boutique : theme.liquid. Les pages de paiement n’en font pas partie (voir plus bas).

1. Depuis l’admin Shopify, allez dans « Boutique en ligne », puis « Thèmes ». Ouvrez le menu (trois points) à côté de votre thème actif et choisissez « Dupliquer », puis ouvrez le même menu sur la copie et choisissez « Modifier le code ».
2. Dans le dossier « Layout », cliquez sur « theme.liquid ».
3. Collez la balise sur la ligne qui suit <head>, au-dessus de l’objet {{ content_for_header }}, là où Shopify imprime ses propres scripts et les intégrations d’applications :

liquid
<head>
  <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
  <meta charset="utf-8">
  {{ content_for_header }}
  ...

1. Cliquez sur « Enregistrer », prévisualisez la copie, puis publiez-la quand tout est en ordre.

Les modifications de code vivent dans le thème : quand vous installez une nouvelle version du thème, refaites la modification dans la nouvelle copie.

Comment relier le suivi propre à Shopify au bandeau

Shopify dépose ses propres cookies de mesure d’audience (_shopify_analytics et _shopify_marketing, un an ; les boutiques plus anciennes utilisaient _shopify_y et _shopify_s, que Shopify a cessé de déposer le 30 avril 2026) et exécute les pixels de vos applications de canaux de vente (Google & YouTube, Facebook & Instagram) ainsi que les pixels personnalisés de « Paramètres », puis « Événements clients ». Rien de tout cela n’est une balise de votre thème, Cookiequiet ne peut donc pas les marquer. Shopify expose à la place une API navigateur destinée aux bandeaux de consentement, la Customer Privacy API, et retient ses cookies de mesure d’audience et marketing dans les régions que vous configurez tant que cette API n’a pas reçu de consentement.

Ajoutez cette passerelle juste après la balise dans theme.liquid. Elle s’exécute à chaque chargement de page où un choix est enregistré, et à chaque nouveau choix :

html
<script>
  window.addEventListener('cq:consent', function (e) {
    var c = e.detail.categories;
    if (typeof window.Shopify === 'undefined') return;
    window.Shopify.loadFeatures([{ name: 'consent-tracking-api', version: '0.2' }], function (error) {
      if (error) return;
      window.Shopify.customerPrivacy.setTrackingConsent({
        analytics: c.indexOf('analytics') >= 0,
        marketing: c.indexOf('marketing') >= 0,
        preferences: c.indexOf('functional') >= 0
      }, function () {});
    });
  });
</script>

Allez ensuite dans « Paramètres », puis « Confidentialité des clients », ouvrez le menu à côté du bandeau de cookies et choisissez « Remove cookie banner » (retirer le bandeau), pour que les visiteurs ne voient qu’un seul bandeau. Dans la section « Régions », sélectionnez les régions où Cookiequiet affiche son bandeau (par exemple l’EEE, le Royaume-Uni et la Suisse) : Shopify documente que les régions d’un bandeau tiers doivent correspondre aux siennes, sans quoi des données non essentielles peuvent être traitées avant le consentement.

Comment gérer les autres balises

• Applications de canaux de vente. Leurs pixels passent par le consentement de Shopify, que la passerelle ci-dessus définit. Rien à marquer.
• Pixels personnalisés. Ils s’exécutent dans le bac à sable de Shopify, hors de la page. Quand vous en créez un, réglez son autorisation de confidentialité des clients sur « obligatoire » pour que Shopify attende le consentement avant de l’exécuter.
• Balises collées dans le thème. Marquez-les : <script type="text/plain" data-cq-category="marketing"> pour le pixel Meta, analytics pour une balise Google collée à la main. Voir les guides Meta Pixel et Google Analytics 4 pour les deux façons de brancher les balises Google.
• Vidéos dans les sections. Remplacez src par data-cq-src sur les iframes YouTube ou Vimeo de vos sections ; le lecteur se charge après le consentement.

Comment ajouter le lien Préférences de cookies

L’éditeur de navigation de Shopify réécrit les URL des liens ; l’endroit le plus fiable est donc l’éditeur de thème : « Boutique en ligne », puis « Thèmes », puis « Personnaliser », ouvrez la section « Pied de page », cliquez sur « Ajouter un bloc », choisissez « Liquid personnalisé » (Dawn et la plupart des thèmes Online Store 2.0 l’ont) et collez :

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Vous pouvez aussi ajouter la ligne dans sections/footer.liquid depuis l’éditeur de code, ou activer le bouton flottant de préférences dans les réglages du bandeau.

Comment tester

1. Ouvrez la boutique dans une fenêtre de navigation privée et cliquez sur « Tout refuser ».
2. Dans les outils de développement, vérifiez les cookies : cq_consent, les cookies nécessaires de Shopify (panier et session) et rien d’autre : pas de _ga, pas de _fbp, et pas de _shopify_analytics si la région du visiteur fait partie de celles configurées dans Confidentialité des clients.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les balises marquées s’exécutent et le cookie de mesure d’audience de Shopify apparaît.
4. Consultez le registre des consentements dans le tableau de bord Cookiequiet.

Ce qui est propre à Shopify

• Paiement. Le code du thème ne s’exécute pas sur les pages de paiement, le bandeau n’y est donc pas affiché. Shopify reporte le consentement enregistré sur la boutique vers le paiement quand les deux tournent sur le même domaine racine, ce qui est le cas d’une boutique standard.
• Les régions de Shopify. Shopify ne retient ses propres cookies que dans les régions que vous sélectionnez. Si vous affichez Cookiequiet partout mais n’avez configuré aucune région dans Shopify, les cookies de Shopify sont déposés tout de suite hors de l’EEE et du Royaume-Uni.
• Applications qui ajoutent leur propre bandeau. Désinstallez-les ou désactivez-les ; un bandeau, un registre des consentements.
• Boutiques headless (Hydrogen). La balise va alors dans le layout racine de votre application, et la passerelle de consentement utilise les paramètres headless de Shopify ; ce guide couvre la boutique en ligne standard.

Les prix ne dépendent pas du trafic : une boutique à 500 000 sessions par mois paie la même chose qu’une petite, voir les tarifs.