Le widget d'abonnement

La page Design vous permet de contrôler l'apparence de vos widgets d'abonnement et de lot sur vos pages produit : le design, les couleurs, les coins et les espacements, les éléments affichés, les textes que lisent les clients et votre propre CSS. Les deux widgets se conçoivent ensemble sur cette seule page, pour qu'ils s'accordent entre eux et avec votre thème. C'est l'expérience de widget unifiée : un seul ensemble de réglages, les deux widgets, tous les designs.

Si la page indique Vos widgets ne sont pas encore en ligne, cliquez d'abord sur Activer le widget. Consultez Comment activer le widget d'abonnement sur la boutique en ligne.

Table des matières

• Qu'est-ce que le widget d'abonnement ?
• Organisation de la page
• L'aperçu
• Design
• Couleurs
• Forme
• Espacement
• Police
• Éléments
• Les titres et le titre de l'offre
• Lire une ligne d'élément
• Badges
• Couleurs par défaut et personnalisées
• Prix
• L'ordre d'affichage
• Libellés
• CSS personnalisé
• Designs par offre
• Enregistrer vos modifications
• Restaurer votre design précédent
• La ligne Powered by Supr
• Obtenir de l'aide pour votre design
• Conseils et bonnes pratiques
• Questions fréquentes
• Guides associés

Qu'est-ce que le widget d'abonnement ?

Ce que proposent les widgets, quelles options, quelles réductions et si la ligne d'achat unique s'affiche, se règle sur chaque offre dans Offres. L'apparence des widgets, et les textes communs qu'ils affichent, se règlent sur cette page.

Organisation de la page

• L'aperçu à gauche, qui vous suit pendant le défilement.
• Une carte de réglages à droite, avec ses sections dans cet ordre : Design, Couleurs, Forme, Espacement, Police, Éléments et CSS personnalisé.
• Libellés, une carte à part sous la carte de réglages, pour les textes que lisent vos clients.
• Paramètres des modules sous les deux, pour les extras autour du widget, comme le badge à côté du prix du produit, le texte du bouton d'ajout au panier et le sélecteur de date de livraison. Consultez Modules de la page produit.
• Restaurer le design précédent, uniquement sur les boutiques qui avaient personnalisé leurs widgets avant l'existence de cette page.
• Besoin d'aide pour l'adapter à votre marque ?, avec un bouton Discuter avec un expert qui ouvre une conversation avec notre équipe.

L'aperçu

L'aperçu se trouve à côté des réglages et vous suit pendant le défilement, pour que vous voyiez ce que vous modifiez au moment où vous le modifiez. Il montre votre page produit telle qu'un client la voit, avec les widgets de lot et d'abonnement empilés dans l'ordre réel d'affichage, et le champ de date de livraison en dessous si vous en utilisez un.

Utilisez Produit d'aperçu au-dessus pour prévisualiser avec les options et les prix d'un vrai produit plutôt qu'avec des données d'exemple, et Variante d'aperçu pour vérifier un produit dont les variantes ont des prix différents.

Chaque modification apparaît dans l'aperçu avant l'enregistrement, pour que vous puissiez essayer plusieurs choses et les annuler. Sur un écran d'ordinateur, l'aperçu ne dépasse jamais la hauteur de la fenêtre : son en-tête et son pied restent en place et les widgets défilent entre les deux.

Design

Cette section affiche le design d'abonnement et la mise en page de lot actuellement en ligne, chacun avec une miniature.

1. Cliquez sur Modifier pour ouvrir Choisir un design.
2. Utilisez le sélecteur en haut pour choisir Widget d'abonnement ou Widget de lot. Vous pouvez saisir du texte dans Rechercher des designs ou filtrer par catégorie.
3. Cliquez sur le design souhaité. La galerie se ferme et l'aperçu l'affiche.
4. Enregistrez avec la barre d'enregistrement en haut de la page. Rien ne change sur votre boutique tant que vous n'avez pas enregistré.

Les designs d'abonnement, par catégorie de la galerie :

• Conversion
• • Checkbox : une simple case à cocher pour passer de l'achat unique à l'abonnement.
  • Aurora : des bordures en dégradé fluide avec un effet scintillant. Le design de départ d'une nouvelle boutique.
  • Lure : le design phare, avec des avantages mis en avant et une bannière de réduction.
• Classique
• • Classic+ : une mise en page détaillée avec de la place pour les options prépayées et plusieurs choix. Le prix se trouve en haut et suit l'option choisie par le client, et chaque option garde son propre prix avec son badge de réduction à côté.
  • Dropdown+ : tous les détails dans un menu déroulant compact. Le prix se trouve en haut et suit l'option choisie par le client : les lignes du menu déroulant restent donc une simple liste de fréquences.
  • Panel+ : une mise en page à onglets avec un bouton radio sur chaque option.
• Minimaliste
• • Classic : une mise en page simple pour les options payées à chaque commande, avec trois choix au maximum.
  • Dropdown : la façon la plus compacte d'afficher vos options.
  • Panel : des boutons en panneau simples et épurés.
• Esthétique
• • Blobs : un style animé pour attirer l'attention.

Les mises en page de lot :

• Panels : des lignes, chacune dans son propre panneau bordé. La mise en page de départ d'une nouvelle boutique.
• Cards : des cartes horizontales, idéales pour comparer deux ou trois options côte à côte.
• List : des lignes verticales avec un bouton radio sur chaque option. La plus compacte.

Chaque design se personnalise depuis cette page, dans les sections ci-dessous : il n'y a donc rien à ouvrir et rien à régler deux fois. Un seul design d'abonnement et une seule mise en page de lot sont en ligne sur votre boutique à la fois, et toutes les offres les utilisent. Les réglages des autres sont conservés : passer de l'un à l'autre ne vous coûte donc rien.

Changer de design n'affecte jamais vos offres, vos prix ni vos abonnés.

Une fois que vous avez enregistré des modifications sur cette page, un bouton Rétablir les valeurs par défaut apparaît dans cette section. Il rétablit vos couleurs, votre forme, vos espacements, votre police, vos éléments, vos libellés et votre CSS personnalisé tels que fournis par l'application, sur tous les designs, et conserve le design et la mise en page de lot que vous publiez. Comme tout le reste ici, il ne prend effet qu'à l'enregistrement.

Couleurs

Un seul choix, appliqué à tous les designs à la fois : si vous changez de design plus tard, votre boutique garde son style. Chaque type de réponse se trouve sur sa propre ligne, sous un petit titre :

• De votre thème, en premier : la pastille en pointillés Hériter de votre thème reprend tout de votre thème, suivie des schémas de couleurs de votre thème, affichés sous forme de pastilles dans leurs propres couleurs. Choisir un schéma reprend son arrière-plan et son texte. Cette ligne n'apparaît que si votre thème publie des schémas de couleurs.
• Couleur principale et Arrière-plan, sur les thèmes qui publient une palette de couleurs au lieu de schémas de couleurs, comme Horizon. Voir ci-dessous.
• Une seule couleur, et tout s'y adapte : les couleurs ordinaires, qui font le tour du cercle chromatique du bleu jusqu'au rose et au rouge, avec les neutres en dernier et la vôtre à la fin. En choisir une définit votre couleur principale, et tout ce que dessinent les widgets la suit : l'option choisie par le client, les bordures, les boutons radio et les badges d'économie. Le texte d'un badge est choisi pour vous afin de rester lisible quelle que soit la couleur choisie. Pour la plupart des boutiques, c'est tout ce qu'il y a à faire.
• Dégradé : treize mélanges prêts à l'emploi, chacun dessiné dans ses propres couleurs, de Aurore jusqu'au seul neutre, Encre et argent. Entre les deux se trouvent Minuit, Floraison, Rose, Coucher de soleil, Sable, Braise, Menthe, Forêt, Océan, Lagon et Améthyste. Choisissez-en un et ses trois points apparaissent en dessous, Base, Deuxième et Troisième, pour que vous puissiez les ajuster. Cette ligne n'apparaît que lorsqu'un design capable de dessiner un dégradé est publié ; sur les autres, elle n'aurait aucun effet.

Si votre thème publie une palette de couleurs plutôt que des schémas de couleurs, il n'y a pas de paire à hériter : vous en choisissez donc une vous-même parmi deux rangées dessinées dans les couleurs du thème :

• Couleur principale est la couleur dans laquelle vos widgets sont dessinés : l'option choisie par le client, les bordures, les boutons radio et les badges. Vos textes la suivent : il n'y a donc rien de plus à régler.
• Arrière-plan est la carte derrière.

Une couleur ne peut pas être les deux à la fois : en choisir une que l'autre rangée utilise déjà inverse les deux. Inverser une paire clair sur foncé se fait en un clic au lieu de trois.

Ce sont des alternatives, et non des couches, car elles répondent à la même question. Un dégradé est une couleur comme une autre : son point Base est ce que reprend le reste du widget, l'option choisie, les bordures et les badges le suivent donc tous. Choisir plutôt une couleur unie dessine ces designs à plat, et choisir un schéma du thème reprend la paire de ce schéma et en déduit la couleur à partir de son texte.

Un dégradé atteint tout ce qui, sur le widget, doit attirer l'œil, et pas seulement son contour. Sur l'option choisie par le client, il dessine le nom de l'option et le prix. Sur chaque option, choisie ou non, il dessine les badges, les pastilles d'économie, ainsi que les lignes de cadeau et de livraison gratuite. Les lignes de cadeau et de livraison gratuite ondulent lentement, ce qui attire l'œil sans le détourner du prix. Votre badge de réduction prend le mélange sur tous les designs, car le badge d'une option d'abonnement et celui d'une option de lot sont le même objet ; donnez au badge une couleur à vous sur sa ligne dans Éléments et il la gardera.

Une ligne de cadeau ou de livraison gratuite est entourée de votre couleur tant que son option n'est pas choisie, et s'en remplit dès qu'un client choisit cette option. C'est vrai avec une couleur unie comme avec un dégradé : une rangée d'options affiche donc un seul bloc de couleur pleine, sur l'option réellement choisie par le client, et les autres se lisent comme des offres en attente.

Quel que soit le mélange choisi, le texte affiché dessus est choisi pour rester lisible. L'option à l'unité reste à part : c'est la ligne simple au prix plein plutôt qu'une offre, elle garde donc un contour ordinaire et son prix dans votre couleur habituelle.

Réglez cela en premier, puis n'utilisez Éléments ci-dessous que pour les parties que vous voulez différencier.

Forme

• Arrondi règle l'arrondi des coins.
• Épaisseur de la bordure règle la largeur des bordures.

Sur un design qui dessine une bordure en dégradé, l'épaisseur règle aussi cette bordure, pour que le dégradé et les bordures unies à côté aient la même épaisseur. L'option choisie par le client, et celle sous son pointeur, sont signalées par leur couleur à cette même épaisseur plutôt que par un anneau plus épais. L'arrondi s'applique aussi à l'intérieur d'une option de lot : les lignes de cadeau, de livraison gratuite et d'extras sont arrondies en conséquence.

Espacement

L'espacement comporte trois parties :

• Dans chaque option : Marge intérieure en haut et Marge intérieure en bas règlent l'espace au-dessus et en dessous du contenu de chaque option d'abonnement et option de lot. Laissez celle du bas telle quelle et elle suit celle du haut. Marge intérieure horizontale règle les deux côtés.
• Entre les widgets : Espacement est l'espace entre le widget de lot, le widget d'abonnement et le champ de date de livraison, pour quand les éléments sont trop proches ou trop éloignés.
• Autour du widget : Espace au-dessus et Espace en dessous de l'ensemble. Utilisez-les quand votre thème place le widget trop près du bouton d'ajout au panier ou du prix.

Tout cela s'applique en même temps à vos widgets d'abonnement et de lot, et au champ de date de livraison en dessous.

Police

Une seule police pour votre widget d'abonnement et vos options de lot, titres compris :

• Suit votre thème, par défaut : les titres utilisent la police des titres de votre thème et tout le reste sa police de texte, comme le fait votre thème.
• Police de texte du thème ou Police de titre du thème : tout le widget dans cette seule police.
• Système, Serif ou Chasse fixe : une police que tous les appareils possèdent déjà.
• Personnalisée : saisissez le nom d'une police que votre thème charge déjà, comme Futura PT, exactement comme votre thème la nomme. Vous pouvez en lister plusieurs, séparées par des virgules, et la première que le navigateur possède est utilisée. Seuls les lettres, chiffres, espaces, virgules et traits d'union sont conservés. Si le navigateur ne la possède pas, le widget revient à la police de texte de votre thème.

L'application ne charge jamais de police elle-même : une police personnalisée ne s'affiche donc que si votre thème (ou une autre application) la charge déjà sur la page produit. Les tailles et graisses restent sur chaque ligne dans Éléments.

Éléments

Cette section comporte une ligne par partie du widget, dans l'ordre où vous lisez la page produit. Une ligne s'applique à tous les designs qui ont cette partie : masquer le titre le masque donc sur tous, et une ligne que votre design publié ne peut pas appliquer n'est pas affichée du tout.

• Les deux widgets : Titre de l'offre, Afficher les variantes sous forme de pastilles, Badge de réduction, Badge de réduction sur chaque option (sur Classic+ uniquement) et Badge de message.
• Options d'abonnement : Titre, puis la surface (Arrière-plan, Bordure, Bouton radio), puis le texte dessus : Nom de l'offre, Titre de section, Nom de l'option, Description, Fréquence de livraison, Prix, Prix barré, Prix unitaire, Avantages, Icône d'avantage, Titre des avantages et Infobulle d'information.
• Options de lot : Titre, Arrière-plan, Bordure, Bouton radio, Titre, Prix, Prix barré et Prix unitaire.
• Date de livraison : Titre, Champ et Bordure, le style du champ de date sous les widgets. Cette section n'apparaît qu'une fois le Sélecteur de date activé dans Paramètres des modules. Consultez Modules de la page produit.
• Mise en page : Lot en premier, qui indique si le widget de lot se place au-dessus du widget d'abonnement, et Synchroniser les prix des lots, qui indique si les prix des lots suivent le prix par livraison de l'abonnement sélectionné. Les deux sont activés par défaut.

Dans Options d'abonnement et Options de lot, un petit titre Uniquement sur ce design signale les lignes propres au design que vous avez publié et à aucun autre. La liste change selon le design publié. Par exemple :

• Liste déroulante de livraison, sur les designs qui affichent une liste pour la fréquence de livraison (Dropdown, Dropdown+, Lure et Checkbox) : son remplissage, le texte et la flèche qu'elle contient, ainsi que la taille et la graisse de ce texte.
• Bord épais et Masquer la description jusqu'au choix, sur Aurora.
• Bord épais sur les options de lot, sur les mises en page qui peuvent le dessiner.

Les deux sections de widget sont listées dans l'ordre où les widgets s'empilent sur votre page produit : celle que le client voit en premier est donc celle que vous atteignez en premier. Basculez Lot en premier et elles s'inversent immédiatement.

Les titres et le titre de l'offre

Une page produit peut comporter un titre d'offre et jusqu'à trois titres de section.

Titre de l'offre est une ligne de Les deux widgets. Il affiche une seule fois le nom de votre offre tout en haut, au-dessus des options de lot, des options d'abonnement et de la date de livraison. C'est le Nom de l'offre que vous avez donné à l'offre sur la page Offres : renommez l'offre et la page suit. Il est désactivé tant que vous ne l'activez pas, et sa couleur, sa taille et sa graisse se règlent sur la ligne.

Afficher les variantes sous forme de pastilles est une ligne de Les deux widgets. Une fois activée, chaque choix de variante dans les deux widgets affiche chaque option sous forme de pastilles au lieu d'une liste déroulante : les box à composer et leur liste de produits, les extras, les cadeaux (sur les options de lot et les options d'abonnement), les produits d'un lot fixe, et les choix par article sur les remises par quantité et Achetez X obtenez Y. Lorsque vous avez défini une couleur ou une image sur la valeur d'option dans Shopify (la pastille d'une option Couleur, par exemple), la pastille l'affiche ; les autres options, comme les tailles, affichent leur nom. Une valeur épuisée est barrée et ne peut pas être choisie. Les pastilles prennent les couleurs de votre widget : celle choisie est dessinée dans votre couleur d'accent. Les pastilles viennent des valeurs d'option de produit de Shopify : ouvrez le produit dans Shopify et, sous Variantes, reliez son option de couleur au métachamp de catégorie Couleur et choisissez la pastille de chaque valeur (consultez le guide de Shopify, Utiliser les métachamps de catégorie). Ce réglage est activé pour les nouvelles boutiques, et désactivé pour les boutiques installées plus tôt tant que vous ne l'activez pas.

Chaque section a sa propre ligne Titre, avec son interrupteur, sa couleur, sa taille, sa graisse et sa disposition : Options d'abonnement > Titre, Options de lot > Titre et Date de livraison > Titre. Les dispositions sont :

• Centré avec lignes, le titre au milieu avec un filet de chaque côté. La disposition de départ d'une nouvelle boutique.
• Centré, le titre au milieu sans filets.
• Simple, le titre seul au début de la ligne.

Le texte de chaque titre se règle à un endroit différent :

• Titre de l'abonnement : le champ Titre de la section dans Libellés. Il commence par {{subscription_name}}, qui affiche le Nom de l'abonnement de l'offre, le nom que vous avez défini sur l'offre au-dessus de ses options d'abonnement (traduit avec l'offre). Saisissez plutôt vos propres mots (« Ne soyez jamais à court ! »), ou combinez les deux (« {{subscription_name}}, résiliable à tout moment »). Laissé vide, le champ fonctionne comme {{subscription_name}}.
• Titre du lot : le champ Nom du lot de l'offre, au-dessus de ses options de lot. Laissez-le vide et le titre affiche « Bundle & Save ». Pour n'afficher aucun titre de lot, désactivez Options de lot > Titre dans Éléments.
• Titre de la date de livraison : Titre du sélecteur de date, dans Paramètres des modules > Sélecteur de date.

Lire une ligne d'élément

Une ligne tient sur une seule ligne. Le nom de l'élément à gauche avec son interrupteur à côté, puis, dans des colonnes à droite :

• Sa couleur, sous forme de pastille sur laquelle vous cliquez pour ouvrir le sélecteur de couleur.
• Sa couleur sur l'option choisie par le client, sous forme de deuxième pastille, sur les parties qui changent d'apparence une fois choisies.
• Sa taille de texte, en pixels.
• Sa graisse de texte, de fin à noir.

Ce qui varie d'une ligne à l'autre, c'est l'interrupteur : le nom de l'option, les arrière-plans et les bordures ne peuvent pas être masqués, ces lignes n'ont donc pas d'interrupteur, et les arrière-plans et bordures ne sont qu'une couleur, faute de texte à dimensionner.

Deux champs n'appartiennent à aucune de ces colonnes : ils se trouvent donc sur une ligne à part en dessous : un Espacement, pour un élément composé de plusieurs lignes, et une Disposition du prix. La liste des avantages a le premier, et le prix barré a les deux.

Sur un écran étroit, les réglages passent sur leur propre ligne sous le nom. Le style n'apparaît que lorsque l'élément est activé, et une modification s'applique à tous les designs qui ont cet élément : changer de design plus tard conserve donc votre style. Survolez le nom d'une ligne pour voir ce qu'elle couvre.

Badges

Il y a deux badges, et ce sont deux lignes de Les deux widgets, car chacun se règle une seule fois pour les deux widgets :

• Le Badge de réduction est calculé à partir de votre réduction, et affiche « -20% » sur une option d'abonnement et « Économisez 20 % » sur une option de lot.
• Le Badge de message est celui que vous écrivez vous-même sur une option de lot, dans son champ Badge, comme « Le plus populaire ».

Chacun a sa propre forme, couleur d'arrière-plan, couleur de texte, taille et graisse de texte. Les couleurs du badge de réduction sont par défaut, ce qui suit votre couleur principale ; choisissez une couleur sur la ligne pour définir la vôtre.

Il y a quatre formes :

• Bulle, une pastille arrondie à côté du titre.
• Étiquette, une étiquette à bagage avec une pointe sur son bord d'attaque.
• Flottant, la pastille détachée de la ligne avec une ombre douce en dessous.
• Ruban, une bande collée au bord supérieur de la ligne. La forme de départ d'une nouvelle boutique pour le badge de réduction.

Flottant et Ruban sortent de la ligne : ce sont donc les deux formes qui demandent où se placer le long de celle-ci : Début, Centre ou Fin.

Couleurs par défaut et personnalisées

Chaque couleur d'une ligne d'élément commence par défaut, et par défaut signifie votre couleur principale partout où celle-ci pilote cette partie : la bordure, le bouton radio, l'arrière-plan lorsque l'option est sélectionnée. Réglez-la une fois dans Couleurs et toutes la suivent.

Vous pouvez distinguer les deux grâce à la pastille. Un contour en pointillés signifie que la couleur suit encore votre palette ; un contour plein signifie que vous l'avez définie vous-même. Une pastille en damier signifie que le texte n'a pas de couleur propre et prend celle du texte qui l'entoure, tant que vous n'en choisissez pas. Survolez-la pour voir de quel cas il s'agit, et quelle est la couleur.

Cliquez sur la pastille et choisissez une couleur : cette seule partie se détache et garde votre couleur quelle que soit la couleur principale. Pour la rétablir, cliquez à nouveau sur la pastille et choisissez Utiliser la valeur par défaut : la partie rejoint l'ensemble et prend la couleur principale actuelle.

Les parties que la couleur principale ne pilote pas, comme le nom de l'option ou le prix barré, interprètent la valeur par défaut comme la couleur fournie avec le design. Sur un design qui dessine un dégradé, la bordure interprète la valeur par défaut comme le dégradé.

Prix

Les prix ont leurs propres lignes dans Éléments, et les deux widgets sont séparés pour que vous puissiez modifier l'un sans toucher à l'autre. Pour chaque widget, vous pouvez désactiver :

• Prix, le montant sur chaque option d'abonnement ou option de lot.
• Prix barré, le prix plein barré à côté du prix réduit.
• Prix unitaire, le prix par article comme « 3,50 $ l'unité ». Il est désactivé au départ sur le widget d'abonnement et activé pour les options de lot.

Incitation à prendre plus (options de lot, désactivée tant que vous ne l'activez pas) ajoute un lien sous les remises par quantité, comme « Ajoutez-en 1 de plus pour économiser 15 % », lorsqu'un client a choisi un petit pack et qu'un plus grand permet d'économiser davantage. Cliquer dessus sélectionne le plus grand pack. Elle ne s'affiche que sur les remises par quantité simples, pas sur une box à composer, un lot fixe, Achetez X obtenez Y ni une option avec un cadeau, et son texte est le champ Incitation au format supérieur dans Libellés.

La raison habituelle de désactiver un prix est que votre thème l'affiche déjà au-dessus du widget et que vous préférez ne pas le répéter. Pour n'afficher que le prix unitaire, désactivez Prix et activez Prix unitaire.

Les trois ont une couleur, une taille et une graisse. La ligne Prix de l'abonnement a aussi la deuxième pastille, pour le prix de l'option choisie par le client.

La ligne Prix barré de l'abonnement a deux champs supplémentaires, sur une ligne sous sa taille et sa graisse :

• Disposition du prix : Côte à côte garde les deux prix sur une seule ligne. Empilés place le prix barré sur sa propre ligne au-dessus du prix actuel.
• Espacement, l'espace entre les deux prix, en pixels.

Chaque design garde ses propres réponses : les régler sur le design que vous publiez laisse donc les autres tels quels.

L'ordre d'affichage

• Quel widget vient en premier : Éléments > Mise en page > Lot en premier. Activé par défaut ; désactivez-le pour placer le widget d'abonnement au-dessus des options de lot.
• L'ordre des options d'abonnement : ouvrez l'offre dans Offres et faites glisser les options par leur poignée dans Options d'abonnement, puis enregistrez l'offre. La boutique les affiche dans cet ordre.
• La ligne d'achat unique : sur l'offre, utilisez les flèches haut et bas de la ligne Achat unique pour la placer en haut ou en bas de la liste.
• L'ordre des options de lot : faites-les glisser dans Options de lot sur l'offre. La ligne de l'option à l'unité se déplace en haut ou en bas de la même façon que la ligne d'achat unique.
• L'option sélectionnée au chargement de la page : cliquez sur Définir par défaut sur cette ligne dans l'offre. Consultez Définir l'option par défaut.
• Un produit dans plusieurs offres : l'abonnement de chaque offre forme son propre groupe dans le widget. Réglez l'ordre des groupes dans Paramètres des modules > Ordre des offres. Cet ordre est aussi utilisé au paiement.

Libellés

C'est ici que vous reformulez les textes que lisent vos clients, dans la langue principale de votre boutique. Cette carte se trouve sous la carte de réglages, à part. Chaque champ s'applique à tous les designs de ce widget : votre texte est donc conservé quand vous essayez un autre design, et la carte ne liste que les champs que votre design publié affiche réellement.

• Widget d'abonnement : Titre de la section (accepte {{subscription_name}} pour le Nom de l'abonnement de l'offre), Ligne d'achat unique, Badge de réduction, pourcentage, Badge de réduction, montant, Badge de réduction, prix fixe, Titre des options d'abonnement, Ligne prépayée, Bannière de réduction, Titre de l'info-bulle, Ligne d'option (la ligne affichée pour chaque fréquence de la liste), Prix unitaire, et les suffixes de fréquence de Chaque jour à Tous les N ans (« / mois », « / {{n}} semaines »).
• Widget de lot : Pastille d'économie, pourcentage, Pastille d'économie, box à paliers, Pastille d'économie, montant, Suffixe par unité (« /unité »), Ligne d'expédition gratuite, Option à l'unité, Ligne de cadeau offert et Incitation au format supérieur (« Ajoutez-en {remaining} de plus pour économiser {value} % »).
• Box à composer : tout ce qu'une option de box à composer affiche autour de ses choix, comme le Titre « Inclut », le Titre des choix, l'Invite de sélection, le Compteur de sélection et Minimum non atteint (« Veuillez choisir au moins {min} articles »).
• Récompenses et cadeaux offerts : les titres au-dessus des récompenses Achetez X obtenez Y et des cadeaux, et le mot Gratuit affiché comme leur prix.

Certains champs utilisent des espaces réservés entre accolades, et chaque champ indique à quoi correspondent ses espaces réservés. Conservez-les dans votre texte et placez-les là où la phrase en a besoin. Laissez un champ vide pour revenir au texte intégré.

Certains textes ne se trouvent pas dans Libellés, car ils appartiennent à une offre ou à un module :

• Noms, descriptions et avantages des options d'abonnement : sur chaque option d'abonnement dans Offres (Nom de l'option, Description, Avantages). Les noms d'option n'ont pas de modification groupée : modifiez-les donc offre par offre ; les textes communs à toute la boutique, comme les suffixes de fréquence, se modifient une seule fois ici.
• Le nom, la description et les avantages de la ligne d'achat unique : sur la ligne Achat unique de l'offre. Laissez son Nom vide et la ligne utilise Ligne d'achat unique de Libellés.
• Les titres, sous-titres et badges des options de lot, ainsi que le titre Nom du lot : sur l'offre.
• Le texte du bouton d'ajout au panier, le badge à côté du prix du produit et les textes de date de livraison : dans Paramètres des modules, consultez Modules de la page produit.

CSS personnalisé

La dernière section de la carte de réglages, sous Éléments, pour tout ce que les réglages ci-dessus n'atteignent pas. Le CSS écrit ici s'applique aux deux widgets de votre page produit, et l'aperçu montre son effet avant l'enregistrement.

Chaque design a son propre CSS personnalisé : celui du design de la boutique s'applique partout où le design de la boutique est utilisé, et celui d'un design enregistré partout où ce design est utilisé. Un nouveau design commence avec une copie du CSS du design à partir duquel il a été créé, et un design créé avant que les designs aient leur propre CSS utilise celui du design de la boutique tant que vous ne l'enregistrez pas. Passer à une autre mise en page dans la section Design le conserve. Si vous aviez écrit du CSS dans l'ancien éditeur par design, ce CSS s'applique toujours par-dessus.

Les widgets n'acceptent pas votre propre HTML. La mise en page vient du design que vous publiez, et tout ce que vous pouvez modifier se trouve sur cette page.

Designs par offre

Chaque offre utilise votre design de la boutique, sauf si vous lui donnez un design propre : une offre peut ainsi se distinguer des autres, par exemple un club de recharges premium aux couleurs sombres de votre marque, à côté de votre offre Abonnez-vous et économisez habituelle.

Donner un design propre à une offre

1. Accédez à Supr Bundles & Subscriptions > Offres et ouvrez l'offre.
2. Dans l'aperçu, sur la ligne Design sous le sélecteur de produit, cliquez sur Nouveau design. L'offre reçoit un design portant son nom (une offre appelée Coffee Club reçoit Coffee Club Design), qui commence comme une copie du design de votre boutique, et l'éditeur de design s'ouvre dessus dans une fenêtre plein écran au-dessus de l'offre.
3. L'aperçu de la fenêtre est celui de l'offre : le même produit et la même variante que vous prévisualisiez sur l'offre, et les options, options de lot, cadeaux et textes de l'offre tels qu'ils sont en ce moment, modifications non enregistrées comprises. Vous pouvez y passer à un autre produit de l'offre.
4. Modifiez son design, sa mise en page de lot, ses couleurs, sa forme, ses espacements et ses éléments. Les deux aperçus suivent chaque modification au fur et à mesure. Pour le renommer, saisissez le nouveau nom dans Nom du design en haut de la carte Design.
5. Fermez la fenêtre et enregistrez l'offre. Le design est enregistré avec l'offre, il n'y a donc pas de bouton Enregistrer dans la fenêtre : Abandonner sur l'offre annule aussi le design et ses modifications, et rien n'est conservé tant que vous n'enregistrez pas.

Une fois que l'offre a son propre design, le menu déroulant de la ligne affiche son nom et Modifier le design remplace Nouveau design. Modifier le design rouvre la même fenêtre, et ses modifications sont enregistrées avec l'offre de la même façon. Le menu déroulant Design fait passer l'offre entre Design de la boutique, son propre design et tout autre design enregistré, et ce choix est enregistré avec l'offre ; changer de design conserve le design propre, pour que vous puissiez le choisir à nouveau. Pour supprimer le design propre de l'offre, cliquez sur la corbeille à côté de Nom du design dans sa fenêtre, puis enregistrez l'offre.

Une offre qui utilisait déjà un design partagé avec d'autres offres le conserve. La ligne indique alors combien d'autres offres l'utilisent, car une modification à cet endroit modifie aussi ces offres. Un design partagé, comme tout design ouvert depuis la page Design, garde son propre bouton Enregistrer dans la barre de titre de la fenêtre, et cet enregistrement s'applique à toutes les offres qui l'utilisent.

Sur la page Design. Le haut de la carte Design liste le design de la boutique et chaque design enregistré. Choisissez-en un dans la liste pour le modifier, cliquez sur Nouveau design pour en créer un autre à partir d'une copie de celui qui est ouvert, et utilisez les icônes crayon (renommer) et corbeille (supprimer) à côté pour renommer ou supprimer le design ouvert. Chaque offre peut avoir son propre design, et une boutique peut en conserver jusqu'à 50 de plus ici.

Ce que couvre un design. Le design et la mise en page de lot, les couleurs, la forme, les espacements, les éléments, l'Emplacement et le CSS personnalisé. Les Libellés et les paramètres des modules sont partagés par tous les designs. Les libellés se modifient sur le design de la boutique : lorsqu'un design enregistré est ouvert, la note sous ses réglages comporte un bouton Modifier le design de la boutique qui vous y emmène. La carte Paramètres des modules reste aussi sur la page lorsqu'un design enregistré est ouvert, marquée comme partagée, et une modification à cet endroit s'applique au design de la boutique et à chaque design enregistré. Les traductions suivent la mise en page du design comme pour le design de la boutique.

Sur la page produit. Le widget d'abonnement d'un produit utilise le design de la première offre qu'il affiche. L'offre qui vient en premier se règle dans Paramètres des modules > Ordre des offres sur cette page. Lorsque des offres ciblent différentes variantes d'un même produit, chaque variante utilise le design de sa première offre, et le widget change de design quand le client choisit une variante : une variante Bouteille en verre vendue via votre club premium peut ressembler au club, tandis que la Canette à côté garde votre design habituel. Chaque option de lot suit le design de sa propre offre. Supprimer un design ramène ses offres au design de la boutique.

Enregistrer vos modifications

Rien sur cette page ne s'enregistre au fur et à mesure. Modifiez autant que vous le souhaitez, suivez tout dans l'aperçu, puis utilisez la barre d'enregistrement en haut de la page pour tout enregistrer d'un coup, ou abandonnez et recommencez. Après l'enregistrement, rechargez une page produit de votre boutique pour voir le résultat.

Cette page écrit une même valeur sur tous les designs à la fois. Si vous aviez personnalisé vos widgets avec l'ancien éditeur par design, votre premier enregistrement ici est le moment où votre boutique passe à l'expérience de widget unifiée : un message Vos widgets s'améliorent vous le demande avant ce premier enregistrement, et nous gardons une copie de l'apparence qu'avaient vos widgets auparavant.

Restaurer votre design précédent

Cette section concerne les boutiques qui avaient personnalisé leurs widgets avec l'ancien éditeur par design, avant que cette page ne le remplace. Si vous avez installé Supr Bundles & Subscriptions après, il n'y a pas de design précédent à restaurer et pas de carte Restaurer le design précédent sur votre page.

Avant que votre boutique passe à l'expérience de widget unifiée, nous enregistrons une copie de l'apparence de ses widgets. Cette copie n'expire pas, et la carte indique la date à laquelle elle a été prise.

Dès lors, une carte Restaurer le design précédent se trouve vers le bas de cette page. Utilisez-la et vos widgets redeviennent exactement tels qu'ils étaient juste avant le changement. Vous pouvez ensuite les personnaliser à nouveau et restaurer encore.

La restauration remplace tout ce que vous avez modifié sur cette page depuis la prise de cette copie. Elle n'affecte pas vos offres, vos prix ni vos abonnés.

La ligne Powered by Supr

Certaines boutiques voient une petite ligne Powered by Supr sous le widget d'abonnement, ou dans son infobulle d'information. Son affichage dépend de votre forfait : elle est supprimée automatiquement sur les forfaits payants, et il n'existe pas d'interrupteur pour elle sur la page Design. Les forfaits sont présentés sur notre page de tarifs et sur Facturation dans l'application.

Après un changement de forfait, ouvrez une fois l'application, puis rechargez votre page produit : la ligne a disparu. Si elle s'affiche toujours, écrivez-nous dans le chat et nous vérifierons pour vous.

La même ligne peut apparaître en bas des e-mails d'abonnement que nous envoyons pour vous, et elle suit la même règle.

Obtenir de l'aide pour votre design

La carte Besoin d'aide pour l'adapter à votre marque ? en bas de la page comporte un bouton Discuter avec un expert. Notre équipe peut vous aider à choisir un design, à reprendre les couleurs et les polices de votre thème, à ajuster les espacements sur mobile, ou à écrire du CSS personnalisé pour une modification que les réglages ne couvrent pas. Dites-nous à quoi vous voulez que le widget ressemble, une capture d'écran aide, et nous le configurerons avec vous.

Conseils et bonnes pratiques

• Réglez d'abord votre couleur, votre forme et vos espacements, puis choisissez un design. Ils s'appliquent à tous les designs : essayer des designs ne vous coûte donc rien.
• Laissez les couleurs des éléments par défaut sauf si vous avez une raison. Moins vous faites d'exceptions, meilleur sera le rendu d'un nouveau design quand vous en essaierez un.
• Prévisualisez avec un vrai produit pour voir vos propres prix et réductions.
• Si un design affiche une liste déroulante dont vous ne voulez pas, passer à Classic ou Panel est le moyen le plus rapide de la supprimer.
• Pour des options côte à côte plutôt qu'empilées, utilisez Panel ou Panel+ pour les abonnements et la mise en page de lot Cards.

Questions fréquentes

Deux offres de ma boutique peuvent-elles avoir une apparence différente ?
Oui. Créez un design enregistré et choisissez-le pour l'une des offres, consultez Designs par offre.

Comment modifier les couleurs pour qu'elles correspondent à ma marque ?
Choisissez votre couleur dans Couleurs, puis ne modifiez des parties individuelles dans Éléments que là où elles doivent différer. Enregistrez avec la barre d'enregistrement et rechargez une page produit.

Un réglage que j'ai modifié ne s'affiche pas sur ma boutique. Pourquoi ?
Vérifiez que vous avez enregistré, puis rechargez la page produit. Si cela ne s'affiche toujours pas, le CSS de votre thème remplace probablement le widget à cet endroit. Écrivez-nous dans le chat avec le lien du produit et nous corrigerons cela sans toucher à votre thème.

Des offres différentes peuvent-elles utiliser des designs différents ?
Non. Un seul design d'abonnement et une seule mise en page de lot sont en ligne par boutique, et toutes les offres les utilisent. Le style des autres est conservé : changer ne coûte donc rien.

Comment masquer le prix, le prix barré ou le badge de réduction ?
Désactivez Prix, Prix barré ou Prix unitaire dans Éléments, séparément pour les options d'abonnement et les options de lot. Le badge de réduction a sa propre ligne dans Les deux widgets.

Comment placer le widget d'abonnement au-dessus des options de lot ?
Désactivez Éléments > Mise en page > Lot en premier et enregistrez.

Comment modifier « Abonnez-vous et économisez », « Achat unique », « Économisez 15 % » ou « /unité » ?
Dans la carte Libellés. Le titre au-dessus des options d'abonnement est le Titre de la section, qui affiche le Nom de l'abonnement de l'offre partout où figure {{subscription_name}} (sa valeur de départ), et le titre du lot est le Nom du lot de l'offre. Consultez Comment modifier ou traduire les textes de la langue principale.

La liste déroulante de livraison ouverte a un aspect différent sur Windows et sur Mac. Puis-je la personnaliser ?
La liste déroulante fermée se personnalise dans Éléments > Liste déroulante de livraison. La liste ouverte est dessinée par le navigateur et le système d'exploitation du client : elle ne peut donc pas être restylée. Choisissez Classic ou Panel si vous préférez ne pas avoir de liste déroulante.

Puis-je ajouter mon propre HTML, ou copier un design vu sur un autre site ?
Les widgets n'acceptent pas de HTML propre. Choisissez ici le design le plus proche et personnalisez-le, puis utilisez Discuter avec un expert et notre équipe vous aidera à vous en approcher le plus possible.

Comment supprimer la ligne Powered by Supr ?
Elle est supprimée automatiquement sur les forfaits payants. Consultez La ligne Powered by Supr.

Guides associés

• Modules de la page produit
• Ce qu'est devenu l'éditeur de widget
• Guide du débutant sur les offres d'abonnement
• Comment modifier ou traduire les textes de la langue principale
• Traductions
• Ce que voient les clients dans le panier et au paiement
• Le widget d'abonnement ne s'affiche pas sur ma boutique

Mis à jour le : 24/10/2026