> 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

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 « Ajouter à Wallet »** sur la vitrine en ligne.

<figure><img src="/files/b13aabb10d020e7353be165875c00aab7a6bfcb4" alt=""><figcaption></figcaption></figure>

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 de la vitrine du SDK cinto. Shopify offre 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 QR 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 « Ajouter à Wallet » de la boutique en ligne (application Shopify The Wallet Crew).** L’application Shopify expose un bloc de thème qui affiche un CTA « Ajouter à Wallet » sur les pages sélectionnées.

<details>

<summary><strong>Exemples concrets</strong></summary>

* Une marque de retail 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 « Ajouter à Wallet » dans la zone du compte après la connexion.
* Un programme de cartes-cadeaux affiche un CTA « Ajouter à Wallet » sur la page de la carte-cadeau après l’achat.
* Un magasin utilise un formulaire déclenché par QR pour recueillir le consentement en magasin, puis envoie immédiatement la première carte.

</details>

{% hint style="info" %}
Lorsque seul le bouton de la boutique en ligne est nécessaire, passez à [Bouton « Ajouter à Wallet » de la boutique en ligne](#online-store-add-to-wallet-button-shopify-app).
{% endhint %}

### Inscription QR en magasin (flux hébergé par The Wallet Crew)

Cette configuration connecte le flux d’inscription de 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éez une Shopify **application personnalisée** et générez un **jeton d’accès à l’API Admin**.
* Configurez le **URL de la boutique + jeton** dans The Wallet Crew.
* Ajoutez 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 The Wallet Crew.
* Un modèle de carte déjà configuré dans The Wallet Crew.
* Une inscription **mise en page** (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 dans `Paramètres` → `Applications et canaux de vente`.
2. Cliquez sur `Développer des applications` → `Créer une application`.
3. Ouvrez `Configuration` → `Intégration de l’API Admin`.
4. Ajoutez les portées :
   * `lire_clients`
   * `écrire_clients`
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. Faites-le pivoter 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. Enregistrer.
   {% endstep %}

{% step %}

### Activer 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 :

* Le fournisseur est activé dans `customerProviders`.
* La `Shopify` l'étape s'exécute **avant** le `Carte` étape.

{% code title="server/flows.yml" %}

```yaml
flux :
  - type: inscriptionUtilisateur
    nom: utilisateur
    étapes :
      - type: Shopify
      - type: Carte
        typeCarte: {{ passType }}
      - type: courriel
        modèle d’e-mail : downloadPass

fournisseurs clients :
  - 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 votre mise en page d’inscription.
3. Copiez l’URL ou affichez le code QR.
4. Affichez-le en magasin.
   {% endstep %}
   {% endstepper %}

#### Valider 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'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**

* Vérifiez à nouveau les scopes de l'application. Vous devez `lire_clients` et `écrire_clients`.
* 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` comprend `- type: Shopify`.
* Validez l’indentation du YAML.

### Bouton en ligne “Ajouter au Wallet” (application Shopify)

L’application Shopify The Wallet Crew expose un bloc “Ajouter au Wallet” dans l’éditeur de thème. Ce parcours est souvent utilisé lorsqu’un point d’entrée “Ajouter au Wallet” est nécessaire sans créer de module ou de cartridge personnalisés, comme dans les projets SFCC / Magento / PrestaShop.

#### Prérequis

* L’application Shopify The Wallet Crew est installée et activée.
* Une configuration fonctionnelle d’émission de Carte dans The Wallet Crew (afin que le bouton ait quelque chose à délivrer).

{% stepper %}
{% step %}

### Activez le bloc de thème

1. Accédez à 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 sur lequel le bouton doit apparaître.
4. Cliquez sur `Ajouter une section` ou `Ajouter un bloc`.
5. Sous `Applications`, sélectionnez **Bouton Ajouter au Wallet - 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 (et non `Sections`).

### FAQ

<details>

<summary><strong>Peut-on utiliser ensemble le flux QR en magasin et le bouton en ligne ?</strong></summary>

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 du compte ou sur les pages post-achat.

</details>

<details>

<summary><strong>L’application Shopify est-elle requise pour le flux d’inscription QR en magasin ?</strong></summary>

Non. Le flux QR en magasin s’appuie sur une mise en page hébergée par The Wallet Crew et sur le jeton de l’API d’administration Shopify configuré dans les paramètres du connecteur. L’application Shopify n’est requise que pour le scénario du bloc de thème (« Ajouter au Wallet »).

</details>

<details>

<summary><strong>Quel jeton Shopify est requis ?</strong></summary>

Le connecteur nécessite un **jeton d’accès à l’API Admin** émis par une application Shopify **application personnalisée** avec `lire_clients` et `écrire_clients` portées. Un jeton de vitrine ne fonctionne pas pour les opérations de création/mise à jour du client.

</details>

<details>

<summary><strong>Quelle est la principale différence par rapport aux intégrations SFCC / Magento / PrestaShop ?</strong></summary>

Shopify prend en charge un connecteur maintenu et une application Shopify qui couvrent les points d’entrée courants du Wallet avec un minimum de travail personnalisé sur la vitrine. 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 vitrine.

</details>


---

# 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=<question>&goal=<endgoal>
```

`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.
