Guide e-commerce Shopify · 2026

Afficher des widgets Snackeet sur vos pages produit Shopify

Commencez par choisir votre objectif produit. Le guide vous indique ensuite quel alias garder, où placer le code et ce que vous devez voir — sans connaissances techniques.

01 · CasChoisir le besoin produit
02 · DisplayBanner ou Floating
03 · SnackeetRécupérer le code
04 · ShopifyColler dans le modèle Produit
05 · PreviewTester un vrai produit
1

Quel résultat voulez-vous sur vos produits ?

Choisissez d’abord le ciblage

2

Choisir Banner ou Floating

Le ciblage et l’affichage sont deux décisions différentes

Après avoir choisi le cas produit, choisissez la façon dont le widget doit apparaître.

Banner Widget

Dans le contenu du produit

Le Banner occupe de l’espace. Il apparaît exactement à la position de la section Liquid personnalisé.

Floating Widget

Au-dessus de la page

Le Floating flotte au-dessus du produit. Sa position desktop/mobile se règle dans Snackeet.

Les trois cas produit fonctionnent avec Banner ou Floating. Exemple : le cas “un produit précis” peut afficher un Banner dans la fiche ou un Floating au-dessus.

Avant de commencer

Deux accès seulement

  • Le widget Banner ou Floating existe dans Snackeet et son statut est live.
  • Vous pouvez ouvrir Shopify Admin → Online Store → Themes → Customize.
Important : vous n’avez pas besoin de connecter le catalogue Shopify pour afficher un widget. L’import produit est une annexe facultative.
3

Récupérer le code depuis Snackeet

Widgets → Banner/Floating → Integration → Embed code

Le code généré contient déjà le code du projet et l’alias fixe du widget.

Où aller

Dans Snackeet, ouvrez Widgets, puis choisissez Banners ou Floating.

Sur quoi cliquer

Ouvrez le widget voulu, puis l’onglet Integration.

Quoi copier

Pour les cas 1 et 2, copiez tout le bloc Embed code. Pour le cas 3, gardez aussi le projectId à portée de main.

Ce que vous devez voir

Une ligne snktProjectId et une ligne snktDynamicAlias.

Ne copiez pas les valeurs d’une capture d’écran. Utilisez toujours le code de votre propre projet Snackeet.
Snackeet Widgets navigation showing Banners and Floating tabs12
Choisissez Banners ou Floating.
Snackeet Banner Integration screen showing the fixed Dynamic Alias and generated Embed code12
Banner → Integration : 1) alias fixe, 2) code généré avec le projectId.
Snackeet Floating Integration screen showing the generated Embed code
Floating → Integration : récupérez le code de votre Floating de la même manière.
i

Comprendre les valeurs sans lire le code

projectId · fixed alias · Dynamic Alias · product.id

projectId

Le code de votre projet Snackeet. Plusieurs widgets du même projet peuvent le partager.

Alias fixe

La valeur déjà présente dans le code généré. Gardez-la pour les cases 1 et 2.

Dynamic Alias

La valeur utilisée par Snackeet pour choisir le widget correspondant à la page.

{{ product.id }}

Une valeur Shopify qui devient automatiquement l’identifiant numérique du produit Shopify actuellement ouvert.

4

Ouvrir le bon modèle Produit Shopify

Online Store → Themes → Customize → Products

Le modèle choisi détermine quels produits recevront le code.

Où aller

Shopify Admin → Online StoreThemes.

Sur quoi cliquer

Cliquez sur Customize. En haut, choisissez Products, puis le modèle voulu.

Quoi ajouter

Ajoutez une section Custom liquid / Liquid personnalisé à l’endroit où le code doit être chargé.

Ce que vous devez voir

Le modèle Produit sélectionné en haut et la section Liquid personnalisé dans la colonne de gauche.

Modèle partagé : utilisé par plusieurs produits. Modèle unique : créé puis attribué uniquement au produit ciblé.
Shopify Online Store Themes screen with the Customize theme button
Online Store → thème actif → Customize.
Shopify theme template selector listing Products and other page types
En haut de l’éditeur, ouvrez Products puis choisissez le modèle partagé ou unique.
Shopify theme editor with a Custom liquid section containing Snackeet code
Ajoutez Liquid personnalisé dans la colonne de gauche, puis collez le code du cas choisi.
5

Cas 1 — Le même widget sur tous les produits

Alias fixe · modèle Produit partagé

Choisissez ce cas lorsqu’une même campagne ou preuve sociale doit apparaître partout.

Où aller

Snackeet → widget voulu → Integration, puis Shopify → modèle Produit partagé.

Sur quoi cliquer

Dans Shopify, ajoutez ou ouvrez Liquid personnalisé.

Quoi coller

Collez le bloc Embed code complet généré par Snackeet, sans modifier l’alias fixe.

Ce que vous devez voir

Le même widget apparaît sur chaque produit utilisant ce modèle partagé.

N’utilisez pas {{ product.id }} dans ce cas. Vous voulez volontairement afficher le même widget partout.
6

Cas 2 — Un widget pour un produit précis

Alias fixe · modèle Produit unique

Choisissez ce cas pour une fiche produit qui mérite son propre contenu : démonstration, routine, tutoriel, avis ou Story shoppable.

Où aller

Dans l’éditeur Shopify, créez ou sélectionnez un modèle Produit réservé à ce produit.

Sur quoi cliquer

Shopify Admin → Products → ouvrez le produit → attribuez-lui ce modèle unique et vérifiez qu’aucun autre produit ne l’utilise.

Quoi coller

Dans Liquid personnalisé, collez le bloc Embed code complet généré par Snackeet, sans modifier l’alias fixe.

Ce que vous devez voir

Le widget apparaît uniquement sur le produit auquel le modèle unique est attribué.

Pour un administrateur Shopify non technique, le modèle unique est plus sûr que l’injection d’un script dans la description du produit.
SolCotton product page with four circular Snackeet stories displayed below the product description
Exemple e-commerce réel : sur SolCotton, la rangée de Stories rondes est un Banner placé dans la fiche produit. Un clic ouvre une Story verticale.
7

Cas 3 — Un widget différent pour chaque produit

Product ID automatique · un seul modèle partagé

Guide rapide — sélection de produits Shopify uniquement

Si le bouton Choisir un produit Shopify est disponible dans votre app, vous pouvez associer plusieurs widgets sans saisir leurs identifiants à la main. Cette sélection automatique n’est pas disponible pour PrestaShop.

  1. Connectez votre boutique une seule fois. Si elle est déjà connectée, conservez la connexion. Sinon, suivez le guide de connexion Shopify.
  2. Vérifiez le code installé avant de changer un alias. Pour cette sélection par Product ID, le code doit utiliser {{ product.id }}. Installez-le une fois dans chaque modèle Produit partagé concerné, pas dans chaque fiche. La connexion du catalogue seule n’installe pas le widget.
  3. Dans Widgets, choisissez un produit Shopify pour chaque widget. Vous pouvez préparer plusieurs lignes et changer de page. Rien n’est enregistré à cette étape.
  4. Vérifiez, puis confirmez. Cliquez sur Appliquer, vérifiez les widgets et les anciens/nouveaux alias, puis confirmez. Cela modifie les widgets en ligne. Annuler ferme la confirmation sans enregistrer ; Tout abandonner retire les changements préparés.

Si le bouton n’est pas encore disponible, la méthode manuelle ci-dessous reste utilisable après vérification du code du thème.

Votre widget fonctionne déjà avec un handle ? Gardez sa configuration. Un handle est le texte dans l’URL du produit, par exemple cycle-feminin. Si votre code utilise {{ product.handle }}, remplacer seulement cet alias par un Product ID peut faire disparaître le widget. La sélection simplifiée utilise actuellement le Product ID numérique, pas le handle. Ne confirmez pas le remplacement sans faire vérifier le code par la personne qui gère votre thème ou par Snackeet. Nous ne détectons ni ne convertissons automatiquement votre configuration.

Choisissez ce cas pour gérer un catalogue à grande échelle avec un seul modèle Produit.

Où aller

Shopify Admin → Products → ouvrez le produit que vous voulez associer à un widget.

Sur quoi cliquer

Dans l’URL Shopify Admin, copiez le nombre situé après /products/. C’est l’identifiant numérique du produit Shopify.

Quoi coller

Dans Snackeet, ouvrez le widget correspondant et collez ce nombre dans son champ Dynamic Alias. Dans Shopify, collez ensuite l’un des modèles de code complets ci-dessous.

Ce que vous devez voir

Chaque page produit affiche automatiquement le widget Snackeet dont l’alias est égal à son Product ID.

L’URL publique du produit n’est pas le Product ID. Une adresse comme /products/example-product contient un handle lisible, pas l’identifiant numérique.
Page produit Shopify
{{ product.id }}
Widget avec le même Dynamic Alias
Banner dynamique : dans le code ci-dessous, remplacez uniquement le texte en majuscules par votre projectId. Gardez {{ product.id }} tel quel.
Banner · un widget par produit
<!-- Snackeet Banner Widget -->
<script>
  var currentScript = document.currentScript;
  var widgetScript = document.createElement('script');
  widgetScript.src = "https://widget.snackeet.com/script.js";
  widgetScript.defer = true;
  widgetScript.dataset.snktProjectId = "PASTE_PROJECT_ID_FROM_SNACKEET";
  widgetScript.dataset.snktDynamicAlias = "{{ product.id }}";
  currentScript.insertAdjacentElement('afterend', widgetScript);
</script>
<!-- End Snackeet -->
Après avoir collé : le placeholder du projet a disparu, mais {{ product.id }} est toujours présent.
Floating dynamique : dans le code ci-dessous, remplacez uniquement le texte en majuscules par votre projectId. Gardez {{ product.id }} tel quel.
Floating · un widget par produit
<!-- Snackeet Floating Widget -->
<script>
  var currentScript = document.currentScript;
  var widgetScript = document.createElement('script');
  widgetScript.src = "https://widget.snackeet.com/script.js";
  widgetScript.defer = true;
  widgetScript.dataset.snktProjectId = "PASTE_PROJECT_ID_FROM_SNACKEET";
  widgetScript.dataset.snktDynamicAlias = "{{ product.id }}";
  currentScript.insertAdjacentElement('afterend', widgetScript);
</script>
<!-- End Snackeet -->
Après avoir collé : réglez la position du Floating dans Snackeet, pas en déplaçant la section Shopify.
Plusieurs widgets sur une page : un Banner et un Floating peuvent partager le même projectId. Leurs alias les distinguent. Installez et testez chaque integration séparément.
8

Vérifier sur un vrai produit

Desktop · mobile · bon produit

Où aller

Ouvrez Shopify Preview sur un produit réel qui utilise le modèle configuré.

Sur quoi cliquer

Testez l’aperçu desktop puis mobile. Ouvrez aussi une Story pour confirmer l’interaction.

Quoi vérifier

Cas 1 : même widget partout. Cas 2 : widget uniquement sur le produit ciblé. Cas 3 : widget correspondant au Product ID.

Ce que vous devez voir

Le bon Banner à la bonne place ou le bon Floating à la position réglée dans Snackeet.

  • Le widget est live dans Snackeet.
  • Le bon modèle Produit est attribué.
  • Le projectId vient du bon projet.
  • Pour le cas 3, le Dynamic Alias Snackeet est exactement le Product ID Shopify.
Snackeet Banner rendered inside a Shopify product-page section
Résultat attendu pour un Banner : le widget occupe l’espace de la section.
9

Corriger un problème e-commerce

Ce que vous voyez · ce qu’il faut faire

Ce que vous voyezCe qu’il faut faire
Le même widget apparaît partout, mais vous vouliez un widget différentVous utilisez encore un alias fixe. Passez au cas 3 et gardez {{ product.id }}.
Aucun widget sur un produit dans le cas dynamiqueVérifiez que le widget est live et que son Dynamic Alias est exactement le Product ID Shopify.
Le widget d’un produit apparaît sur plusieurs produitsLe code est dans un modèle partagé. Créez un modèle unique et attribuez-le uniquement au produit ciblé.
Votre alias ressemble au texte de l’URL publique (handle)Vérifiez le code installé : {{ product.handle }} doit correspondre au handle, {{ product.id }} au Product ID numérique. Gardez une configuration qui fonctionne ; ne remplacez pas le handle sans adapter et tester le code du thème.
Banner au mauvais endroitDéplacez la section Liquid personnalisé dans le modèle Produit.
Floating au mauvais endroitChangez sa position desktop/mobile dans Snackeet.
Banner fonctionne, Floating nonVérifiez séparément le code, le statut live et l’alias de chaque integration.
+

Autres pages e-commerce

Après les pages produit

Utilisez ces valeurs uniquement si vous devez cibler d’autres types de pages. La valeur envoyée par Shopify doit correspondre exactement au Dynamic Alias Snackeet.

PageValeur ShopifyExemple d’usage
AccueilhomeUne campagne générale
Collection{{ collection.id }}Un widget par catégorie
Page standard{{ page.id }}Guide, landing page, FAQ
Article{{ article.id }}Story liée à un contenu éditorial
A

Facultatif : importer les produits dans Snackeet

Sans rapport avec l’affichage du widget

Optionnel

Connectez votre catalogue pour retrouver les produits dans Snackeet. Cette configuration se fait une fois par boutique, pas une fois par produit. Si vos produits sont déjà accessibles, gardez votre connexion actuelle.

Avant de commencer : utilisez le compte du propriétaire ou un compte autorisé à développer des apps, dans l’organisation Shopify qui possède la boutique. Une agence doit travailler dans l’organisation du marchand.

Ouvrir le Shopify Dev Dashboard ↗ · Gardez Snackeet ouvert dans un autre onglet. Les boutons ci-dessous portent leur nom anglais.

  1. Créer l’app

    Apps → Create app → Start from Dev Dashboard. Nommez-la Snackeet Catalogue, puis cliquez sur Create.

  2. Configurer et publier la version

    Dans Versions, ouvrez ou créez une version. Pour cette connexion sans interface intégrée, utilisez l’App URL par défaut https://shopify.dev/apps/default-app-home. Désactivez l’intégration dans Shopify Admin si cette option est proposée. Dans Scopes, sélectionnez uniquement read_products. Gardez une version Webhooks API prise en charge proposée par Shopify. Cliquez sur Release et confirmez.

    La version doit être publiée avant l’installation.

  3. Installer sur la bonne boutique

    Home → Install app → votre boutique → Install. Vérifiez le nom de la boutique avant de confirmer. Créer l’app ne suffit pas : elle doit être installée.

  4. Récupérer les trois informations

    Dans l’app, ouvrez Settings pour copier le Client ID et le Client Secret. Dans Shopify Admin → Settings → Domains, retrouvez le domaine permanent de la boutique.

    Repère visuel — où copier chaque valeur
    Champ SnackeetOù le trouverÀ retenir
    URL de la boutiqueShopify Admin → Domainsvotre-boutique.myshopify.com, sans https:// ni chemin
    Client IDDev Dashboard → app → SettingsIdentifiant de l’app, pas un Product ID
    Client SecretAu même endroitÀ coller uniquement dans le champ sécurisé de Snackeet
  5. Connecter dans Snackeet

    Ouvrez une webstory en mode édition, puis le menu d’ajout d’élément → Produit et événement → Shopify. Si vous avez déjà un élément Shopify, sélectionnez-le puis cliquez sur Ajouter un nouveau produit dans ses paramètres. Ces deux chemins ouvrent le sélecteur de produits et, sans boutique connectée, le formulaire.

    Renseignez URL de la boutique, Client ID et Client Secret, puis cliquez sur Connecter à Shopify. Aucun access token n’est à générer ou à renouveler à la main. Vous pouvez fermer le sélecteur après vérification, sans ajouter de produit à la story.

  6. Vérifier avec un produit

    Recherchez un produit connu : son nom doit apparaître, accompagné de son image si elle est disponible. L’absence d’image ne signifie pas que la connexion a échoué. Pour l’affichage sur le site, suivez ensuite le cas 3 : modèle produit dynamique ; la connexion seule n’installe pas le widget.

Le Client Secret reste confidentiel : ne le mettez ni dans le code Shopify, ni dans ce guide, ni dans une capture d’écran ou un message de support.
La connexion ne fonctionne pas ?
SymptômeVérification
Domaine refuséUtilisez le domaine .myshopify.com, sans protocole, espace ni /admin. Le domaine commercial ne convient pas.
Boutique absente ou erreur shop_not_permittedVérifiez que l’app et la boutique appartiennent à la même organisation Shopify. Demandez au propriétaire de créer l’app dans la bonne organisation.
App créée, connexion impossibleVérifiez Versions → Release, puis Home → Install app sur la boutique ciblée.
Identifiants refusésRecopiez les deux valeurs depuis Settings de cette même app, sans espaces. Si le secret a changé, mettez-le à jour dans Snackeet.
Connexion réussie, catalogue inaccessibleVérifiez read_products, publiez la version modifiée et approuvez les droits demandés par Shopify, puis reconnectez dans Snackeet.
Liste videEffacez la recherche et vérifiez la boutique sélectionnée et ses produits. Si l’erreur persiste, contactez le support avec l’étape bloquante, sans secret.

Vérifié le 7 septembre 2026 · Sources : création et installation, connexion dans votre organisation, droits d’accès.

Shopify Dev App
Snackeet catalog connection
Produits dans Snackeet
B

Facultatif : tracking e-commerce

Customer events · Custom pixel

Optionnel

Cette étape mesure les actions e-commerce. Elle n’est pas nécessaire pour afficher un widget.

  1. Snackeet → Analytics → configuration du tracking Shopify.
  2. Copiez le script généré pour ce projet.
  3. Shopify → Settings → Customer events.
  4. Ajoutez un custom pixel, collez le script, puis cliquez sur Save et Connect.
  5. Testez un ajout au panier et une commande de test.
ÉvénementCe qu’il mesure
product_added_to_cartUn produit a été ajouté au panier.
checkout_completedLe checkout Shopify a été terminé.