> For the complete documentation index, see [llms.txt](https://docs.thewalletcrew.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thewalletcrew.io/connectors/fr/e-commerce/shopify.md). # Shopify Connectez Shopify à The Wallet Crew pour créer/mettre à jour les clients et livrer des Cartes Wallet depuis des flux QR en magasin ou des boutons en ligne « Add to Wallet ». Shopify peut être connecté à The Wallet Crew via deux parcours complémentaires. Un parcours 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.
Shopify connected to The Wallet Crew for in-store QR enrolment and an online Add to Wallet button

Deux points d’entrée : un flux d’inscription en magasin via QR code, et un bloc « Add to Wallet » dans le thème de la boutique en ligne.

L’intégration Shopify est différente des intégrations SFCC / Adobe Commerce (Magento) / PrestaShop. Ces plateformes s’appuient généralement sur une implémentation personnalisée du storefront 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 en magasin via QR code (flux hébergé par The Wallet Crew).** Un code QR ouvre une mise en 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 réels * Une marque de vente au détail 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 de compte après la connexion. * Un programme de cartes-cadeaux affiche un CTA « Add to Wallet » sur la page de carte-cadeau après l’achat. * Une boutique utilise un formulaire piloté par QR code pour recueillir le consentement en magasin, puis émet 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 en magasin via QR code (flux hébergé par The Wallet Crew) Cette configuration connecte le flux d’inscription de The Wallet Crew à l’API Shopify Admin. 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**. * Configurer le **URL de la boutique + jeton** dans The Wallet Crew. * Ajouter une `Shopify` étape dans `server/flows.yml`. * Générer un **Redirection** code QR et l’afficher en magasin. #### Prérequis * Accès administrateur à la boutique Shopify. * Accès à la console d’administration de The Wallet Crew. * Un modèle de carte déjà configuré dans The Wallet Crew. * Un formulaire d’inscription **mise en page** (la page affichée après le scan du code QR). {% stepper %} {% step %} ### Créer un jeton de l’API Shopify Admin (application personnalisée) 1. Dans Shopify Admin, 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 d'administration`. 4. Ajouter les scopes : * `read_customers` * `write_customers` 5. Installez l'application dans la boutique. 6. Copiez le **jeton d’accès à l’API Admin**. {% hint style="warning" %} Traitez le jeton comme un mot de passe. Faites-le tourner s'il est exposé. {% endhint %} {% endstep %} {% step %} ### Configurez Shopify dans The Wallet Crew 1. Dans le back-office de 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 de The Wallet Crew, allez à `Paramètres` → `Configuration avancée`. Modifiez `server/flows.yml` et assurez-vous que : * Le fournisseur est activé dans `customerProviders`. * Le `Shopify` l'étape s'exécute **avant** le `Carte` étape. {% code title="server/flows.yml" %} ```yaml flux : - type: userRegistration name: user steps : - type: shopify - type: Carte passType: {{ passType }} - type: mail mailTemplate: downloadCarte customerProviders : - type: shopify ``` {% endcode %} {% hint style="info" %} L'indentation YAML doit être exacte. Une seule mauvaise indentation peut casser tout le flux. {% endhint %} {% endstep %} {% step %} ### Créer le code QR en magasin (Redirection) 1. Dans le back-office de The Wallet Crew, allez à `Mises en page` → `Redirections`. 2. Créez une redirection pointant vers la 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 a été 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. `read_customers` et `write_customers` sont requis. * Réinstallez l'application personnalisée après avoir modifié les scopes. * Assurez-vous que la valeur collée est un **jeton d’accès à l’API Admin** (et non un jeton 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. Ce chemin est souvent utilisé 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 %} ### Activez le bloc de thème 1. Allez dans l'admin Shopify → `Boutique en ligne` → `Thèmes`. 2. Cliquez sur `Personnaliser` pour le thème à modifier. 3. Accédez à la page / au template 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 un 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 template (produit vs page vs compte). * Vérifiez l'éditeur de thème `Applications` section (et non `Sections`). ### FAQ
Le flux QR en boutique et le bouton en ligne peuvent-ils être utilisés ensemble ? Oui. Le flux en boutique 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 du compte ou sur les pages post-achat.
L'application Shopify est-elle requise pour le flux d'inscription QR en boutique ? Non. Le flux QR en boutique s'appuie sur une mise en page hébergée par The Wallet Crew et sur le jeton Shopify Admin API 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 une Shopify **application personnalisée** avec `read_customers` et `write_customers` des scopes. Un jeton 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 Wallet courants avec un travail minimal sur le storefront personnalisé. 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 codebase du storefront.
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.thewalletcrew.io/connectors/fr/e-commerce/shopify.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.