Snackeet × Shopify — Guide e-commerce

1

Quel résultat voulez-vous sur vos produits ?

Choisissez d’abord le ciblage

Ne choisissez pas encore un code. Commencez par le résultat commercial attendu.

1

Le même widget sur tous les produits

Idéal pour une campagne, une preuve sociale ou un guide commun à tout le catalogue.

Alias : fixeInstallation : modèle Produit partagéRésultat : le même widget partout

2

Un widget pour un produit précis

Idéal pour expliquer un produit, montrer une routine ou ajouter des avis dédiés.

Alias : fixeInstallation : modèle Produit uniqueExemple : SolCotton

3

Un widget différent pour chaque produit

Idéal pour un catalogue où chaque produit possède son propre contenu Snackeet.

Alias : Product ID automatiqueInstallation : un seul modèle partagéRésultat : sélection automatique

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 tabs — Choisissez Banners ou Floating.

Snackeet Banner Integration screen showing the fixed Dynamic Alias and generated Embed code — 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 Store → Themes.

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é

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.Dynamic Banner: in the code below, replace only the uppercase text with your projectId. Keep {{ product.id }} unchanged.

<!-- 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.After pasting: the project placeholder is gone, but {{ product.id }} is still present.

Floating dynamique : dans le code ci-dessous, remplacez uniquement le texte en majuscules par votre projectId. Gardez {{ product.id }} tel quel.Dynamic Floating: in the code below, replace only the uppercase text with your projectId. Keep {{ product.id }} unchanged.

<!-- 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.Multiple widgets on one page: a Banner and Floating widget can share the same projectId. Their aliases distinguish them. Install and test each integration separately.

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 voyez	Ce qu’il faut faire
Le même widget apparaît partout, mais vous vouliez un widget différent	Vous utilisez encore un alias fixe. Passez au cas 3 et gardez `{{ product.id }}`.
Aucun widget sur un produit dans le cas dynamique	Vé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 produits	Le code est dans un modèle partagé. Créez un modèle unique et attribuez-le uniquement au produit ciblé.
Vous avez copié l’URL publique comme alias	Remplacez le handle par le Product ID numérique visible dans l’URL Shopify Admin.
Banner au mauvais endroit	Déplacez la section Liquid personnalisé dans le modèle Produit.
Floating au mauvais endroit	Changez sa position desktop/mobile dans Snackeet.
Banner fonctionne, Floating non	Vérifiez séparément le code, le statut live et l’alias de chaque integration.

What you see	What to do
The same widget appears everywhere, but you expected different widgets	You are still using a fixed alias. Switch to Case 3 and keep `{{ product.id }}`.
No widget appears on one product in the dynamic case	Check that the widget is live and its Dynamic Alias exactly matches the Shopify Product ID.
A product-specific widget appears on several products	The code is in a shared template. Create a unique template and assign it only to the intended product.
You copied the public URL as the alias	Replace the handle with the numeric Product ID shown in the Shopify Admin URL.
Banner is in the wrong place	Move the Custom liquid section in the Product template.
Floating widget is in the wrong place	Change its desktop/mobile position in Snackeet.
Banner works, Floating does not	Verify each integration’s code, live status, and alias separately.

+

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.

Page	Valeur Shopify	Exemple d’usage
Accueil	`home`	Une 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

Use these values only when targeting other page types. The value sent by Shopify must exactly match the Snackeet Dynamic Alias.

Page	Shopify value	Example use
Homepage	`home`	A general campaign
Collection	`{{ collection.id }}`	One widget per category
Standard page	`{{ page.id }}`	Guide, landing page, FAQ
Article	`{{ article.id }}`	A Story linked to editorial content

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.

Créer l’app
Apps → Create app → Start from Dev Dashboard. Nommez-la Snackeet Catalogue, puis cliquez sur Create.
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.
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.

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 Snackeet	Où le trouver	À retenir
URL de la boutique	Shopify Admin → Domains	`votre-boutique.myshopify.com`, sans `https://` ni chemin
Client ID	Dev Dashboard → app → Settings	Identifiant de l’app, pas un Product ID
Client Secret	Au même endroit	À coller uniquement dans le champ sécurisé de Snackeet

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.
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ôme	Vé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_permitted`	Vé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 impossible	Vérifiez Versions → Release, puis Home → Install app sur la boutique ciblée.
Identifiants refusés	Recopiez 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 inaccessible	Vérifiez `read_products`, publiez la version modifiée et approuvez les droits demandés par Shopify, puis reconnectez dans Snackeet.
Liste vide	Effacez 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.

Optional

Connect your catalog to find products inside Snackeet. Set this up once per store, not once per product. If your products are already available, keep your existing connection.

Before you start: use the owner's account or an account with app development permission, in the Shopify organization that owns the store. Agencies must work in the merchant's organization.

Open Shopify Dev Dashboard ↗ · Keep Snackeet open in another tab.

Create the app
Apps → Create app → Start from Dev Dashboard. Name it Snackeet Catalogue, then select Create.
Configure and release the version
In Versions, open or create a version. For this connection without an embedded interface, use the default App URL https://shopify.dev/apps/default-app-home. Turn off embedding in Shopify Admin if offered. Under Scopes, select only read_products. Keep a supported Webhooks API version offered by Shopify. Select Release and confirm.
Release the version before installing.
Install on the correct store
Home → Install app → your store → Install. Check the store name before confirming. Creating the app alone is not enough: it must be installed.

Find the three connection details

Open the app's Settings to copy the Client ID and Client Secret. Find your permanent store domain in Shopify Admin → Settings → Domains.

Visual reference — where each value comes from
Snackeet field	Where to find it	Remember
Shop URL	Shopify Admin → Domains	`your-store.myshopify.com`, without `https://` or a path
Client ID	Dev Dashboard → app → Settings	The app identifier, not a Product ID
Client Secret	The same location	Paste only into Snackeet's secure field

Connect in Snackeet
Open a webstory in the editor, then the add-element menu → Product and event → Shopify. If you already have a Shopify element, select it and choose Add a new product in its settings. Both paths open the product selector and, without a connected store, the connection form.
Fill in Shop URL, Client ID and Client Secret, then select Connect to Shopify. You do not need to generate or renew an access token manually. After checking the catalog, you can close the selector without adding a product to the story.
Check a product
Search for a familiar product: its name should appear, with an image if one is available. A missing image does not mean the connection failed. For storefront display, continue with Case 3: the dynamic product template; connecting the catalog alone does not install a widget.

Keep the Client Secret private: never put it in Shopify theme code, this guide, a screenshot, or a support message.

Connection not working?

Symptom	What to check
Domain rejected	Use the `.myshopify.com` domain without protocol, spaces or `/admin`. Your commercial domain will not work.
Store missing or `shop_not_permitted`	Check that the app and store belong to the same Shopify organization. Ask the owner to create the app in the correct organization.
App created but connection fails	Check Versions → Release, then Home → Install app on the intended store.
Credentials rejected	Copy both values again from this app's Settings, without spaces. If the secret changed, update it in Snackeet.
Connected but catalog inaccessible	Check `read_products`, release the updated version and approve permissions requested by Shopify, then reconnect in Snackeet.
Empty list	Clear the search and check the selected store and its products. If the issue persists, contact support with the step that failed, without any secret.

Checked September 7, 2026 · Sources: creation and installation, connecting within your organization, access permissions.

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.

Snackeet → Analytics → configuration du tracking Shopify.
Copiez le script généré pour ce projet.
Shopify → Settings → Customer events.
Ajoutez un custom pixel, collez le script, puis cliquez sur Save et Connect.
Testez un ajout au panier et une commande de test.

Événement	Ce qu’il mesure
`product_added_to_cart`	Un produit a été ajouté au panier.
`checkout_completed`	Le checkout Shopify a été terminé.

Optional

This step measures ecommerce actions. It is not required to display a widget.

Snackeet → Analytics → Shopify tracking setup.
Copy the script generated for this project.
Shopify → Settings → Customer events.
Add a custom pixel, paste the script, then click Save and Connect.
Test an add-to-cart action and a test order.

Event	What it measures
`product_added_to_cart`	A product was added to the cart.
`checkout_completed`	The Shopify checkout was completed.

Afficher des widgets Snackeet sur vos pages produit Shopify

Display Snackeet widgets on Shopify product pages

Quel résultat voulez-vous sur vos produits ?

Le même widget sur tous les produits

Un widget pour un produit précis

Un widget différent pour chaque produit

The same widget on every product

One widget for one specific product

A different widget for every product

Choisir Banner ou Floating

Dans le contenu du produit

Au-dessus de la page

Inside product content

Above the page

Avant de commencer

Récupérer le code depuis Snackeet

Comprendre les valeurs sans lire le code

Ouvrir le bon modèle Produit Shopify

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

Cas 2 — Un widget pour un produit précis

Cas 3 — Un widget différent pour chaque produit

Vérifier sur un vrai produit

Corriger un problème e-commerce

Autres pages e-commerce

Facultatif : importer les produits dans Snackeet

Créer l’app

Configurer et publier la version

Installer sur la bonne boutique

Récupérer les trois informations

Connecter dans Snackeet

Vérifier avec un produit

Create the app

Configure and release the version

Install on the correct store

Find the three connection details

Connect in Snackeet

Check a product

Facultatif : tracking e-commerce

Afficher des widgets Snackeet sur vos pages produit Shopify

Display Snackeet widgets on Shopify product pages

Quel résultat voulez-vous sur vos produits ?What result do you want on your products?

Le même widget sur tous les produits

Un widget pour un produit précis

Un widget différent pour chaque produit

The same widget on every product

One widget for one specific product

A different widget for every product

Choisir Banner ou FloatingChoose Banner or Floating

Dans le contenu du produit

Au-dessus de la page

Inside product content

Above the page

Avant de commencerBefore starting

Récupérer le code depuis SnackeetGet the code from Snackeet

Comprendre les valeurs sans lire le codeUnderstand the values without reading code

Ouvrir le bon modèle Produit ShopifyOpen the correct Shopify Product template

Cas 1 — Le même widget sur tous les produitsCase 1 — The same widget on every product

Cas 2 — Un widget pour un produit précisCase 2 — One widget for one specific product

Cas 3 — Un widget différent pour chaque produitCase 3 — A different widget for every product

Vérifier sur un vrai produitVerify on a real product

Corriger un problème e-commerceFix an ecommerce issue

Autres pages e-commerceOther ecommerce pages

Facultatif : importer les produits dans SnackeetOptional: import products into Snackeet

Créer l’app

Configurer et publier la version

Installer sur la bonne boutique

Récupérer les trois informations

Connecter dans Snackeet

Vérifier avec un produit

Create the app

Configure and release the version

Install on the correct store

Find the three connection details

Connect in Snackeet

Check a product

Facultatif : tracking e-commerceOptional: ecommerce tracking

Quel résultat voulez-vous sur vos produits ?

Choisir Banner ou Floating

Avant de commencer

Récupérer le code depuis Snackeet

Comprendre les valeurs sans lire le code

Ouvrir le bon modèle Produit Shopify

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

Cas 2 — Un widget pour un produit précis

Cas 3 — Un widget différent pour chaque produit

Vérifier sur un vrai produit

Corriger un problème e-commerce

Autres pages e-commerce

Facultatif : importer les produits dans Snackeet

Facultatif : tracking e-commerce