> ## 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).

# Concevoir votre propre widget

Le concepteur de widget personnalisé vous permet d'écrire vous-même le HTML et le CSS de votre widget d'abonnement, de vos options de lot et de l'encadré qui les entoure, pour que le widget s'accorde parfaitement avec le reste de votre page produit. Il est en version bêta : demandez-nous dans le chat de l'activer pour votre boutique.

## Ouvrir le concepteur

1. Allez dans **Supr Bundles & Subscriptions > Design**.
2. Cliquez sur le design **Custom (Liquid)**. La première fois, il ouvre le concepteur pour que vous puissiez créer votre design.

Cliquez sur **Enregistrer** pour conserver vos modifications. Chaque modification enregistrée est conservée sous **Versions** : vous pouvez donc toujours revenir en arrière.

## Utiliser votre design sur votre boutique

Une fois votre design enregistré, **Custom (Liquid)** peut être choisi sur la page Design comme n'importe quel autre design, pour le widget d'abonnement, pour le widget de lot, ou pour les deux. Choisissez-le et enregistrez la page Design. Dès lors, chaque enregistrement dans le concepteur est immédiatement en ligne sur les widgets qui l'utilisent.

## Les trois onglets

* **Widget d'abonnement** : les options d'abonnement et la ligne d'achat unique.
* **Options de lot** : la barre de lot et chacune de ses options, y compris les box à composer, les lots fixes, les produits complémentaires et les cadeaux offerts.
* **Mise en page** : tout ce que le bloc d'application affiche, dans un seul encadré : le titre de l'offre, le widget d'abonnement, les options de lot, ainsi qu'un bouton d'ajout au panier et un sélecteur de quantité à vous.

L'onglet **Mise en page** comporte un seul interrupteur, **Utiliser cette mise en page** : lorsqu'il est activé, votre mise en page place le titre de l'offre, les deux widgets et votre propre bouton d'ajout au panier sur chaque page produit. Les deux autres onglets suivent la page Design, comme indiqué ci-dessus.

Chaque onglet propose une liste **Partir d'un modèle**. Un modèle ne remplace que le balisage et la feuille de style de cet onglet : vous pouvez donc partir d'un modèle pour vos options de lot et d'un autre pour votre widget d'abonnement.

## Importer un design de notre équipe de support

Lorsque notre équipe crée un design pour vous, elle vous l'envoie sous la forme d'un seul bloc de texte.

1. Ouvrez le concepteur et cliquez sur **Importer un design**.
2. Collez le bloc entier et cliquez sur **Importer**. Il remplace tous les modèles, feuilles de style et libellés des trois onglets.
3. Vérifiez l'aperçu, puis cliquez sur **Enregistrer**.
4. Si votre boutique n'utilise pas encore le design, choisissez **Custom (Liquid)** pour le widget sur la page Design.

Un design peut aussi apporter la couleur de votre marque, l'arrondi et l'espacement de la page Design. Le concepteur les liste dans une bannière avant l'enregistrement, et l'enregistrement les conserve avec le design. Ils modifient aussi le style de vos autres widgets ; cliquez sur **Conserver la page Design telle quelle** pour enregistrer le design sans eux.

## Fonctionnement d'un modèle

Un modèle est du HTML ordinaire contenant des chaînes Liquid entre doubles accolades, comme `{{ selling_plan.name }}` ou `{{ tier.price | money }}`. Tapez `{{` dans l'éditeur pour voir toutes les chaînes acceptées par la partie que vous modifiez, avec ce qu'elles affichent ; la section **Référence** les liste aussi. Tout autre contenu entre doubles accolades, et toute balise Liquid autre qu'un commentaire, est refusé avec la ligne où il se trouve.

Il n'y a pas de conditions. Pour masquer un élément sans valeur, utilisez le CSS : un prix ou un badge vide n'affiche rien, donc `:empty` masque son élément. L'option d'abonnement choisie a un bouton radio coché (`.sss-liquid-row:has(> input:checked)`) et l'option de lot choisie a la classe `.sss-bundle-block__tier--selected`.

L'application conserve les éléments nécessaires au fonctionnement de votre boutique : les boutons radio, les sélecteurs de variante, les sélecteurs de quantité et les données que la boutique lit pour garder les prix à jour et ajouter les bons articles au panier. Votre balisage vient autour et à l'intérieur de ces éléments.

## Widget d'abonnement

* **Conteneur** : tout ce qui entoure les options, comme un titre ou une ligne de réassurance. Placez les options avec `{{ sss.options }}`. Vous pouvez aussi placer `{{ sss.one_time }}`, `{{ sss.add_to_cart }}` et `{{ sss.quantity }}`.
* **Groupe d'offre** : affiché une fois par offre. Affichez ses options sous forme de lignes avec `{{ sss.group.options }}`, ou faites de toute l'offre une seule carte avec une liste déroulante (`{{ sss.plan_picker }}`) ou des boutons (`{{ sss.plan_picker_pills }}`).
* **Option d'abonnement** et **Achat unique** : une ligne chacune.
* **Ligne d'avantage**, **Cadeau offert** et **Récompense de fidélité** : l'apparence d'un avantage, d'un cadeau ou d'une récompense, placés dans une option avec `{{ sss.benefits }}`, `{{ sss.gifts }}` et `{{ sss.rewards }}`.

Les prix comprennent les économies, le prix par jour, par portion et par unité, le prix après les premières commandes et la ligne de facturation. Pour afficher un prix par portion, ajoutez le champ **Portions** sous **Champs produit** et renseignez-le sur chaque variante.

## Options de lot

* **Barre de lot** : tout ce qui entoure les options. Placez-les avec `{{ sss.tiers }}`.
* **Option de lot** : une option, par exemple une taille de pack. Elle peut afficher le titre de l'option, son badge, son prix, son prix plein, son prix unitaire et les économies. Placez le module de composition, les produits d'un lot fixe, les produits complémentaires, les cadeaux et les sélecteurs de variante où vous le souhaitez avec `{{ sss.tier.builder }}`, `{{ sss.tier.products }}`, `{{ sss.tier.addons }}`, `{{ sss.tier.gifts }}` et `{{ sss.tier.variant_pickers }}`. Tout ce que vous omettez suit votre balisage.
* **Produit du lot** : l'apparence d'un produit dans un lot fixe, une option de box à composer et les produits complémentaires : son image, son titre, son prix, son fournisseur et son autocollant.

Pour afficher un autocollant comme « Meilleure vente » sur un produit, ajoutez le champ **Autocollant de lot** sous **Champs produit**, puis renseignez-le sur le produit. Traduisez-le avec Translate & Adapt de Shopify. Les autocollants s'affichent pour les 20 premiers produits de lot d'une page.

Activez **Afficher un groupe de produits à la fois** pour afficher les groupes d'une option de box à composer sous forme d'onglets, un groupe ouvert à la fois. Chaque onglet affiche le nom et le sous-titre du groupe, que vous définissez sur le groupe dans **Offres**.

## Libellés et traductions

Vos propres textes se trouvent sous **Libellés**, et vous en affichez un avec `{{ sss.labels.name }}`. Un libellé utilisé dans une option d'abonnement peut inclure les valeurs de cette option, comme `Billed {price} {billing_frequency}`, afin que la phrase entière reste un seul libellé dans chaque langue. Traduisez vos libellés sous **Paramètres > Traductions > Widgets**.

Les libellés d'un modèle sont d'abord dans la langue de votre boutique. Lorsque vous enregistrez, chaque libellé que vous n'avez pas reformulé est aussi traduit dans les autres langues de votre boutique, sauf si vous l'avez déjà traduit vous-même. Les libellés que vous écrivez vous-même sont à traduire par vos soins.

## Feuilles de style

Chaque onglet a sa propre feuille de style. À l'enregistrement, chaque règle est limitée à la partie qu'elle met en forme : votre CSS ne peut donc pas modifier le reste de votre thème. La feuille de style ne peut pas charger de scripts ni agir en dehors du widget.

## Aperçu

L'aperçu à côté de l'éditeur affiche votre design tel qu'il apparaîtra sur la boutique. Choisissez l'un des produits d'exemple, ou cliquez sur **Prévisualiser un produit de votre boutique** pour le voir sur l'un des vôtres. Les polices et styles propres à votre thème ne s'affichent que sur votre boutique. L'aperçu n'exécute pas votre JavaScript.

## JavaScript

L'encadré **JavaScript** en bas du concepteur contient un script pour votre design. Il s'exécute une fois sur chaque page où votre design affiche le widget d'abonnement ou les options de lot, une fois ceux-ci affichés. Une page peut afficher plusieurs widgets : trouvez-les tous avec `document.querySelectorAll`.

## Ce que le concepteur ne fait pas

* Un modèle ne peut pas utiliser les noms de classe ou les attributs de données propres à l'application (comme `purchase-option-*` ou `data-tier-total`) ; l'éditeur vous indique lequel lorsqu'il refuse le modèle.
* Nous assurons le support du concepteur lui-même. La création et la maintenance du balisage et du CSS de votre design relèvent de vous ou de votre développeur.