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

Ignorez cette annexe si vous voulez seulement afficher un Banner ou un Floating. Cette connexion sert uniquement à récupérer vos produits Shopify dans Snackeet.

Shopify → Settings → Apps and sales channels → Develop apps.
Créez une application pour cette boutique.
Dans l’Admin API, autorisez uniquement read_products.
Installez l’application et copiez le domaine permanent votre-boutique.myshopify.com.
Récupérez le Client ID et le Client Secret.
Dans Snackeet, ouvrez la connexion Shopify, saisissez ces informations, puis lancez l’import.

Sécurité : ne placez jamais le Client Secret dans le thème, une capture d’écran, un e-mail ou ce document.

read_products

Optional

Skip this appendix if you only want to display a Banner or Floating widget. This connection is used only to retrieve Shopify products inside Snackeet.

Shopify → Settings → Apps and sales channels → Develop apps.
Create an app for this store.
In the Admin API, grant only read_products.
Install the app and copy the permanent domain your-store.myshopify.com.
Retrieve the Client ID and Client Secret.
In Snackeet, open the Shopify connection, enter these details, then start the import.

Security: never put the Client Secret in the theme, a screenshot, an email, or this document.

read_products

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

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

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