> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Comment activer le widget d'abonnement sur la boutique en ligne

| Pour accéder à cette page, allez dans [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget)

Le widget est ce que vos clients utilisent pour choisir un abonnement ou un lot sur vos pages produit. Un seul widget affiche les deux : vos options d'abonnement et vos options de lot. Pour l'activer, cliquez sur **Activer le widget** sur la page **Design**, puis sur **Enregistrer** dans votre éditeur de thème. Il n'y a aucun code, code d'intégration ou extrait à coller.

### Table des matières

* [Présentation en vidéo](#3-presentation-en-video)
* [Instructions pas à pas](#3-instructions-pas-a-pas)
* [Où apparaît le widget](#3-ou-apparait-le-widget)
* [Choisir un emplacement précis](#3-choisir-un-emplacement-precis)
* [Afficher le widget sur d'autres pages](#3-afficher-le-widget-sur-dautres-pages)
* [Fenêtres d'ajout rapide et d'aperçu rapide](#3-fenetres-dajout-rapide-et-dapercu-rapide)
* [PageFly et autres constructeurs de pages](#3-pagefly-et-autres-constructeurs-de-pages)
* [Configurer sur un thème non publié](#3-configurer-sur-un-theme-non-publie)
* [Dépannage](#3-depannage)
* [Questions fréquentes](#3-questions-frequentes)
* [Guides associés](#3-guides-associes)

### Présentation en vidéo

Si vous préférez regarder plutôt que lire, cette vidéo montre l'activation de l'intégration d'application dans l'éditeur de thème. C'est ce réglage qu'**Activer le widget** active pour vous.

${frame}[](https://www.youtube.com/embed/UpHcV7CoYVg)

### Instructions pas à pas

1. Dans votre admin Shopify, ouvrez **Supr Bundles & Subscriptions** et allez dans **Design**.
2. Si le widget n'est pas encore activé, vous voyez une bannière **Vos widgets ne sont pas encore en ligne**. Cliquez sur **Activer le widget** (dans la bannière ou en haut de la page).
3. Dans la fenêtre qui s'ouvre, cliquez sur **Activer**. Votre éditeur de thème s'ouvre dans un nouvel onglet avec **Supr Bundle & Subscriptions** activé dans **Intégrations d'applications**.
![Bouton Activer](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/screenshot-2025-07-12-at-19571_gm3jkw.png =757xauto)
4. Dans l'éditeur de thème, cliquez sur **Enregistrer** en haut à droite. L'éditeur affiche un rappel **One more step** tant que vous ne l'avez pas fait. Si vous fermez l'éditeur sans enregistrer, le widget reste désactivé.
![Bouton Enregistrer de l'éditeur de thème](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/5c6ce361-b562-467d-bf5c-f57834_bnt2do.png)
5. Revenez à l'onglet de l'application. Vous voyez **Widget activé** dès que l'application a détecté le réglage enregistré. S'il est indiqué **Widget non activé**, cliquez à nouveau sur **Activer** et veillez à cliquer sur **Enregistrer** cette fois.

Vous pouvez aussi commencer depuis **Accueil** : l'étape **Widget activé** du guide de configuration (ou **Widget d'abonnement activé** / **Widget de lot activé**, selon ce que vous vendez) a le même bouton **Activer le widget**. Une fois le widget activé, ce bouton devient **Personnaliser le widget** et vous emmène dans **Design**.

|| Vous préférez le faire à la main ? Dans votre admin Shopify, allez dans **Boutique en ligne > Thèmes**, cliquez sur **Personnaliser** sur votre thème en ligne, ouvrez **Intégrations d'applications** (l'icône en bas de la barre latérale gauche), activez **Supr Bundle & Subscriptions** et cliquez sur **Enregistrer**. Dans les anciennes versions de l'application, ce réglage s'appelait **Subscriptions (1.0 themes only)**.

### Où apparaît le widget

Il n'y a rien à faire glisser. Le widget se place de lui-même sur vos pages produit, juste au-dessus du bouton d'ajout au panier, et il fonctionne de la même façon sur tous les thèmes, y compris les anciens thèmes (vintage). Pour le placer ailleurs, consultez [Choisir un emplacement précis](#3-choisir-un-emplacement-precis).

* Il apparaît sur chaque page produit dont le produit fait partie d'une offre **Publiée**, quel que soit le modèle de produit utilisé.
* Vos options de lot se placent juste à côté des options d'abonnement. Le fait que les options de lot soient au-dessus ou en dessous se règle dans **Design > Éléments > Mise en page > Lot en premier**.
* L'espace au-dessus et en dessous du widget se règle dans **Design > Espacement > Autour du widget**.
* Le widget n'a pas de bouton d'ajout au panier propre. Il utilise le bouton d'ajout au panier de votre thème, votre page produit a donc besoin du bloc **Boutons d'achat** du thème.

### Choisir un emplacement précis

Il y a deux façons de déplacer le widget : le réglage **Emplacement** de la page **Design**, qui s'applique à toutes les pages produit à la fois (un design enregistré a son propre **Emplacement**, pour les offres qui l'utilisent), ou le bloc **Subscriptions + Bundles**, que vous faites glisser exactement où vous le souhaitez.

**Avec le réglage Emplacement :**

1. Dans l'application, allez dans **Design**. La section **Emplacement** s'affiche une fois le widget activé (voir les étapes ci-dessus).
2. Choisissez un **Emplacement sur la page produit** :
   * **Au-dessus du bouton Ajouter au panier (automatique)** : le réglage par défaut.
   * **Sous les boutons d'achat** : sous le bouton d'ajout au panier et les boutons de paiement express, comme Acheter maintenant.
   * **Au-dessus du sélecteur de quantité** : au-dessus du champ de quantité. Si votre thème affiche la quantité sur la même ligne que le bouton d'ajout au panier, le widget se place au-dessus de cette ligne.
   * **Personnalisé (sélecteur CSS)** : n'importe où sur la page. Saisissez dans **Sélecteur CSS** un sélecteur CSS correspondant à un élément de votre page produit, par exemple `.product__title`, et choisissez sous **Placer le widget** si le widget se place avant ou après cet élément, ou à l'intérieur, au début ou à la fin.
3. Cliquez sur **Enregistrer**.

Si l'emplacement choisi n'existe pas sur une page (par exemple une page produit sans sélecteur de quantité, ou un sélecteur qui ne correspond à rien), le widget revient à son emplacement automatique au-dessus du bouton d'ajout au panier, il ne disparaît donc jamais. Le réglage s'applique à tous les thèmes sur lesquels vous activez le widget.

|| Vous ne savez pas quel sélecteur CSS utiliser ? Contactez le support avec un lien vers votre page produit et l'endroit où vous voulez le widget, et nous vous en enverrons un.

**Avec le bloc :** si vous voulez le widget à un endroit précis, par exemple sous le prix ou sous une ligne d'avis, ajoutez le bloc **Subscriptions + Bundles** à cet endroit :

1. Allez dans **Boutique en ligne > Thèmes** et cliquez sur **Personnaliser**.
2. Ouvrez une page produit avec le sélecteur de modèle en haut de l'éditeur (par exemple **Produits > Produit par défaut**).
3. Dans la section des informations produit, cliquez sur **Ajouter un bloc**, puis **Applications**, puis **Subscriptions + Bundles**.
4. Faites glisser le bloc à l'endroit où vous voulez le widget et cliquez sur **Enregistrer**.

Laissez l'intégration d'application activée. Partout où un bloc **Subscriptions + Bundles** est présent sur la page, la copie de l'intégration se retire d'elle-même, vous n'obtenez donc jamais deux widgets de cette façon.

|| Un bloc appartient au modèle, pas à un seul produit. Le déplacer déplace le widget sur tous les produits qui utilisent ce modèle. Si vos produits utilisent plusieurs modèles de produit, répétez l'opération sur chaque modèle où vous voulez le nouvel emplacement. Les modèles sans bloc gardent l'emplacement automatique au-dessus du bouton d'ajout au panier.

### Afficher le widget sur d'autres pages

Vous pouvez aussi vendre depuis une page qui n'est pas la page du produit lui-même, comme une page d'atterrissage, une page de collection, votre page d'accueil ou un article de blog. Le widget complet y apparaît, avec les mêmes options de lot, les mêmes options d'abonnement et le même design que ceux que vous avez configurés sur la page **Design**.

1. Dans votre éditeur de thème, ouvrez la page souhaitée.
2. Ajoutez une section qui affiche un seul produit. La plupart des thèmes l'appellent **Produit en vedette**.
3. Dans cette section, cliquez sur **Ajouter un bloc**, puis **Applications**, puis **Subscriptions + Bundles**.
4. Cliquez sur le bloc et définissez son **Produit**. En dehors d'une page produit, le bloc ne peut pas deviner de quel produit il s'agit, il faut donc le lui indiquer. Tant que ce n'est pas fait, l'éditeur de thème affiche **Nothing to show yet: this block has no product selected**.
5. Gardez le bloc **Boutons d'achat** de la section. Le widget utilise ce bouton d'ajout au panier.
6. Cliquez sur **Enregistrer**.

|| Vous pouvez en placer plusieurs sur la même page. Chacun garde ses propres options et ses propres prix, et le bouton d'ajout au panier de chaque produit transmet le choix que l'acheteur a fait pour ce produit.

L'intégration d'application seule n'affiche le widget que sur les pages produit. Pour toute autre page, utilisez le bloc comme ci-dessus.

Pour un bouton, une bannière ou un e-mail, une autre possibilité est un lien d'abonnement rapide : **Croissance > Liens d'abonnement rapide** crée un lien qui mène directement au paiement avec le produit et l'abonnement déjà choisis. Consultez [Créer des invitations à s'abonner (liens d'abonnement rapide)](https://supr-bundles-and-subscriptions.crisp.help/fr/article/creating-subscription-invitations-quick-subscribe-links-1w7g5tt/).

### Fenêtres d'ajout rapide et d'aperçu rapide

De nombreux thèmes ont un bouton **Ajout rapide** ou **Aperçu rapide** sur les fiches produit des collections et de la page d'accueil. L'affichage du widget à cet endroit dépend du thème :

* **Thèmes dont la fenêtre charge le formulaire produit complet** (par exemple Dawn avec l'ajout rapide standard) : le widget et les options de lot s'affichent dans la fenêtre quand le bloc **Subscriptions + Bundles** est présent dans votre modèle de produit. Ajoutez-le comme décrit dans [Choisir un emplacement précis](#3-choisir-un-emplacement-precis).
* **Horizon et les thèmes basés sur lui** : pour un produit avec un abonnement, le bouton d'ajout rapide ouvre la page produit au lieu d'une fenêtre, et le widget s'y trouve comme d'habitude.
* **Autres thèmes** : si la fenêtre n'affiche pas de widget ou en affiche un cassé, désactivez l'ajout rapide dans l'éditeur de thème (c'est généralement un réglage de la section de collection ou de grille de produits) pour que les acheteurs aillent sur la page produit, ou contactez le support et nous vérifierons votre thème.

### PageFly et autres constructeurs de pages

Il n'y a pas d'identifiant de widget, de shortcode ni de code d'intégration, et coller du code dans un élément Custom Code ou HTML ne fonctionnera pas. Le widget est un bloc d'application Shopify, et Shopify ne permet d'ajouter des blocs d'application que via l'éditeur de thème. Les constructeurs de pages le permettent avec leur propre élément de bloc d'application.

**Sur une page produit PageFly**, vous n'avez rien à faire. Avec l'intégration d'application activée (voir les étapes ci-dessus), le widget se place de lui-même au-dessus du bouton d'ajout au panier, comme sur une page produit du thème.

**Sur une page d'atterrissage PageFly :**

1. Dans l'éditeur PageFly, ouvrez votre page et faites glisser l'élément **App blocks** (sous Shopify elements) à l'endroit où vous voulez le widget. PageFly autorise un seul élément App blocks par page, et il nécessite un thème Online Store 2.0.
2. Suivez l'invite de PageFly pour ouvrir l'éditeur de thème, puis cliquez sur **Ajouter un bloc**, **Applications**, **Subscriptions + Bundles**.
3. Cliquez sur le bloc et définissez son **Produit** sur le produit ciblé par votre offre.
4. Assurez-vous que la page contient aussi le bouton d'ajout au panier PageFly pour ce même produit, puis enregistrez et publiez.

Le guide de PageFly pour cet élément : [How to use the App blocks element](https://help.pagefly.io/page-structure-and-elements/shopify-elements/custom-content/how-to-use-shopify-app-block-element-with-pagefly-section).

**GemPages, Shogun et les autres constructeurs** fonctionnent de la même façon : les pages produit reçoivent le widget via l'intégration d'application, et les autres pages ont besoin de l'élément du constructeur pour les blocs d'application Shopify, avec **Subscriptions + Bundles** ajouté dedans. Si votre constructeur ne propose pas le bloc, contactez le support.

|| Une fois votre page en ligne, ajoutez le produit au panier avec un abonnement sélectionné et vérifiez que le panier l'affiche. Si ce n'est pas le cas, envoyez-nous le lien de la page et nous placerons le widget pour vous.

### Configurer sur un thème non publié

**Activer le widget** ouvre toujours votre thème en ligne (publié). Pour configurer et tester d'abord sur un autre thème :

1. Allez dans **Boutique en ligne > Thèmes**, trouvez le thème et cliquez sur **Personnaliser** (ou **Modifier le thème**).
2. Ouvrez **Intégrations d'applications**, activez **Supr Bundle & Subscriptions** et cliquez sur **Enregistrer**.
3. Prévisualisez ce thème et ouvrez un produit qui fait partie de l'une de vos offres.

Le widget n'apparaît que sur les thèmes où il est activé, votre thème en ligne reste donc inchangé tant que vous ne l'y activez pas aussi. Vos offres sont partagées par tous les thèmes : une fois le widget activé sur votre thème en ligne, chaque offre **Publiée** s'y affiche.

### Dépannage

|| Si le widget n'apparaît pas après l'enregistrement, vérifiez que l'éditeur de thème a bien enregistré. Vous pouvez cliquer à nouveau sur **Activer le widget** pour réessayer.

Si vous ne voyez toujours pas le widget sur vos pages produit, suivez [Le widget d'abonnement ne s'affiche pas dans ma boutique](https://supr-bundles-and-subscriptions.crisp.help/fr/article/the-subscription-widget-is-not-displayed-in-my-store-3v7crh/). S'il apparaît deux fois ou au mauvais endroit, consultez [Le widget d'abonnement apparaît deux fois ou en bas de la page](https://supr-bundles-and-subscriptions.crisp.help/fr/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-19jsafb/).

### Questions fréquentes

**Dois-je ajouter un code d'intégration ou un extrait Liquid à mon thème ?**
Non. **Design > Activer le widget** active le widget dans votre thème, et vous cliquez sur **Enregistrer** dans l'éditeur de thème. Rien n'est à coller.

**J'ai cliqué sur Activer le widget mais rien n'a changé sur ma boutique. Pourquoi ?**
Presque toujours parce que l'éditeur de thème a été fermé sans cliquer sur **Enregistrer**. Cliquez à nouveau sur **Activer le widget** puis sur **Enregistrer** en haut à droite de l'éditeur de thème.

**Ai-je besoin de l'intégration d'application et du bloc d'application ?**
Vous avez besoin de l'intégration d'application. Le bloc **Subscriptions + Bundles** est facultatif : ajoutez-le uniquement pour choisir un emplacement précis ou pour afficher le widget sur une page qui n'est pas une page produit. Utiliser les deux n'affiche jamais le widget deux fois.

**L'éditeur de thème indique que le bloc d'application n'a pas pu être ajouté. Que faire ?**
Utilisez plutôt l'intégration d'application : **Design > Activer le widget**, puis **Enregistrer**. L'intégration n'a pas besoin d'une place dans votre section produit, elle fonctionne donc sur les thèmes dont la section produit n'accepte pas les blocs d'application.

**Dois-je ajouter le widget à chaque produit ?**
Non. Le widget s'affiche sur chaque produit qui fait partie d'une offre Publiée. Vous choisissez les produits dans l'offre, sous **S'applique à**, pas dans le thème.

**Puis-je afficher le widget sur ma page d'accueil ou une page d'atterrissage ?**
Oui. Ajoutez une section **Produit en vedette**, ajoutez-y le bloc **Subscriptions + Bundles** et définissez son **Produit**. Consultez [Afficher le widget sur d'autres pages](#3-afficher-le-widget-sur-dautres-pages).

**Les clients peuvent-ils choisir un abonnement sur la page du panier ?**
Oui, avec le module **Vente incitative du panier** de la page **Design** : un bouton **Abonnez-vous et économisez** sous chaque produit acheté en achat unique, sur la page du panier et dans le tiroir du panier, fait passer ce produit sur sa première option d'abonnement. Pour choisir une autre fréquence, les clients font leur choix sur la page produit. Sur Shopify Plus, le Checkout Subscription Picker leur permet aussi de changer au moment du paiement, consultez [Passer à un abonnement au paiement](https://supr-bundles-and-subscriptions.crisp.help/fr/article/what-shoppers-see-in-the-cart-and-at-checkout-1xxu0g/#3-passer-a-un-abonnement-au-paiement-shopify-plus). Consultez [Vente incitative du panier](https://supr-bundles-and-subscriptions.crisp.help/fr/article/product-page-add-ons-l0q5wx/#3-vente-incitative-du-panier).

**Puis-je plutôt placer le widget sous le bouton d'ajout au panier ?**
Oui. Sur la page **Design**, réglez **Emplacement > Emplacement sur la page produit** sur **Sous les boutons d'achat** et cliquez sur **Enregistrer**. Consultez [Choisir un emplacement précis](#3-choisir-un-emplacement-precis).

**Comment placer le widget au-dessus du bouton d'ajout au panier ?**
Avec l'intégration d'application activée, c'est là qu'il se place de lui-même. S'il se trouve ailleurs, consultez [Le widget d'abonnement apparaît deux fois ou en bas de la page](https://supr-bundles-and-subscriptions.crisp.help/fr/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-19jsafb/).

### Guides associés

* [[Guide vidéo] Comment activer l'INTÉGRATION D'APPLICATION](https://supr-bundles-and-subscriptions.crisp.help/fr/article/video-guide-how-to-enable-app-embed-1q28tst/)
* [Le widget d'abonnement](https://supr-bundles-and-subscriptions.crisp.help/fr/article/the-subscription-widget-oha52l/)
* [Le widget d'abonnement ne s'affiche pas dans ma boutique](https://supr-bundles-and-subscriptions.crisp.help/fr/article/the-subscription-widget-is-not-displayed-in-my-store-3v7crh/)
* [Le widget d'abonnement apparaît deux fois ou en bas de la page](https://supr-bundles-and-subscriptions.crisp.help/fr/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-19jsafb/)
* [Créer des invitations à s'abonner (liens d'abonnement rapide)](https://supr-bundles-and-subscriptions.crisp.help/fr/article/creating-subscription-invitations-quick-subscribe-links-1w7g5tt/)
* [Qu'est devenu l'éditeur de widget](https://supr-bundles-and-subscriptions.crisp.help/fr/article/what-happened-to-the-widget-editor-1fhmw1a/)