# Shopify
Shopify peut être connecté à The Wallet Crew par deux voies complémentaires. Une voie se concentre sur **l'inscription en magasin** et la création/mise à jour du client dans Shopify. L'autre voie se concentre sur l'ajout d'un **« Ajouter au Wallet » bouton** à la vitrine en ligne.
L'intégration Shopify est différente des intégrations SFCC / Adobe Commerce (Magento) / PrestaShop. Ces plateformes reposent généralement sur une implémentation personnalisée du SDK cinto dans la vitrine. Shopify propose une surface d'intégration maintenue via un connecteur et une application dédiés, ce qui réduit le code personnalisé et la maintenance à long terme.
* **Enregistrement par QR en magasin (flux hébergé par The Wallet Crew).** Un code QR ouvre une mise en page d'enregistrement The Wallet Crew. Le flux peut créer ou mettre à jour le client Shopify, puis délivrer une carte Wallet.
* **Bouton « Ajouter au Wallet » sur la boutique en ligne (application Shopify The Wallet Crew).** L'application Shopify expose un bloc de thème qui affiche un CTA « Ajouter au Wallet » sur des pages sélectionnées.
Exemples concrets
* Une marque de détail place un code QR près de la caisse. Le flux crée le client Shopify et délivre une carte de fidélité.
* Une marque DTC ajoute un CTA « Ajouter au Wallet » dans la zone de compte après connexion.
* Un programme de carte-cadeau affiche un CTA « Ajouter au Wallet » sur la page de la carte-cadeau après l'achat.
* Un magasin utilise un formulaire piloté par QR pour capturer le consentement en magasin, puis pousse la première carte immédiatement.
{% hint style="info" %}
Lorsque seul le bouton de la vitrine est nécessaire, passez à [Bouton « Ajouter au Wallet » sur la boutique en ligne](#online-store-add-to-wallet-button-shopify-app).
{% endhint %}
### Enregistrement par QR en magasin (flux hébergé par The Wallet Crew)
Cette configuration connecte le flux d'inscription The Wallet Crew à l'API Admin de Shopify. Elle est généralement utilisée lorsque le parcours en magasin doit créer ou mettre à jour un enregistrement client Shopify tout en délivrant une carte Wallet lors du même scan.
#### Résumé
* Créez une **application personnalisée** et générez un **jeton d'accès Admin API**.
* Configurez le **URL du shop + jeton** dans The Wallet Crew.
* Ajoutez un `shopify` step dans `server/flows.yml`.
* Générez un **QR de redirection** et affichez-le en magasin.
#### Prérequis
* Accès Admin à votre boutique Shopify.
* Accès à la console d'administration The Wallet Crew.
* Un modèle de carte déjà configuré dans The Wallet Crew.
* Une **mise en page** (la page affichée après le scan du code QR).
{% stepper %}
{% step %}
### Créez un jeton Admin API Shopify (application personnalisée)
1. Dans Shopify Admin, allez à `Paramètres` → `Applications et canaux de vente`.
2. Cliquez `Développer des applications` → `Créer une application`.
3. Ouvrir `Configuration` → `Intégration Admin API`.
4. Ajoutez les scopes :
* `read_customers`
* `write_customers`
5. Installez l'application dans votre boutique.
6. Copiez le **jeton d'accès Admin API**.
{% hint style="warning" %}
Traitez le jeton comme un mot de passe. Faites-le pivoter s'il est exposé.
{% endhint %}
{% endstep %}
{% step %}
### Configurer Shopify dans The Wallet Crew
1. Dans le backoffice The Wallet Crew, allez à `Intégration` → `CRM` → `Shopify`.
2. Collez :
* **URL du shop** (exemple : `https://your-shop.myshopify.com`)
* **jeton d'accès Admin API**
3. Enregistrer.
{% endstep %}
{% step %}
### Activez Shopify dans `server/flows.yml`
Dans le backoffice The Wallet Crew, allez à `Paramètres` → `Configuration avancée`.
Edit `server/flows.yml` et assurez-vous :
* Le fournisseur est activé dans `customerProviders`.
* La `shopify` l'étape s'exécute **avant** le `l'étape` pass.
{% code title="server/flows.yml" %}
```yaml
flows :
- type: userRegistration
name: user
steps :
- type: shopify
- type: pass
passType : {{ passType }}
- type: mail
mailTemplate : downloadPass
customerProviders :
- type: shopify
```
{% endcode %}
{% hint style="info" %}
L'indentation YAML doit être exacte. Une mauvaise indentation peut casser tout le flux.
{% endhint %}
{% endstep %}
{% step %}
### Créez le code QR en magasin (Redirection)
1. Dans le backoffice The Wallet Crew, allez à `Mises en page` → `Redirections`.
2. Créez une redirection pointant vers votre mise en page d'enregistrement.
3. Copiez l'URL ou générez le code QR.
4. Affichez-le en magasin.
{% endstep %}
{% endstepper %}
#### Validez l'intégration
La validation doit couvrir à la fois la synchronisation des clients Shopify et la livraison de la carte.
1. Scannez le code QR depuis un téléphone.
2. Complétez l'enregistrement.
3. Confirmez que le client existe (ou est mis à jour) dans Shopify.
4. Confirmez que la carte est créée et peut être ajoutée à Apple Wallet / Google Wallet.
#### Dépannage
**401 / 403 depuis Shopify**
* Vérifiez à nouveau les scopes de l'application. Vous avez besoin de `read_customers` et `write_customers`.
* Réinstallez l'application personnalisée après avoir modifié les scopes.
* Assurez-vous d'avoir collé un **jeton d'accès Admin API** (pas un jeton de vitrine).
**Le flux s'exécute, mais aucun client Shopify n'est créé**
* Assurez-vous que `- type: shopify` est dans le `userRegistration` flow.
* Assurez-vous que `customerProviders` comprend `- type: shopify`.
* Validez l'indentation YAML.
### Bouton « Ajouter au Wallet » sur la boutique en ligne (application Shopify)
L'application Shopify The Wallet Crew expose un bloc « Ajouter au Wallet » dans l'éditeur de thème. Cette voie est souvent utilisée lorsqu'un point d'entrée « Ajouter au Wallet » est nécessaire sans construire un module ou un cartridge personnalisé, comme dans les projets SFCC / Magento / PrestaShop.
#### Prérequis
* L'application The Wallet Crew pour Shopify installée et activée.
* Un dispositif de délivrance de cartes opérationnel dans The Wallet Crew (pour que le bouton ait quelque chose à délivrer).
{% stepper %}
{% step %}
### Activez le bloc de thème
1. Allez dans Shopify Admin → `Boutique en ligne` → `Thèmes`.
2. Cliquez `Personnaliser` pour le thème que vous souhaitez modifier.
3. Naviguez jusqu'à la page/modèle où le bouton doit apparaître.
4. Cliquez `Ajouter une section` ou `Ajouter un bloc`.
5. Sous `Applications`, sélectionnez **Add to Wallet Button - The Wallet Crew**.
6. Enregistrer.
{% endstep %}
{% step %}
### Test
* Sur ordinateur, scannez le code QR avec votre téléphone.
* Sur mobile, appuyez sur **Ajouter à Apple Wallet** ou **Ajouter à Google Wallet**.
{% endstep %}
{% endstepper %}
#### Dépannage
**Le bloc de thème n'apparaît pas**
* Assurez-vous que l'application est installée et activée.
* Essayez d'ajouter le bloc sur un autre modèle (produit vs page vs compte).
* Vérifiez la `Applications` section de l'éditeur de thème (pas `Sections`).
### FAQ
Les flux QR en magasin et le bouton en ligne peuvent-ils être utilisés ensemble ?
Oui. Le flux en magasin est généralement utilisé pour l'inscription et la création/mise à jour du client. Le bouton de la vitrine est généralement utilisé comme point d'entrée supplémentaire dans le parcours en ligne, souvent dans la zone de compte ou les pages post-achat.
L'application Shopify est-elle requise pour le flux d'enregistrement par QR en magasin ?
Non. Le flux QR en magasin repose sur une mise en page hébergée par The Wallet Crew et le jeton Admin API Shopify configuré dans les paramètres du connecteur. L'application Shopify n'est requise que pour le scénario du bloc de thème (bouton « Ajouter au Wallet »).
Quel jeton Shopify est requis ?
Le connecteur nécessite un **jeton d'accès Admin API** émis par un Shopify **application personnalisée** avec `read_customers` et `write_customers` scopes. Un jeton de vitrine ne fonctionne pas pour les opérations de création/mise à jour de clients.
Quelle est la principale différence par rapport aux intégrations SFCC / Magento / PrestaShop ?
Shopify prend en charge un connecteur maintenu et une application Shopify qui couvrent les points d'entrée Wallet courants avec un minimum de travail personnalisé sur la vitrine. Les intégrations SFCC / Magento / PrestaShop exigent généralement d'implémenter et de maintenir l'intégration du SDK cinto dans la base de code de la vitrine.
