# Shopify
Shopify peut être connecté à The Wallet Crew via deux parcours complémentaires. L’un se concentre sur **l’inscription en magasin** et la création/mise à jour des clients dans Shopify. L’autre parcours se concentre sur l’ajout d’un **bouton « Add to Wallet »** à la boutique en ligne.
L’intégration Shopify diffère des intégrations SFCC / Adobe Commerce (Magento) / PrestaShop. Ces plateformes reposent généralement sur une implémentation personnalisée de la vitrine du SDK cinto. 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.
* **Inscription par QR code en magasin (flux hébergé par The Wallet Crew).** Un code QR ouvre une page d’inscription The Wallet Crew. Le flux peut créer ou mettre à jour le client Shopify, puis émettre une carte Wallet.
* **Bouton « Add to Wallet » de la boutique en ligne (application Shopify The Wallet Crew).** L’application Shopify expose un bloc de thème qui affiche un CTA « Add to Wallet » sur les pages sélectionnées.
Exemples concrets
* Une marque de distribution place un code QR près de la caisse. Le flux crée le client Shopify et émet une carte de fidélité.
* Une marque DTC ajoute un CTA « Add to Wallet » dans la zone compte après connexion.
* Un programme de cartes-cadeaux affiche un CTA « Add to Wallet » sur la page de carte-cadeau après l’achat.
* Un magasin utilise un formulaire piloté par QR code pour recueillir le consentement en magasin, puis envoie immédiatement la première carte.
{% hint style="info" %}
Lorsque seul le bouton de la boutique en ligne est nécessaire, passez à [Bouton « Add to Wallet » de la boutique en ligne](#online-store-add-to-wallet-button-shopify-app).
{% endhint %}
### Inscription par QR code 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 émettant une carte Wallet lors du même scan.
#### Résumé
* Créer une Shopify **application personnalisée** et générer un **jeton d’accès à l’API Admin**.
* Configurez le **URL de la boutique + jeton** dans The Wallet Crew.
* Ajouter une `Shopify` étape dans `server/flows.yml`.
* Générez un **Redirection** code QR et affichez-le en magasin.
#### Prérequis
* Accès administrateur à votre boutique Shopify.
* Accès à la console d’administration de The Wallet Crew.
* Un modèle de carte déjà configuré dans The Wallet Crew.
* Une inscription **page d’inscription** (la page affichée après le scan du code QR).
{% stepper %}
{% step %}
### Créer un jeton d’API Admin Shopify (application personnalisée)
1. Dans l’admin Shopify, allez à `Paramètres` → `Applications et canaux de vente`.
2. Cliquez sur `Développer des applications` → `Créer une application`.
3. Ouvrir `Configuration` → `Intégration de l’API Admin`.
4. Ajouter des scopes :
* `read_customers`
* `write_customers`
5. Installez l’application dans votre boutique.
6. Copiez le **jeton d’accès à l’API Admin**.
{% hint style="warning" %}
Traitez le jeton comme un mot de passe. Renouvelez-le s’il est exposé.
{% endhint %}
{% endstep %}
{% step %}
### Configurez Shopify dans The Wallet Crew
1. Dans le back-office The Wallet Crew, allez à `Intégration` → `CRM` → `Shopify`.
2. Collez :
* **URL de la boutique** (exemple : `https://your-shop.myshopify.com`)
* **jeton d’accès à l’API Admin**
3. Enregistrez.
{% endstep %}
{% step %}
### Activez Shopify dans `server/flows.yml`
Dans le back-office The Wallet Crew, allez à `Paramètres` → `Configuration avancée`.
Modifier `server/flows.yml` et assurez-vous :
* Le fournisseur est activé dans `customerProviders`.
* Le `Shopify` s’exécute **avant** la `Carte` étape.
{% code title="server/flows.yml" %}
```yaml
flux :
- type: userRegistration
name: user
steps:
- type: shopify
- type: Carte
passType: {{ passType }}
- type: mail
mailTemplate: downloadPass
customerProviders:
- type: shopify
```
{% endcode %}
{% hint style="info" %}
L’indentation YAML doit être exacte. Un seul mauvais retrait peut casser tout le flux.
{% endhint %}
{% endstep %}
{% step %}
### Créez le code QR en magasin (Redirection)
1. Dans le back-office The Wallet Crew, allez à `Mises en page` → `Redirections`.
2. Créez une redirection pointant vers votre mise en page d’inscription.
3. Copiez l’URL ou affichez 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. Terminez l’inscription.
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 de Shopify**
* Revérifiez les scopes de l’application. Vous devez `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 à l’API Admin** (pas un jeton de storefront).
**Le flux s’exécute, mais aucun client Shopify n’est créé**
* Assurez-vous `- type: shopify` est dans le `userRegistration` flux.
* Assurez-vous `customerProviders` inclut `- type: shopify`.
* Validez l’indentation YAML.
### Bouton « Add to Wallet » de la boutique en ligne (application Shopify)
L’application Shopify The Wallet Crew expose un bloc « Add to Wallet » dans l’éditeur de thème. Cette approche est souvent utilisée lorsqu’un point d’entrée « Add to Wallet » est nécessaire sans créer de module ou de cartridge personnalisé, comme dans les projets SFCC / Magento / PrestaShop.
#### Prérequis
* L’application Shopify The Wallet Crew est installée et activée.
* Une configuration d’émission de carte fonctionnelle dans The Wallet Crew (afin que le bouton ait quelque chose à fournir).
{% stepper %}
{% step %}
### Activer le bloc du thème
1. Rendez-vous dans l’admin Shopify → `Boutique en ligne` → `Thèmes`.
2. Cliquez sur `Personnaliser` pour le thème que vous souhaitez modifier.
3. Accédez à la page / au modèle où le bouton doit apparaître.
4. Cliquez sur `Ajouter une section` ou `Ajouter un bloc`.
5. Sous `Applications`, sélectionnez **Bouton Add to Wallet - The Wallet Crew**.
6. Enregistrez.
{% endstep %}
{% step %}
### Tester
* 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 boutique en ligne est généralement utilisé comme point d’entrée supplémentaire dans le parcours en ligne, souvent dans la zone compte ou sur les pages post-achat.
L’application Shopify est-elle requise pour le flux d’inscription QR en magasin ?
Non. Le flux QR en magasin repose sur une mise en page hébergée par The Wallet Crew et sur le jeton de l’API Admin Shopify configuré dans les paramètres du connecteur. L’application Shopify n’est requise que pour le scénario du bloc de thème (« Add to Wallet » button).
Quel jeton Shopify est requis ?
Le connecteur nécessite un **jeton d’accès à l’API Admin** émis par un **application personnalisée** avec `read_customers` et `write_customers` scopes. Un jeton de storefront ne fonctionne pas pour les opérations de création/mise à jour de client.
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 couvre les points d’entrée courants vers Wallet avec un minimum de travail personnalisé sur la boutique en ligne. Les intégrations SFCC / Magento / PrestaShop nécessitent généralement d’implémenter et de maintenir l’intégration du SDK cinto dans le code de la boutique en ligne.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.thewalletcrew.io/connectors/fr/e-commerce/shopify.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.