Skip to main content
Le bloc Product add-on propose un seul produit spécifique de votre choix en tant qu’option complémentaire dans le panier, mettant en avant un produit connu (une garantie, un échantillon, une meilleure vente) en ajout rapide directement dans le panier.
Contrairement au bloc Upsells, qui présente des produits choisis par une stratégie, le Product add-on affiche toujours le produit exact que vous choisissez.
Bloc Product add-on proposant un produit supplémentaire que l'acheteur peut inclure dans son panier

​
Comportement

  • Si aucune variante active ne se résout — le produit est non défini, archivé ou en rupture de stock — le bloc n’affiche rien plutôt qu’un bouton mort.
  • Le contrôle reflète si la ligne d’option complémentaire de ce bloc précis est dans le panier ; le désactiver supprime donc la ligne qu’il a ajoutée (sans affecter le même produit ajouté ailleurs).
  • Un prix comparatif est barré lorsqu’il y a une véritable démarque ; le libellé « % off » est masqué si la réduction s’arrondit sous 1 %.
  • L’image de l’option complémentaire revient à l’image principale du produit lorsque la variante choisie n’en a pas.

​
Paramètres

Title, Price label et Description prennent tous en charge les quatre mêmes jetons : {{product_title}}, {{price}}, {{compare_at_price}} et {{savings}}.

​
Placement et limites

  • Région : corps ou bas.
  • Maximum : 3 par état de panier. Le panier rempli et le panier vide ont chacun leur propre quota.
  • État : panier rempli et panier vide.
  • Non ajouté par défaut. Non verrouillé — vous pouvez le supprimer ou le masquer.

​
Modèle personnalisé

Prend en charge un modèle personnalisé depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu’il reçoit.

​
Contenu

​
État et actions

format détermine quel gestionnaire s’applique : handleAdd pour button, handleToggle pour checkbox et toggle. Un variantId à null signifie qu’il n’y a rien à ajouter, donc conditionnez votre contrôle sur cette valeur plutôt que d’appeler un gestionnaire qui ne peut pas réussir.

​
Design

Stylisez ce bloc avec sa section Design dans le panneau de paramètres. Il s’agit de surcharges par bloc qui se superposent à votre design global et y reviennent lorsqu’elles sont vides.

​
Text

La section Text dans Design vous permet de contrôler la typographie de trois éléments. Utilisez le sélecteur Text element pour basculer entre eux. Title — le nom du produit. Prend également en charge une famille de police personnalisée. Le gras et la couleur du texte se règlent dans l’éditeur de texte enrichi ci-dessus (dans l’onglet Settings), pas ici. Price — la ligne de prix. Le gras et la couleur du texte se règlent dans l’éditeur de texte enrichi ci-dessus. Description — le texte d’accompagnement. Le gras et la couleur du texte se règlent dans l’éditeur de texte enrichi ci-dessus.
Cliquer directement sur un élément de texte dans l’aperçu du panier le met en évidence et ouvre automatiquement ses contrôles dans le panneau.
Que sont les paramètres de design ? Apprenez-en plus ici : Paramètres de design.